文章目录
一、Bootstrap 简介
框架顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。而插件一般是为了解决某个问题专门存在的，其功能单一，并且比较小。
前端常用的框架有 Bootstrap、Vue、Angular、React 等，既能开发 PC 端，也能开发移动端。
Bootstrap 是目前最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB项目等，它简单灵活，使得 Web 开发更加快速、简单。
二、安装及使用
Bootstrap 中文网站：
www.bootcss.com
① 我们下载第二个，Bootstrap 源码
② 在项目中创建一个名为 bootstrap 的文件夹
后面用于放 bootstrap 相关文件。
③ 下载完成后进行拷贝
拷贝 dist 文件夹中的 css 和 js，粘贴到我们刚刚创建好的 bootstrap 文件夹中，接着再拷贝 dist 文件夹下的 fonts，粘贴到 bootstrap//css 文件夹下，与 bootstrap.min.css 同级。
④ 创建一个 jquery.js 文件
把它放到我们的项目文件夹 js 下。
⑤ 官网查找 jquery 代码
官网地址：
http://jquery.com/
点击 download：
选择第二行点击打开：
我们可以看到代码行：
⑥ 复制以上所有代码
并粘贴到前面我们已经创建好的 jquery.js 文件内。
⑦ 外链引入文件
bootstrap.min.css 正常引入，但是 bootstrap.min.js 文件是依赖于 jquery 的，所以 jquery.js 必须在 bootstrap.min.js 之前引入。
三、布局容器
1.固定宽度
.container 类是用于固定宽度并支持响应式布局的容器，两侧有留白。
<divclass="container">
...
</div>
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linkhref="css//bootstrap.min.css"rel="stylesheet"/><style>.colors{background-color: black;color: aliceblue;height: 50px;margin-top: 50px;}</style></head><body><divclass="container colors">
OK!
</div></body></html>
觉得原样式不满意我们可以再给 div 声明一个类修改部分样式！
2.百分百宽度
.container-fluid 类是用于100%宽度，占据全部视口的容器。
<divclass="container-fluid">
...
</div>
实际开发中，为了美观我们两侧需要留有一定的空白，所以使用更多的是固定宽度！
四、栅格网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列，通过一系列行与列的组合来创建页面布局，你的内容就可以放入这些创建好的布局当中。
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份和32份的，但12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。
注意网格系统必须使用到 CSS！
1.列组合
在行（.row）中可以添加列（.column）才可以作为行容器（.row）的直接子元素，但列数之和不能超过平分的总列数，如果大于12则自动换到下一行，xs 超小屏、sm 小屏、md 中屏、lg 大屏，一般 md 用的最多。 具体内容应当放置在列容器之内：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linktype="text/css"href="css//bootstrap.min.css"rel="stylesheet"/></head><body><divclass="container"><divclass="row"><divclass="col-md-4"style="background-color: black;">4</div><divclass="col-md-8"style="background-color: red;">8</div></div></div></body></html>
栅格网格系统会自动将每一列的 div 都放到一行上去，所以不需要再设置！
2.列偏移
如果我们不希望相邻的两个列紧靠在一起，但又不想使用 margin 或者其它的方法，这个时候就可以使用列偏移（offset）功能来实现，使用列偏移也非常简单，只需要在列元素上添加类名 “col-md-offset-数字”（这里的数字就是要偏移的列数，也可以理解为距离相邻左侧列的列数），具有这个类名的列就会向右偏移，要保证列与偏移列的总数不能超过12，否则列就会换行显示。
前面的列偏移的时候，会推动着后面的列也往后走！
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linktype="text/css"href="css//bootstrap.min.css"rel="stylesheet"/></head><body><divclass="container"><divclass="row"><divclass="col-md-1"style="background-color: black;">1</div><divclass="col-md-2 col-md-offset-1"style="background-color: red;">2</div><divclass="col-md-2 col-md-offset-2"style="background-color: blue;">2</div></div></div></body></html>
3.列排序
列排序就是改变列的方向，即左右浮动，并且可以设置浮动的距离。通过添加类名，col-md-push-数字、col-md-pull-数字，数字就是要浮动的列数。
左浮动 pull，右浮动 push！
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linktype="text/css"href="css//bootstrap.min.css"rel="stylesheet"/></head><body><divclass="container"><divclass="row"><divclass="col-md-1"style="background-color:rgb(211, 228, 21);">1</div><divclass="col-md-1 col-md-push-1"style="background-color:rgb(255, 89, 0);">2</div><divclass="col-md-1"style="background-color: blue;">2</div><divclass="col-md-1"style="background-color:rgb(0, 255, 106);">2</div></div></div></body></html>
这里看到橙色的盒子被覆盖掉了：
偏移会挤走后面的盒子，而排序则会压住前面的盒子，左浮动压住前面的盒子，右浮动被后面的盒子压住！
4.列嵌套
Bootstrap 框架的网格系统还支持列的嵌套，我们可以在一个列中添加一个或多个行容器，同样在这些行容器中也可以插入多个列。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linktype="text/css"href="css//bootstrap.min.css"rel="stylesheet"/></head><body><divclass="container"><divclass="row"><divclass="col-md-6"><divclass="row"><divclass="col-md-4"style="background-color: red;">4</div><divclass="col-md-4"style="background-color: burlywood;">4</div><divclass="col-md-4"style="background-color: blue;">4</div></div></div><divclass="col-md-5 col-md-offset-1"><divclass="row"><divclass="col-md-3"style="background-color: green;">3</div><divclass="col-md-4"style="background-color: black;">4</div><divclass="col-md-2"style="background-color: palevioletred;">2</div><divclass="col-md-3"style="background-color: orange;">3</div></div></div></div></div></body></html>
5.根据分辨率自适应
这里还有一个问题，我们在电脑屏幕上看到的盒子可以在一行内显示，但是切换到手机端的时候却发现一行只能显示一个，全部都另起一行显示了，这是因为手机的分辨率较小而我们是用 md 中屏写的。如果我们想要它在电脑端一行显示全部列，而在手机端可以自定义每一行的列数，怎么做呢？
很简单，再添加一个类，用于超小屏 xs。如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linktype="text/css"href="css//bootstrap.min.css"rel="stylesheet"/></head><body><divclass="container"><divclass="row"><divclass="col-md-3 col-xs-6"style="background-color: red;">1</div><divclass="col-md-3 col-xs-6"style="background-color: gray;">2</div><divclass="col-md-3 col-xs-6"style="background-color: green;">3</div><divclass="col-md-3 col-xs-6"style="background-color:rgb(57, 57, 239);">4</div></div></div></body></html>
想适应更多的屏幕可多添加几个类，xs、sm、md、lg！
五、常用样式
1.排版
① 标题
Bootstrap 和普通 HTML 页面一样，定义标题都是使用标签
<h1> ~ <h6>
，只不过 Bootstrap 覆盖了其默认的样式，为了让非标题元素和标题使用相同的样式，还特意定义了
.h1 ~ .h6
六个类名，同时后面还可以跟着一行小的副标题
<small></small>
或
.small
。
② 段落
段落是排版中的另一个重要元素之一，通过
.lead
来突出强调内容（效果就是增大文本字号，加粗文本，而且对行高和 margin 也做了相应的处理）。
③ 强调
定义了一套类名，这里称其为强调类名，这些类其实都是颜色类，通过给文字添加不同的颜色以表达强调效果，具体说明如下：
① .text-muted，提示效果，使用浅灰色（#999）；
② .text-primary，主要效果，使用蓝色（#428bca）；
③ .text-success，成功效果，使用浅绿色（#3c763d）；
④ .text-info，通知信息效果，使用浅蓝色（#31708f）；
⑤ .text-warning，警告效果，使用黄色（#8a6d3b）；
⑥ .text-danger，危险效果，使用褐色（#a94442）。
④ 对齐效果
这里 Bootstrap 也是提供了一些相关的类，供我们实现文本的各种对齐效果。我们可以像以前一样在 CSS 中 写 text-align 来设置，也可以通过 Bootstrap 里的这四个类名来控制文本的对齐风格。左对齐 .text-left、右对齐 .text-right、居中对齐 .text-center、两端对齐 .text-justify。
2.列表
① 去点列表
<ulclass="list-unstyled"><li>无序列表一</li><li>无序列表二</li></ul>
② 内联列表
把垂直列表换成水平列表，同时去掉点，也可以说内联列表就是为制作水平导航栏而生的。
<ulclass="list-inline"><li>无序列表一</li><li>无序列表二</li></ul>
3.代码
一般在个人博客上使用的较为频繁，用于显示代码的风格。
① 显示单行代码
<code>this is a simple code</code>
② 显示多行代码
<pre>
******
******
******
******
</pre>
代码会保留原本的格式，包括空格和换行！
③ 快捷键
使用<kbd>ctrl+s</kbd>保存
④ 显示 html 代码
把小于号换成
<
，大于号换成
>
<h2>你好</h2>
⑤ 多行代码滚动条
<preclass="pre-scrollable">
******
******
******
******
</pre>
4.表格
在使用 Bootstrap 的表格过程中，只需要添加对应的类名就可以得到不同风格的表格。
表格样式：
① .table：基础表格；
② .table-bordered：带边框的表格；
③ .table-hover：鼠标悬停高光的表格；
④ .table-condensed：紧凑型表格，单元格没有内距或者内距较其他表格的内距小。
tr、th、td 样式：
提供了5种类名，每种类名控制了行的不同背景颜色。
① .active：将悬停的颜色应用在行或者单元格上；
② .success：表示成功的操作；
③ .info：表示信息变化的操作；
④ .warning：表示一个警告的操作；
⑤ .danger：表示一个危险的操作。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linktype="text/css"href="css//bootstrap.min.css"rel="stylesheet"/></head><body><tableclass="table table-bordered table-hover"><trclass="success"><th>姓名</th><th>科目</th><th>成绩</th></tr><trclass="active"><td>张三</td><td>语文</td><td>87</td></tr><trclass="info"><td>李四</td><td>语文</td><td>91</td></tr><trclass="warning"><td>王五</td><td>语文</td><td>96</td></tr><trclass="danger"><td>李华</td><td>语文</td><td>82</td></tr></table></body></html>
5.表单
5.1 表单控件
① 输入框
<divclass="row"><divclass="col-sm-3"><inputtype="text"class="form-control"/><br/><inputtype="text"class="form-control input-lg"/><br/><inputtype="text"class="form-control input-sm"/></div></div>
如果直接写 input 标签则一个输入框会自己占据一行，显然不合适，我们可以利用栅格网格系统申请一行出来，通过设置列数来控制输入框长度。如图：
② 下拉列表
下拉框同理，利用栅格网格系统控制整体宽度！
对比一下这两种下拉框，multiple 使得下拉框可以鼠标左键多行选择。
<divclass="row"><divclass="col-sm-3"><selectclass="form-control"><option>请选择城市</option><option>上海</option><option>北京</option></select><br/><selectclass="form-control"multiple="multiple"><option>请选择城市</option><option>上海</option><option>北京</option></select></div></div>
③ 文本域
可以通过 row 和 col 自行设置文本域的宽度和高度，也可通过栅格网格系统来控制。
<textareaclass="form-control"></textarea>
④ 复选框
.checkbox 垂直显示！
<divclass="row"><divclass="col-sm-3"><divclass="checkbox"><label><inputtype="checkbox"name="hobby"/>唱歌</label></div><divclass="checkbox"><label><inputtype="checkbox"name="hobby"/>跳舞</label></div></div></div>
.checkbox-inline 水平显示！
<divclass="row"><divclass="col-sm-3"><labelclass="checkbox-inline"><inputtype="checkbox"name="hobby"/>唱歌
</label><labelclass="checkbox-inline"><inputtype="checkbox"name="hobby"/>跳舞
</label></div></div>
注意垂直显示和水平显示外层容器的写法是不一样的！
⑤ 单选框
单选框与复选框类似，垂直显示 .radio，水平显示 .radio-inline，只需要把上面的 checkbox 都换成 radio 即可！
⑥ 按钮
（1）基础样式：btn
<buttonclass="btn">按钮</button>
（2）附加样式：btn-primary、btn-info、btn-success、btn-warning、btn-danger、btn-link、btn-default（也就是按钮的颜色）。
（3）普通标签实现按钮效果，比如 a 标签、span 标签以及 div 标签。
<ahref="#"class="btn btn-info">a标签按钮</a>
（4）按钮大小，使用 .btn-lg、btn-sm、btn-xs 就可以获得不同尺寸的按钮。
<buttonclass="btn btn-xs">超小按钮</button>
（5）按钮禁用有两种方法，老方法在标签中添加 disabled 属性，Bootstrap 方法在元素标签中添加类名 disabled。
注意第二种方法在 class 中添加 disabled 只是样式上禁用了，其实按钮还能用，所以并不是真正意义上的禁用！
5.2 表单布局
创建基本表单的步骤：
① 向父元素 form 标签添加 role=“form”；
② 把每一个标签和控件都放在一个 div 中，并添加类 class=“form-group”，这是获取最佳间距所必须的；
③ 向所有文本元素 input、textarea 和 select 添加类 class=“form-control”。
（1）水平表单，同一行显示，form 添加类 form-horizontal，配合网格系统。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linktype="text/css"href="css//bootstrap.min.css"rel="stylesheet"/></head><body><formaction="#"class="form-horizontal"role="form"><h2class="text-center">用户信息表</h2><!-- 文本框 --><divclass="form-group"><labelfor="uname"class="control-label col-md-2">姓名</label><divclass="col-md-8"><inputtype="text"id="uname"class="form-control"placeholder="请输入姓名"/></div></div><!-- 密码框 --><divclass="form-group"><labelfor="upwd"class="control-label col-md-2">密码</label><divclass="col-md-8"><inputtype="password"id="upwd"class="form-control"placeholder="请输入密码"/></div></div><!-- 复选框 --><divclass="form-group"><labelclass="control-label col-md-2">爱好</label><divclass="col-md-8"><labelclass="checkbox-inline"><inputtype="checkbox"name="hobby"id="sing"/><labelfor="sing">唱歌</label></label><labelclass="checkbox-inline"><inputtype="checkbox"name="hobby"id="dance"/><labelfor="dance">跳舞</label></label></div></div><!-- 下拉列表 --><divclass="form-group"><labelfor="city"class="control-label col-md-2">城市</label><divclass="col-md-8"><selectid="city"class="form-control"><option>请选择城市</option><option>上海</option><option>北京</option></select></div></div><!-- 文本域 --><divclass="form-group"><labelfor="remark"class="control-label col-md-2">简介</label><divclass="col-md-8"><textareaid="remark"class="form-control"></textarea></div></div><!-- 按钮 --><divclass="form-group"><divclass="col-md-1 col-md-offset-5"><buttonclass="btn btn-primary">提交</button></div></div></form></body></html>
（2）内联表单，很少用，将表单的控件都在一行内显示 form-inline，注意 label 不会显示，如果没有输入控件设置 label 标签，屏幕阅读器将无法正确识别。
6.缩略图
缩略图在电商类的网站很常见，最常用的地方就是产品列表页面，缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题、描述内容、按钮等，class=“thumbnail”。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linktype="text/css"href="bootstrap//css//bootstrap.min.css"rel="stylesheet"/></head><body><divclass="container"><divclass="row"><divclass="col-md-3"><divclass="thumbnail"><imgsrc="ldh.jpg"style="width: 240px;height: 360px;"/><h3>刘德华</h3><p>出生于中国香港，演员。</p><buttonclass="btn btn-default"><spanclass="glyphicon glyphicon-heart"></span> 喜欢
</button><buttonclass="btn btn-info"><spanclass="glyphicon glyphicon-pencil"></span> 评论
</button></div></div></div></div></body></html>
这里顺便讲一下 Bootstrap 字体图标的引入！非常简单，打开 Bootstrap 官网：
① 点击组件
② 复制想要的图标代码
③ 给 span 标签添加类，类名即上面复制过来的图标代码
<spanclass="glyphicon glyphicon-heart"></span>
引入字体图标时，注意提前把 fonts 放到 bootstrap.min.css 同级文件夹下，否则图标无法显示！
7.面板
默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。
① .panel-default：默认样式；
② .panel-heading：面板头；
③ .panel-body：面板主体内容；
④ .panel-success：和前面一样控制颜色。
<divclass="panel panel-warning"><divclass="panel-heading">
666
</div><divclass="panel-body">
111
</div></div>
版权归原作者 栈老师不回家 所有， 如有侵权，请联系我们删除。