02-Bootstrap使用

介绍

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
bootstrap的js插件需要引入jquery.js
菜鸟教程：https://www.runoob.com/bootstrap/bootstrap-intro.html
中文官网：https://v3.bootcss.com/
现在的版本主要有3.x和4.x。我这里使用3.x。

使用

bootstrap的使用可以下载到项目中，也可以直接在线引用。

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

栅格系统

栅格（网格）系统通过一系列包含内容的行和列来创建页面布局。

<div class="container">
    <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>      
    </div>
    <div class="row">...</div>
</div>
<div class="container">

• 栅格系统主要有三个元素：容器、行和列。
• 容器可以并列存在，行必须在容器中，列必须在行中。
• 这三者本质都是div元素，只是class不同。
• 容器：div.container;行：div.row；列：col--
• 超小设备手机（col-xs-）、小型设备平板电脑（col-sm-）、中型设备台式电脑（col-md-）、大型设备台式电脑（col-mlg-）
• 不论是什么设备，一个行下的列宽之和为12

bootstrap核心可以分为三部分：
（1）全局CSS样式
（2）组件
（3）JavaScript插件

全局CSS样式

1、概览
需要h5
2、栅格系统
3、文本
4、代码

5、表格
（1）基本：table.table
（2）条纹状表格：table.table-striped
（3）边框表格：table.table-bordered
（4）鼠标悬停：table.table-hover
（5）紧缩表格：table-table-condensed
（6）行或列状态：.active、.success、.info、.warning、.danger
（7）响应式表格：div.table-responsive>table.table

6、表单
（1）基本的

• form-control类的input、textarea和select元素会被设置为宽带100%
• 一般在div.form-group中配置label标签和input标签，label标签的for属性指向input标签的id属性。
  （2）内联表单：form.form-inline
  （3）水平排列的表单：form.form-horizontal
  （4）支持的控件：包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
• 文本域：可以设置rows属性
• 单选框和多选框
• 单选和多选的内联
• 下拉列表
  （5）静态控件：为p元素添加form-control-static类
  （6）焦点状态 :focus
  （7）禁用状态
  （8）fieldset：禁用内部所有
  （9）只读状态 readonly
  （10）校验状态
  （11）额外图标
  （12）控件尺寸

7、按钮
（1）支持
为a、input和button添加类，即可
但导航和导航条组件只支持button元素
如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">

（2）预定样式
btn-default：默认
btn-primary：首选项
btn-success：成功
btn-info：一般信息
btn-warning：警告
btn-danger：危险
btn-link：链接
（3）尺寸
btn-lg：大按钮
btn-sm：小按钮
tbn-xs：超小按钮
btn-block：将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
（4）激活
active：其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。
（5）禁用
按钮：

disabled="disabled"

链接：
disabled类
8、图片
（1）响应式图片

<img src="..." class="img-responsive" alt="Responsive image">

（2）图片形状

.img-rounded
.img-circle
.img-thumbnail

组件

1、Glyphicons
使用

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<button type="button" class="btn btn-default" aria-label="Left Align">
    <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 标签，并将图标类应用到这个 标签上。
图标类只能应用在不包含任何文本内容或子元素的元素上。
2、下拉菜单
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
    </ul>
</div>

(1)弹出方式
div.dropdown向下弹出
div.dropup向上弹出
3、按钮组
4、按钮式下拉菜单
5、输入框组
6、导航
7、导航条
8、路径导航
9、分页
10、标签
11、徽章

媒体对象：默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。