bootstrap框架介绍（Bootstrap 框架详解）
一 、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 类是用于固定宽度并支持响应式布局的容器 ，两侧有留白 。
<div class="container"> ... </div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="css//bootstrap.min.css" rel="stylesheet"/> <style> .colors { background-color: black; color: aliceblue; height: 50px; margin-top: 50px; } </style> </head> <body> <div class="container colors"> OK! </div> </body> </html>觉得原样式不满意我们可以再给 div 声明一个类修改部分样式！
2.百分百宽度
.container-fluid 类是用于100%宽度 ，占据全部视口的容器 。
<div class="container-fluid"> ... </div>实际开发中 ，为了美观我们两侧需要留有一定的空白 ，所以使用更多的是固定宽度！
四 、栅格网格系统
Bootstrap 提供了一套响应式 、移动设备优先的流式栅格系统 ，随着屏幕或视口尺寸的增加 ，系统会自动分为最多12列 ，通过一系列行与列的组合来创建页面布局 ，你的内容就可以放入这些创建好的布局当中 。
网格系统的实现原理非常简单 ，仅仅是通过定义容器大小 ，平分12份（也有平分成24份和32份的 ，但12份是最常见的） ，再调整内外边距 ，最后结合媒体查询 ，就制作出了强大的响应式网格系统 。
注意网格系统必须使用到 CSS！1.列组合
在行（.row）中可以添加列（.column）才可以作为行容器（.row）的直接子元素 ，但列数之和不能超过平分的总列数 ，如果大于12则自动换到下一行 ，xs 超小屏 、sm 小屏 、md 中屏 、lg 大屏 ，一般 md 用的最多 。 具体内容应当放置在列容器之内：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4" style="background-color: black;">4</div> <div class="col-md-8" style="background-color: red;">8</div> </div> </div> </body> </html>栅格网格系统会自动将每一列的 div 都放到一行上去 ，所以不需要再设置！
2.列偏移
如果我们不希望相邻的两个列紧靠在一起 ，但又不想使用 margin 或者其它的方法 ，这个时候就可以使用列偏移（offset）功能来实现 ，使用列偏移也非常简单 ，只需要在列元素上添加类名 “col-md-offset-数字 ”（这里的数字就是要偏移的列数 ，也可以理解为距离相邻左侧列的列数） ，具有这个类名的列就会向右偏移 ，要保证列与偏移列的总数不能超过12 ，否则列就会换行显示 。
前面的列偏移的时候 ，会推动着后面的列也往后走！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <div class="row"> <div class="col-md-1" style="background-color: black;">1</div> <div class="col-md-2 col-md-offset-1" style="background-color: red;">2</div> <div class="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！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <div class="row"> <div class="col-md-1" style="background-color: rgb(211, 228, 21);">1</div> <div class="col-md-1 col-md-push-1" style="background-color: rgb(255, 89, 0);">2</div> <div class="col-md-1" style="background-color: blue;">2</div> <div class="col-md-1" style="background-color: rgb(0, 255, 106);">2</div> </div> </div> </body> </html>这里看到橙色的盒子被覆盖掉了：
偏移会挤走后面的盒子 ，而排序则会压住前面的盒子 ，左浮动压住前面的盒子 ，右浮动被后面的盒子压住！
4.列嵌套
Bootstrap 框架的网格系统还支持列的嵌套 ，我们可以在一个列中添加一个或多个行容器 ，同样在这些行容器中也可以插入多个列 。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-4" style="background-color: red;">4</div> <div class="col-md-4" style="background-color: burlywood;">4</div> <div class="col-md-4" style="background-color: blue;">4</div> </div> </div> <div class="col-md-5 col-md-offset-1"> <div class="row"> <div class="col-md-3" style="background-color: green;">3</div> <div class="col-md-4" style="background-color: black;">4</div> <div class="col-md-2" style="background-color: palevioletred;">2</div> <div class="col-md-3" style="background-color: orange;">3</div> </div> </div> </div> </div> </body> </html>5.根据分辨率自适应
这里还有一个问题 ，我们在电脑屏幕上看到的盒子可以在一行内显示 ，但是切换到手机端的时候却发现一行只能显示一个 ，全部都另起一行显示了 ，这是因为手机的分辨率较小而我们是用 md 中屏写的 。如果我们想要它在电脑端一行显示全部列 ，而在手机端可以自定义每一行的列数
，怎么做呢？
很简单 ，再添加一个类 ，用于超小屏 xs 。如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3 col-xs-6" style="background-color: red;">1</div> <div class="col-md-3 col-xs-6" style="background-color: gray;">2</div> <div class="col-md-3 col-xs-6" style="background-color: green;">3</div> <div class="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.列表
① 去点列表
<ul class="list-unstyled"> <li>无序列表一</li> <li>无序列表二</li> </ul>② 内联列表 把垂直列表换成水平列表 ，同时去掉点 ，也可以说内联列表就是为制作水平导航栏而生的 。
<ul class="list-inline"> <li>无序列表一</li> <li>无序列表二</li> </ul>3.代码
一般在个人博客上使用的较为频繁 ，用于显示代码的风格 。
① 显示单行代码
<code>this is a simple code</code>② 显示多行代码
<pre> ****** ****** ****** ****** </pre>代码会保留原本的格式 ，包括空格和换行！
③ 快捷键
使用<kbd>ctrl+s</kbd>保存④ 显示 html 代码 把小于号换成 < ，大于号换成 >
<h2>你好</h2>⑤ 多行代码滚动条
<pre class="pre-scrollable"> ****** ****** ****** ****** </pre>4.表格
在使用 Bootstrap 的表格过程中 ，只需要添加对应的类名就可以得到不同风格的表格 。
表格样式：
① .table：基础表格；
② .table-bordered：带边框的表格；
③ .table-hover：鼠标悬停高光的表格；
④ .table-condensed：紧凑型表格 ，单元格没有内距或者内距较其他表格的内距小 。tr 、th 、td 样式： 提供了5种类名 ，每种类名控制了行的不同背景颜色 。
① .active：将悬停的颜色应用在行或者单元格上；
② .success：表示成功的操作；
③ .info：表示信息变化的操作；
④ .warning：表示一个警告的操作；
⑤ .danger：表示一个危险的操作 。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/> </head> <body> <table class="table table-bordered table-hover"> <tr class="success"> <th>姓名</th> <th>科目</th> <th>成绩</th> </tr> <tr class="active"> <td>张三</td> <td>语文</td> <td>87</td> </tr> <tr class="info"> <td>李四</td> <td>语文</td> <td>91</td> </tr> <tr class="warning"> <td>王五</td> <td>语文</td> <td>96</td> </tr> <tr class="danger"> <td>李华</td> <td>语文</td> <td>82</td> </tr> </table> </body> </html>5.表单
5.1 表单控件① 输入框
<div class="row"> <div class="col-sm-3"> <input type="text" class="form-control" /> <br/> <input type="text" class="form-control input-lg" /> <br/> <input type="text" class="form-control input-sm" /> </div> </div>如果直接写 input 标签则一个输入框会自己占据一行 ，显然不合适 ，我们可以利用栅格网格系统申请一行出来 ，通过设置列数来控制输入框长度 。如图：
② 下拉列表下拉框同理 ，利用栅格网格系统控制整体宽度！
对比一下这两种下拉框 ，multiple 使得下拉框可以鼠标左键多行选择 。 <div class="row"> <div class="col-sm-3"> <select class="form-control"> <option>请选择城市</option> <option>上海</option> <option>北京</option> </select> <br/> <select class="form-control" multiple="multiple"> <option>请选择城市</option> <option>上海</option> <option>北京</option> </select> </div> </div>③ 文本域
可以通过 row 和 col 自行设置文本域的宽度和高度 ，也可通过栅格网格系统来控制 。
<textarea class="form-control"></textarea>④ 复选框
.checkbox 垂直显示！
<div class="row"> <div class="col-sm-3"> <div class="checkbox"> <label><input type="checkbox" name="hobby"/>唱歌</label> </div> <div class="checkbox"> <label><input type="checkbox" name="hobby"/>跳舞</label> </div> </div> </div>.checkbox-inline 水平显示！
<div class="row"> <div class="col-sm-3"> <label class="checkbox-inline"> <input type="checkbox" name="hobby"/>唱歌 </label> <label class="checkbox-inline"> <input type="checkbox" name="hobby"/>跳舞 </label> </div> </div>注意垂直显示和水平显示外层容器的写法是不一样的！
⑤ 单选框单选框与复选框类似 ，垂直显示 .radio ，水平显示 .radio-inline ，只需要把上面的 checkbox 都换成 radio 即可！
⑥ 按钮
（1）基础样式：btn
<button class="btn">按钮</button>（2）附加样式：btn-primary 、btn-info 、btn-success 、btn-warning 、btn-danger 、btn-link 、btn-default（也就是按钮的颜色） 。
（3）普通标签实现按钮效果 ，比如 a 标签 、span 标签以及 div 标签 。
<a href="#" class="btn btn-info">a标签按钮</a>（4）按钮大小 ，使用 .btn-lg 、btn-sm 、btn-xs 就可以获得不同尺寸的按钮 。
<button class="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 ，配合网格系统 。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/> </head> <body> <form action="#" class="form-horizontal" role="form"> <h2 class="text-center">用户信息表</h2> <!-- 文本框 --> <div class="form-group"> <label for="uname" class="control-label col-md-2">姓名</label> <div class="col-md-8"> <input type="text" id="uname" class="form-control" placeholder="请输入姓名" /> </div> </div> <!-- 密码框 --> <div class="form-group"> <label for="upwd" class="control-label col-md-2">密码</label> <div class="col-md-8"> <input type="password" id="upwd" class="form-control" placeholder="请输入密码" /> </div> </div> <!-- 复选框 --> <div class="form-group"> <label class="control-label col-md-2">爱好</label> <div class="col-md-8"> <label class="checkbox-inline"> <input type="checkbox" name="hobby" id="sing" /><label for="sing">唱歌</label> </label> <label class="checkbox-inline"> <input type="checkbox" name="hobby" id="dance" /><label for="dance">跳舞</label> </label> </div> </div> <!-- 下拉列表 --> <div class="form-group"> <label for="city" class="control-label col-md-2">城市</label> <div class="col-md-8"> <select id="city" class="form-control"> <option>请选择城市</option> <option>上海</option> <option>北京</option> </select> </div> </div> <!-- 文本域 --> <div class="form-group"> <label for="remark" class="control-label col-md-2">简介</label> <div class="col-md-8"> <textarea id="remark" class="form-control"></textarea> </div> </div> <!-- 按钮 --> <div class="form-group"> <div class="col-md-1 col-md-offset-5"> <button class="btn btn-primary">提交</button> </div> </div> </form> </body> </html>（2）内联表单 ，很少用 ，将表单的控件都在一行内显示 form-inline ，注意 label 不会显示 ，如果没有输入控件设置 label 标签 ，屏幕阅读器将无法正确识别 。
6.缩略图
缩略图在电商类的网站很常见 ，最常用的地方就是产品列表页面 ，缩略图的实现是配合网格系统一起使用 。同时还可以让缩略图配合标题 、描述内容 、按钮等 ，class=“thumbnail ” 。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link type="text/css" href="bootstrap//css//bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="thumbnail"> <img src="ldh.jpg" style="width: 240px; height: 360px;"/> <h3>刘德华</h3> <p>出生于中国香港 ，演员 。</p> <button class="btn btn-default"> <span class="glyphicon glyphicon-heart"></span> 喜欢 </button> <button class="btn btn-info"> <span class="glyphicon glyphicon-pencil"></span> 评论 </button> </div> </div> </div> </div> </body> </html>这里顺便讲一下 Bootstrap 字体图标的引入！非常简单 ，打开 Bootstrap 官网：
① 点击组件
② 复制想要的图标代码
③ 给 span 标签添加类 ，类名即上面复制过来的图标代码
<span class="glyphicon glyphicon-heart"></span>引入字体图标时 ，注意提前把 fonts 放到 bootstrap.min.css 同级文件夹下 ，否则图标无法显示！
7.面板
默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容 。
① .panel-default：默认样式；
② .panel-heading：面板头；
③ .panel-body：面板主体内容；
④ .panel-success：和前面一样控制颜色 。 <div class="panel panel-warning"> <div class="panel-heading"> 666 </div> <div class="panel-body"> 111 </div> </div>创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！