简介
Bootstrap是一个用于疾速开发Web应用程序和网站的前端框架是基于HTML，CSS，JavaScript的为什么要应用Bootstrap？1. 挪动设施优先：自Bootstrap3起，框架蕴含了贯通于整个库的挪动设施优先的款式2. 浏览器反对：所有支流浏览器都反对3. 容易上手4. 响应式设计：其响应式CSS可能自适应于台式机，平板电脑和手机5. 为开发人员创立接口提供了一个简洁对立的解决方案6. 蕴含了功能强大的内置组件，易于定制7. 提供了基于web的定制8. 是开源的Bootstrap包的内容：根本构造：提供了一个带网格零碎，链接款式，背景的根本构造CSS：全局的CSS设置，定义根本的HTML元素款式，可扩大的class，以及一个先进的网格零碎组件：蕴含了几十个重要的组件JavaScript：蕴含了十几个自定义的JQuery插件定制：可定制Bootstrap组件，less变量和JQuery插件来失去你的版本bootstrap3.0文档：https://v3.bootcss.com/bootstrap4.0文档：https://v4.bootcss.com/Bootstrap的开发工具
任意前端开发工具即可专门针对Bootstrap的开发工具：Jetstrap（https://jetstrap.com/） LayoutIt（https://www.bootcss.com/p/layoutit/） bootswatchr（http://bootswatchr.com/）Bootstrap的应用
1. 下载压缩包：编译并压缩后的 CSS、JavaScript 和字体文件。不蕴含文档和源码文件2. CDN引入：（要先引入jquery）<!-- 最新版本的 Bootstrap 外围 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（个别不必引入） --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 外围 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>Bootstrap3和Bootstrap4的区别
Bootstrap3：应用less语言编写应用float的布局形式应用px为单位共有4种栅格类，顺次是特小(col-xs-)、小(col-sm-)、中(col-md-)、大(col-lg-)应用push和pull向左和向右挪动 Bootstrap4：应用sass语言编写应用flex的布局形式全副应用了rem和em为单位（除了局部的margin和padding应用px）共有5种栅格类，顺次是特小(col-)、小(col-sm-)、中(col-md-)、大(col-lg-)、特大(col-xl-)偏移列通过 offset- 类来设置，例如：.offset-md-4 是把.col-md-4 往右移了四列格。Bootstrap---全局款式
特点：代码整洁，格调对立，好看易用根本的HTML元素均能够通过class设置款式并失去加强成果一些全局类名和标签：对于题目：题目：h1-h6 / .h1-.h6副标题：small对于文本：对齐：.text-left / .text-center / .text-right大小写：.text-lowercase / .text-uppercase / .text-capitalize（首字母大写）文本色彩：text-muted/primary/success/info/warning/......对于表格：带边框：.table-bordered条纹状：.table-striped悬停变色：.table-hover紧凑格调：.table-condensed通过一些状态类能够为行或单元格设置色彩：.active：鼠标悬停在行或单元格上时所设置的色彩.success：标识胜利或踊跃的动作.info：标识一般的提示信息或动作.warning：标识正告或须要用户留神.danger：标识危险或潜在的带来负面影响的动作...对于表单：.form-control：表单元素被默认设置宽度属性为width: 100%.form-group：将label元素和后面提到的控件包裹在这个类中能够取得最好的排列.form-inline：可使其内容左对齐并且体现为inline-block级别的控件（只实用于视口（viewport）至多在 768px 宽度时（视口宽度再小的话就会使表单折叠））按钮色彩：.btn-default / .btn-success / .btn-primary / .btn-info / .btn-warning / .btn-danger / .btn-link ...按钮大小：.btn-lg / .btn-sm...对于图片：.img-responsive：让图片反对响应式布局（设置了max-width:100%; height:auto; display:block属性）.center-block：让设置了.img-responsive类的图片程度居中.img-rounded：设置圆角.img-circle：设置为圆形.img-thumbnail：设置带有边框的圆角图形...对于浮动：.pull-left：左浮动.pull-right：右浮动.clearfix：革除浮动（在父元素上加）对于显示和暗藏：.show：显示.hidden：暗藏Bootstrap---meta标签中的viewport
属性：width，height，user-scalable（是否容许缩放），initial-scale（网页初始化时的大小），maxmum-scale（容许用户缩放到的最大比例），minimun-scale（容许用户缩放到的最小比例）Bootstrap---栅格零碎
随着屏幕或视口尺寸的减少，零碎会主动分为最多12列栅格参数：bootstrap4有5种栅格布局：bootstrap3有4种栅格布局：.col-lg-x：在大屏中占的x/12.col-md-x：在中屏中占的x/12.col-lg-x：在小屏中占的x/12.col-xs-x：在超小屏中占的x/12栅格布局的容器：.container和.container-fluid.container类用于固定宽度并反对响应式布局的容器，容器能够被嵌套，然而大多数布局并不需要这么做（起码档次的嵌套构建出的网页更优雅-译者注）.container-fluid 类，能够使div宽度扩大到整个宽度（如果没有被其它CSS容器蕴含，则应是浏览器运行时的宽度，否则应是父容器中容许的最大宽度，个别视为100%宽度）。主动布局列：等宽：<div class="container"> <div class="row"> <div class="col">col1</div> <div class="col">col2</div> </div></div>等宽多行：（插入.w-100要将列拆分为新行。.w100仿佛与.clearfix有时能够达到同样的网页成果）<div class="container"> <div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="w-100"></div> <div class="col">col</div> <div class="col">col</div> </div></div>设置一列宽度：<div class="container"> <div class="row"> <div class="col"> </div> <div class="col-6"> </div> <div class="col"> </div> </div></div>可变宽度内容：（应用col-{breakpoint}-auto类可依据其内容的天然宽度来调整列的大小）<div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> </div> <div class="col-md-auto"> </div> <div class="col col-lg-2"> </div> </div></div>Bootstrap---响应式设计
针对浏览设施优化页面中既有内容的一种办法为了实用不同的屏幕宽度，应用CSS的媒体查问（media query）来检测浏览器视口的宽度不同的屏幕应用不同的样式表，不同的设施应用不同的断点设置断点依据状况失效对应的css属性：@media (only) screen(/print/speech/...) and (max-width:xxx) and (min-width:xxx){...}（only是为了在不反对媒体查问的浏览器中暗藏样式表，浏览器解决以only结尾的关键词时将会疏忽only）对不同设施的显示和暗藏：Bootstrap---字体图标
特点：体积小便于加载，无需反复设计，不便援用对应的类指定对应的图标Bootstrap---组件怪异属性
1. role：用于示意一个一般的标签，使之语义化，不便浏览器对其具体性能进行辨认 如：<div role="button"></div>，也即是将div元素转换为button按钮性能进行应用2. aria-label：设置的值能让读屏软件给读出来（当咱们没有给输入框设置 label 时，当其取得焦点时，屏幕阅读器会读出 aria-label 属性的值，aria-label 不会在视觉上出现成果。aria-label 只有加在可被 tab 到的元素上，读屏才会读出其中的内容） 如：<input type="text" class="form-control" placeholder="xxxx" aria-label="xxx">3. tabIndex：设置键盘的tab键在控件中进行挪动（焦点的挪动程序）4. data-：能够此为前缀来增加一些自定义的属性内容（用于存储页面或应用程序的公有自定义数据。不应该蕴含任何大写字母）...Bootstrap---组件下拉菜单
.dropdown：管制组件为下拉.dropdown-toggle：表明了这个是下拉列表.dropdown-menu-right：右对齐（代替了.pull-right）divider：分割线 下拉菜单的事件：data-toggle="dropdown/collpase"...Bootstrap---组件控件组
.input-group：示意控件组.input-group-addon：可搁置额定内容及图标...Bootstrap---组件按钮组
.btn-group：示意按钮组（加上父元素上）.btn-default/success/...：设置按钮对应款式色彩...Bootstrap---组件导航
以一个带有class为.nav的无序列表开始.nav-tabs代表可切换的导航.nav-pills代表胶囊导航.nav-justified使导航垂直（两端对齐）...Bootstrap---组件分页
.pagination：在父元素中增加示意分页.pager：搁置在翻页区域.previous：把链接向左对齐.next：把链接向右对齐...Bootstrap---组件进度条
.progress：示意进度条外框.progress-bar：进度条滑板挪动的局部可通过一些状态类扭转进度条色彩.progress-bar-striped：使进度条色彩突变...Bootstrap---组件列表
.list-group：列表组.list-group-item：列表项.list-group-item-heading：列表题目.list-group-item-text：列表文本.badge：状态数（徽章）...Bootstrap---组件面板
.panel：面板外框.panel-heading：面板头.panel-body：面板内容.panel-footer：面板的注脚...Bootstrap---组件巨幕
.jumbortron：示意巨幕（增加在父元素上）如果须要让巨幕组件的宽度与浏览器宽度统一并且没有圆角，请把此组件放在所有.container元素的里面，并在组件外部增加一个.container元素<div class="jumbotron"> <div class="container"> ... </div></div>... Bootstrap---组件媒体对象
.media：示意一个媒体对象.media-left：在一个内容块的左侧.media-body：是媒体对象中的主体内容（经常是图片侧边的内容）.media-right：在一个内容块的右侧（常放在.media-body的前面）.media-heading：媒体对象的题目.media-object：媒体对象中的对象，经常是图片...Bootstrap---组件well
把.well用在元素上，就能有嵌入（inset）的简略成果<div class="well well-lg">...</div>（大的成果）<div class="well well-sm">...</div>（小的成果）<div class="well">...</div>（失常成果）...Bootstrap---响应式的嵌入
类.embed-responsive-item间接利用在<iframe>、<embed>、<video>和<object>元素上<!-- 16:9的屏幕宽高比 --><div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe></div><!-- 4:3的屏幕宽高比--><div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe></div>Bootstrap---组件旋转图标
圆形旋转：<div class='spinner-border'></div>突变缩放：<div class='spinner-grow'></div>地位：利用弹性布局：<div class="d-flex justify-content-center"> //程度居中对齐 <div class="spinner-border" role="status"> </div></div><div class="d-flex justify-content-end"> //右对齐 <div class="spinner-border" role="status"> </div></div><div class="d-flex justify-items-center"> //垂直居中对齐 <div class="spinner-border" role="status"> </div></div>利用浮动：<div class="clearfix"> <div class="spinner-border float-right"> //右浮动 </div></div>利用文本对齐：<div class="text-center"> //居中对齐 <div class="spinner-border> </div></div><div class="text-right"> //右对齐 <div class="spinner-border> </div></div>大小：<div class="spinner-border/grow spinner-border-sm" role="status"> </div><div class="spinner-border" style="width: xxrem; height: xxrem;" role="status"> //自定义大小</div>利用到按钮上：<button class="btn btn-primary" type="button" disabled> <span class="spinner-border/grow spinner-border-sm" role="status" aria-hidden="true"></span></button>Bootstrap---插件
插件依赖于Bootstrap.js，基于JQuery通过data属性管制页面交互$(document).off('.data-api')解除属性绑定Bootstrap---插件模态框
模态框：（默认是暗藏的）<div class="modal> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> //头部内容 </div> <div class="modal-body"> //主体内容 </div> <div class="modal-footer"> //底部内容 </div> </div> </div></div>data的参数：一些办法：一些事件：绑定插件：data-toggle='modal'data-target='自定义的插件名（id，...）'Bootstrap---插件下拉菜单
下拉菜单：<div class="dropdown"> <button id="dLabel" type="button" data-toggle="dropdown"> //下拉菜单的按钮 <span class="caret"></span> //下箭头 </button> <ul class="dropdown-menu" aria-labelledby="dLabel"> //下拉菜单的子内容 ... </ul></div>一些办法：$().dropdown('toggle')切换给定导航栏或选项卡式导航的下拉菜单。一些事件：绑定插件：data-toggle='dropdown'data-target='自定义的插件名（id，...）'Bootstrap---插件滚动监听
滚动监听：<body data-spy="scroll" data-target="#navbar-example"> ... <div id="navbar-example"> <ul class="nav nav-tabs" role="tablist"> ... </ul> </div> ...</body>一些办法：一些参数：一些事件：绑定插件：data-spy="scroll" data-target="#navbar-example"Bootstrap---插件标签页
标签页：<div> <!-- Nav tabs 导航栏 --> <ul class="nav nav-tabs/nav-pills" role="tablist"> <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab"/data-toggle="pill">...</a></li> ... </ul> <!-- Tab panes 选项卡窗格--> <div class="tab-content"> <div role="tabpanel" class="tab-pane" id="profile">...</div> ... </div></div>让选项卡有淡入淡出的成果：一些办法：一些事件：绑定插件：data-toggle="tab"/data-toggle="pill"Bootstrap---插件工具提醒
工具提醒：<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="xxxx（提醒的信息）">Tooltip on left</button> //左部提醒<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> //顶部提醒<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> //底部提醒<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> //右部提醒data的参数：一些办法：一些事件：绑定插件：data-toggle="tooltip" data-placement="xxx（方向）"Bootstrap---插件弹出框
弹出框：<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left（弹出方向）" data-content="xxx（弹出框显示的内容）"> //左侧弹出 ...</button><button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="xxx（弹出框显示的内容）"> //顶部弹出 ...</button><button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="xxx（弹出框显示的内容）"> //底部弹出 ...</button><button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="xxx（弹出框显示的内容）"> //右侧弹出 ...</button>点击弹出框并让其隐没：通过应用focus触发器能够在用户点击弹出框是让其隐没在标签（必须是a标签，不能是button标签）中增加：data-trigger="focus"，还必须蕴含role="button"和tabindex属性data参数：一些办法：一些事件：绑定插件：data-toggle="popover" data-placement="弹出方向" data-content="弹出框显示的内容"Bootstrap---插件正告框
正告框：<div class='alert alert-danger'> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> //敞开按钮 <span aria-hidden="true">×</span> </button> 内容...</div>为敞开按钮增加data-dismiss="alert"属性就能够使其主动为正告框赋予敞开性能一些办法：一些事件：Bootstrap---插件按钮
状态按钮通过增加data-loading-text="Loading..."能够为按钮设置正在加载的状态（从 v3.3.5 版本开始，此个性不再倡议应用，并且曾经在 v4 版本中删除了）<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off"> Loading state</button><script>$('#myButton').on('click', function () { var $btn = $(this).button('loading') // business logic... $btn.button('reset')})</script>单选按钮：<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> Single toggle</button>复选按钮：<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked> Checkbox 1 </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 2 </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 3 </label></div>对于预切换的按钮，必须将.active类和aria-pressed="true"属性增加到您button本人一些办法：Bootstrap---插件折叠
能够应用带有href属性的链接，或带有data-target属性的按钮在这两种状况下，data-toggle="collapse"都是必须的<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href</a><button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-target</button><div class="collapse" id="collapseExample"> //折叠局部 <div class="well"> ... </div></div>折叠过程中折叠局部的类的过渡状态：（从暗藏到显示）.collapse：暗藏内容.collapsing：在过渡期间利用.collapse.in：显示内容data参数：一些办法：一些事件：Bootstrap---插件轮播
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators 对应每一项的小圆点--> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides 轮播的每一项内容--> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src='...'> <div class="carousel-caption"> //类carousel-caption为幻灯片增加字幕 ... </div> </div> <div class="item"> <img src='...'> <div class="carousel-caption"> ... </div> </div> </div> <!-- Controls 左右两边的箭头--> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> //左箭头 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> //右箭头 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a></div> data参数：一些办法：一些事件：Bootstrap---插件附加导航
<div class="container"> <div id="myAffix"> <ul class="nav nav-pills nav-stacked" data-spy='affix'> <li class='active'><a href="#">第一</a></li> <li><a href="#">第二</a></li> <li><a href="#">第三</a></li> <li><a href="#">第四</a></li> </ul> </div></div>设置附加导航间隔顶部的间隔：data-offset-top="xxx" 设置附加导航间隔底部的间隔：data-offset-bottom="xxx"data参数：一些办法：一些事件：