前端框架---Bootstrap

简介

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">&times;</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参数：

一些方法：

一些事件：