一、bootstrap
1.1 bootstrap是什么
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使 Web 开发更加快捷。
它对HTML、CSS和JAVASCRIPT进行了封装，使它们使用起来更方便。我们只需要使用它已经设定好的类，或规则，即可快速应用它提供的功能。
Bootstrap 使用了一些 HTML5 元素和 CSS3 属性(如媒体查询)。为了让这些正常工作，需要使用 HTML5 文档类型。如果在
Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype），可能会面临一些浏览器显示不一致的问题。
1.2 怎么使用bootstrap
1.下载
http://www.bootcss.com/ 点击bootstrap3中文文档，点击下载bootstrap3
2.下载“用于生产环境的”
下载完后它有三个文件夹css,fonts,js
3.在html文档中引入bootstrap
a) bootstrap.min.css
b) bootstrap.min.js
c) jquery
引入css中的“bootstrap.min.css”（压缩版）和js文件夹下的bootstrap.min.js。由于bootstrap是基于jquery的，所以在引入”bootstrap.min.js”前，要先引入jquery。并且js和jquery要放在body的最底部。
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
-
使用html5的文档类型声明
<!doctype html>，bootstrap用到了h5，所以它包含一个html5版本的DOCTYPE -
添加适用于移动端的meta标签
因为现在越来越多的用户使用移动设备,为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签
1.3 栅格系统
不同设备参数说明：
container左右也有15px的padding，加了row就去掉了 -
行必须放置在 .container class 内（固定宽度/版心），以便获得bootstrap设置的对齐（alignment）和内边距（padding）
-
-
使用.row来创建一行，每行又分为多个列。
-
内容应该放置在列内，且唯有列可以是行的直接子元素。row>col 正确写法 行>列
-
预定义的网格类，比如 .row 和 .col-md-4，可用于快速创建网格布局。
栅格系统抽象模板：
<div class="container">
<p>12份刚好</p>
<div class="row">
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
<div class="col-md4">4</div>
</div>
<p>小于12份，会留空白</p>
<div class="row">
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
<div class="col-md-3">3</div>
</div>
<p>大于12份，另起一行</p>
<div class="row">
<div class="col-md-4">4</div>
<div class="col-md-6">6</div>
<div class="col-md-3">3</div>
</div>
</div>
注意：如果孩子小于12份则会留空白，占不满container盒子
如果孩子的份数大于12分时，则会另起一行
通过缩放浏览器窗口大小，内容布局随窗口大小而更改，以前是通过媒体查询，现在我们可以通过添加类名的方式来完成这种响应式布局。
举例：
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子</div>
</div>
列嵌套：
我们列嵌套最好加一行row，这样能个取消父元素的padding值，而且与父元素同高
<!-- 嵌套 -->
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
</div>
</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
</div>
</div>
列偏移
举例：
<!-- 列偏移 -->
<div class="container">
<div class="row">
<div class="col-md-4">左边</div>
<!-- 偏移份数等于：12 - 所有盒子占的份数 -->
<div class="col-md-4 col-md-offset-4">右边</div>
</div>
结果：
注：如果只有一个盒子，偏移份数为剩余份数的一半。
列排序：
<!-- 列排序 -->
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-4">左边</div>
<div class="col-md-4 col-md-pull-4">右边</div>
</div>
响应式工具：
1.4排版
使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素，实际上它是把大部分在HTML的基本标签加了样式。所以这部分相对比较简单。
【标题】
h1-h6重新定义样式
【对齐类】
简单方便将文字对齐的类，它们一般应用在p标签上（用在div上不符合规范，用在span标签则不能生效）。
1. <!-- 对齐类，加在p标签 -->
2. <p class="text-left">我是居左</p>
3. <p class="text-center">我是居中</p>
4. <p class="text-right">我是居右</p>
【强调类】
这些强调类，通过颜色来表示强调。一般是给P元素加这些类名，会显示不同的颜色。
1. <!-- 强调类 -->
2. <p class="text-muted">我是muted</p>
3. <p class="text-warning">我是warning</p>
4. <p class="text-info">info</p>
5. <p class="text-danger">danger</p>
6. <p class="text-success">success</p>
1.5 表格
⦁ 默认样式
.table
⦁ 可选样式
.table-striped 为表格提供了斑马线的样式
.table-bordered 为表格增加边框(border)
.table-hover 为表格中的每一行赋予鼠标悬停样式。鼠标划过后会添加一个背景色。
.table-condensed 每个单元格的内补(padding)减半，可使表格更紧凑。
⦁ 状态类通过这些状态类可以为行或单元格设置颜色。
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
1. <table class="table table-bordered">
2. <tr class="active">
3. <td>1</td>
4. <td>1</td>
5. <td>1</td>
6. <td>1</td>
7. <td>1</td>
8. </tr>
9. <tr>
10. <td class="danger">1</td>
11. <td class="info">1</td>
12. <td class="success">1</td>
13. <td class="warning">1</td>
14. <td>1</td>
15. </tr>
16. <tr>
17. <td>1</td>
18. <td>1</td>
19. <td>1</td>
20. <td>1</td>
21. <td>1</td>
22. </tr>
23. <tr>
24. <td>1</td>
25. <td>1</td>
26. <td>1</td>
27. <td>1</td>
28. <td>1</td>
29. </tr>
30. <tr>
31. <td>1</td>
32. <td>1</td>
33. <td>1</td>
34. <td>1</td>
35. <td>1</td>
36. </tr>
37. <tr>
38. <td>1</td>
39. <td>1</td>
40. <td>1</td>
41. <td>1</td>
42. <td>1</td>
43. </tr>
44. <tr>
45. <td>1</td>
46. <td>1</td>
47. <td>1</td>
48. <td>1</td>
49. <td>1</td>
50. </tr>
51. </table>
1.5 按钮
下面讲bootstrap中可作为按钮使用的标签或元素。为 、 或 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
<a class="btn" href="#" role="button">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">
尽可能使用 元素来获得在各个浏览器上获得相同的显示效果
预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>
按钮的尺寸
当你需要让按钮具有不同尺寸的时候，同样是使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
1.6字体图标
所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。
不要和其他组件混合使用（应该创建一个嵌套的 标签，并将图标类应用到这个 标签上）
只对内容为空的元素起作用（图标类只能应用在不包含任何文本内容或子元素的元素上）
实例：图标字体
1. <button type="button" class="btn btn-default">
2. <span class="glyphicon glyphicon-align-left"></span>
3. </button>
1.7 导航
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
标签页实例
注意 .nav-tabs 类依赖 .nav 基类
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
