一、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>