bootstrap(2)

css全局样式

1. 布局类容器 .container 和 .container-fluid

• .container 固定宽度 并且 具有响应式。
• .container-fluid 自由宽度（100%宽度）

---

2. 标题样式 h1-h6

h1...h6样式重写了，基本上做到了兼容性。

---

3. 行内文本样式

<b> 加粗
<strong> 加粗
<i> 斜体
<em> 斜体，html5新标记
<del> 删除线，html5新标记
<s> 删除线

---

4. 文本对齐样式

.text-left 左对齐
.text-center 居中
.text-right 右对齐
.text-jutify 两端对齐

---

5.列表样式

.list-unstyled 无符号
.list-inline 行内块

---

6. 表格样式

（1）

• .table 表格全局样式，少量padding和水平方向的分割线

Paste_Image.png Paste_Image.png

• .table-striped 有条纹的背景色行（隔行变色）

Paste_Image.png Paste_Image.png

• .table-bordered 带边框的条纹

Paste_Image.png Paste_Image.png

• .table-hover 鼠标悬停效果（放上变色，离开恢复）

Paste_Image.png Paste_Image.png

• .table-condensed 紧凑型表格（单元格内补会减半）

---

（2） 行或单元格背景色：

• .active
• .success
• .info
• .warning
• .danger

注意只能给<tr>或<td>添加类样式

Paste_Image.png Paste_Image.png

（3） 响应式表格

将.table元素 包裹在 .table-responsive元素内，即可创建响应式表格。当屏幕宽小于768px时，表格会出现滚动条。大于768px时，滚动条自动消失。

Paste_Image.png Paste_Image.png

---

7. 表单样式

• .form-group 表单组样式： 将<label>和表单元素包含其中，可以获得更好的排列

• .form-control 表单元素样式 常用于 <input> <textarea>
  <select>元素

placeholder 占位 给input添加提示信息

Paste_Image.png Paste_Image.png

• .form-inline 内联表单样式 用于<form>元素：可以使元素一行排列

Paste_Image.png Paste_Image.png

• .radio-inline 可以使一组单选框水平排列

• .checkbox-inline 可以使一组复选框水平排列

• .sr-only 可以用于隐藏元素