bootstrap Class样式学习笔记

1. 设置bootstrap响应式页面

引入bootstrap css文件
将html内容放置在 class为container-fluid的盒子中

2. 图片适应手机端

class = ‘img-responsive’

3. 文本的居中以及样式

class = ‘text-center’ // 文本居中
class = ‘text-primary | text-info | text-danger’ // 文本颜色（深蓝 | 浅蓝 | 红色）

4. bootstrap各个按钮

class = ‘btn’ // 形成按钮样式（一个灰色按钮）
class = ‘btn-block’ // 形成块级按钮（宽度铺满父元素）
class = ‘btn-primary | btn-info | btn-danger‘ // 按钮颜色（深蓝 | 浅蓝 | 红色）

5. boostrap完成栅格布局

简单来说bs布局把页面横轴分为12个栅格可以通过设置，决定元素占用几格。
class = ‘row’ // 子元素从左到右平均布局，放不下的元素会换行（类似于flex-direction = ‘row’），行容器。row不会生成边距
class = ‘col-md-x’ // 设置栅格元素占用栅格数量，md为在中型尺寸上的布局（ipad等），还可以取值为xs（小屏幕）。 ,x为设置占用栅格的数值（想对元素使用此属性时，要在元素外嵌套div，在外层div中使用此class）
栅格布局图如下：

6. 添加Font Awesome图标

第一部在html head部分linkFont Awesome的css文件
link入文件后则可以使用图标了
添加图标常用于 i 标签中，为 i 元素添加class类可转换为图标
图标类名可以在官网上查看 ：链接

7.input输入框样式

class = ‘form-control’ // 一个简洁的输入框

8. well容器

class = ‘well‘属性：它能显示一种具有视觉深度层次感的列，会有一定边距，更加方便美观。
well列中可以使用button等标签实现各种样式。

9. 通过添加空样式Class更好区别开每个类似的div

为元素添加空Class或id，可以方便js找到每个元素