# Bootstrap 库模块学习
大家好，我是阿炫，是《Bootstrap 库模块》的作者，这是一份专注前端学习与面试的开源资料，内容都是整理于我在学习前端过程中的笔记。
简单介绍下《Bootstrap 库模块》，整个内容共有 2739 字 + 20 张图，目的也很简单，想通过「说人话+图解」的方式，击破大家对于「八股文」的恐惧。
# Bootstrap
# 1.主要内容
# BootStrap 模板
<!DOCTYPE html>
<html lang="en">
<head>
<!--设置当前HTML文件的字符编码-->
<!--compatible兼容的，设置浏览器的兼容模式版本（让IE使用最新的渲染引擎工作）-->
<!--声明当前网页在移动端浏览器展示的相关设置-->
<!--
viewport表示用户是否可以缩放页面
width指定视区的逻辑宽度
device-width指定视区宽度应为设备的屏幕宽度
initial-scale指令用于设置Web页面的初始化缩放比例
initial-scale-1则将显示未经缩放的Web文档
-->
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap基本的HTML模板</title>
<!--引入Bootstrap核心样式表(CSS)文件-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<!--引入html5shiv.min.js让浏览器可以识别HTML5的新标签-->
<!--引入respond.min.js让低版本浏览器可以使用CSS3的媒体查询-->
<!--[if It IE 9]>
<script src="html5shiv/html5shiv.min.js"></script>
<script src="Respond/respond.min.js"></script>
<![endif]-->
<!--自己写的CSS样式文件放head最下面-->
</head>
<body>
<div><h1>Hello,world!</h1></div>
<!-- Bootstrap的所有JS组件都是依赖jQuery的，所以必须放在前边-->
<script src="js/jquery.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。-->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!--自己写的js文件放在body最下面-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap基本的HTML模板</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div><h1>Hello,world!</h1></div>
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
# 2.安装和使用
参考 API：http://v3.bootcss.com/css/
# 3.布局容器和栅格网格系统
// 做一个页面最先要做一个布局
# 3.1.布局容器
1、.container 类用于固定宽度并支持响应式布局的容器
// 固定宽度，会有留白
<div class="container">...</div>
2、.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器
<div class="container-fluid">...</div>
# 3.2.栅格网格系统
BootStrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。栅格系统用于通过一系列的行（row）或列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分 12 份（也有平分成 24 份或 32 份，但 12 份是最常见的），再调整内外边距，最后结合媒体查询，就制作出来强大的响应式网格系统。BootStrapu 框架中的网格系统就是将容器平分成 12 份。
注意：网格系统必须使用到 CSS
container、row、**xs（xsmall phones），sm（small tablets），md（middle desktops），lg（laege desktops）**，即
超小屏（自动），小屏（750px），中屏（970px）和大屏（1170px）
数据行（.row）必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距（padding）。
在行（.row）中可以添加列（.column），只有列（column）才可以作为行容器（.row）的直接子元素，但列数之和不能超过平分的总列数，比如 12。如果大于 12，则自动换到下一行。
具体内容应当放置在列容器之内。
<div class="container">
<div class="row">
<div class="col-md-4">4列</div>
<div class="col-md-8">8列</div>
</div>
</div>
# 3.2.1.列组合
列总数不能超过 12，大于 12 则自动换到下一行，可以嵌套，达到屏幕自适应的效果
# 3.2.2.列偏移（作用类似于外边距，往右偏移）
注意：列偏移的总数不要超过 12！
col-xs/sm/md/lg-offset-xx
# 3.2.3.列排序
改变列的方向，就是改变左右浮动，如果移动到的位置有元素，会被那个元素覆盖
col-xs/sm/md/lg-push-xx
# 3.2.4.列嵌套
每一列里面又可以嵌套行，行里又可以嵌套列
# 4.常用样式
# 4.1.排版
# 4.1.1.标题
对 h1~h6 的标题效果进行覆盖**，提供对应的类名，**为非标题元素设置样式
副标题 small 标签 或 .small 类名
# 4.1.2.段落
通过.lead 来突出强调内容（其作用是增大文本字号，加粗文本，而且对行高和 margin 也做响应的处理）
< small >:小号字
< b > /< strong>:加粗
< em >/< i>:斜体
#### 4.1.3.强调
定义了一套类名，强调类名，强调类都是通过颜色来表示强调
.text-muted：提示，使用浅灰色
.text-primary：主要，使用蓝色
.text-success：成功，使用浅绿色
.text-info：通知信息，使用浅蓝色
.text-warning：警告，使用黄色
.text-danger：危险，使用褐色
#### 4.1.4.对齐
通过定义四个类名来控制文本的对齐风格
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
**.text-justify：两端对齐**
#### 4.1.5 列表
无序列表：<ul><li></li></ul>
有序列表：<ol><li></li></ol>
定义列表：<dl><dt></dt><dd></dd></dl>
**去点列表：class=“list-unstyled”**
**内敛列表：class="list-inline"**
# 4.2 代码
- 使用<code></code>来显示单行内联代码
- 使用<kbd></kbd>来标记为快捷键
- 使用<pre></pre> 来显示多行代码，包括空格和回车
- 在<pre></pre>标签中显示 html 字符串应使用字符实体：< : < >:>
- 当长度超时指定值时，可以添加滚动条（<pre class="pre-scrollable"></pre>）
# 4.3 表格
#### Bootstrap 表格附加样式：
1. .table-striped：斑马线表格
2. .table-bordered：带边框的表格
3. .table-hover ：鼠标悬停高亮的表格
4. .table-condensed :紧凑型表格，单元格没内边距或者内边距较其他表格的内边距小
# tr、th、td 样式
| 类 | 描述 |
|---|---|
| .active | 将悬停的颜色应用在行或者单元格上 |
| .success | 表示成功的操作 |
| .info | 表示信息变化的操作 |
| .warning | 表示一个警告的操作 |
| .danger | 表示一个危险的操作 |
# 4.4.表单控件
什么是表单？ 表单的主要功能是用来与用户做交流的一个网页控件，包括：文本输入框、下拉选择框、复选按钮、文本域和按钮等
# 4.4.1.文本框、下拉框与文本域
文本框
原生
<input type="text" />
BootStrap
.form-control 表单元素的样式
.input-lg .input.sm 表单控件的大小
<input type="text" class="form-control"/><!--但是会占一整行-->
<!--可行的是，-->
<div class="row">
<div class="col-md-3">
<input type="text" class="form-control"/>
</div>
</div>
下拉框 原生
<select>
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select>
.form-control 表单元素的样式来控制效果
mutiple="mutiple" 设置下拉框多选
文本域
原生
.form-control 表单元素的样式来控制效果
<textarea></textarea>
# 4.4.2 复选框
垂直显示: .checkbox
水平显示: .checkbox-inline
# 4.4.3 单选框
垂直显示: .radio
水平显示: .radio-inline
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复选框与单选框</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>
<!-- 复选框垂直显示 -->
<div class="row">
<div class="col-md-3">
<div class="checkbox">
<label><input type="checkbox" name="hobby">唱歌</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="hobby">跳舞</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="hobby">rap</label>
</div>
</div>
</div>
<!-- 复选框水平显示 -->
<div class="row">
<div class="col-md-3">
<div class="checkbox-inline">
<label><input type="checkbox" name="hobby">唱歌</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="hobby">跳舞</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" name="hobby">rap</label>
</div>
</div>
</div>
<hr>
<br>
<!-- 单选框垂直显示-->
<div class="row">
<div class="col-md-3">
<div class="radio">
<label><input type="radio" name="sex">男</label>
</div>
<div class="radio">
<label><input type="radio" name="sex">女</label>
</div>
</div>
</div>
<!-- 单选框水平显示-->
<div class="row">
<div class="col-md-3">
<div class="radio-inline">
<label for=""><input type="radio" name="sex">男</label>
</div>
<div class="radio-inline">
<label for=""><input type="radio" name="sex">女</label>
</div>
</div>
</div>
</body>
</html>
# 4.5 按钮
基础样式.btn
其他标签添加相应的样式可以设置为按钮(a、span、div)
按钮大小
大按钮：.btn-lg
正常按钮：.btn-sm
小按钮: .btn-xs
按钮禁用
1.通过 disabled 属性（真正的禁用元素）
2.通过 disabled 样式 (样式上禁用)
# 4.6 表单布局
水平表单：
设置样式 ： .form-horizontal
内联表单：
设置样式：.form-inline
# 4.7 缩略图
# 4.8 面板
默认的.panel 组件所做的知识设置基本的边框和内边距来包含内容
.panel-default 默认样式
.panel-heading 面板头
.panel-body 面板主题内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-warning" style="background-color: yellow;">
<div class="page-header">
<h2 class="text-center" > 明星合集</h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-6 col-md-3 col-xs-1">
<div class="thumbnail">
<img src="./img/baby.jpeg" style="width: 240px; height:360px">
<div class="caption text-center">
<h3>Anglelababy</h3>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-heart">喜欢</span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil">评论</span>
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-xs-1">
<div class="thumbnail">
<img src="./img/yangmi.jpeg" style="width: 240px; height:360px">
<div class="caption text-center">
<h3>杨幂</h3>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-heart">喜欢</span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil">评论</span>
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-xs-1">
<div class="thumbnail">
<img src="./img/jingtian.jpeg" style="width: 240px; height:360px">
<div class="caption text-center">
<h3>景甜</h3>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-heart">喜欢</span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil">评论</span>
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-xs-1">
<div class="thumbnail">
<img src="./img/yangyan.jpeg" style="width: 240px; height:360px">
<div class="caption text-center">
<h3>唐嫣</h3>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-heart">喜欢</span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil">评论</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
# 4.9 下拉框
(opens new window) 
(opens new window)
# 模态框
您可以切换模态框（Modal）插件的隐藏内容：
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
通过 JavaScript
：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：
$('#identifier').modal(options)
# 方法
下面是一些可与 modal() 一起使用的有用的方法。
| 方法 | 描述 | 实例 |
|---|---|---|
| Options: .modal(options) | 把内容作为模态框激活。接受一个可选的选项对象。 | $('#identifier').modal({ keyboard: false }) |
| Toggle: .modal('toggle') | 手动切换模态框。 | $('#identifier').modal('toggle') |
| Show: .modal('show') | 手动打开模态框。 | $('#identifier').modal('show') |
| Hide: .modal('hide') | 手动隐藏模态框。 | $('#identifier').modal('hide') |
# 实例
一个静态的模态窗口实例，如下面的实例所示：
# 实例
<h2>创建模态框（Modal）</h2> <!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>