简介
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参数：一些办法：
一些事件：
发表回复