bootstrap(2)

css全局样式

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

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

2. 标题样式 h1-h6

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


3. 行内文本样式

加粗
加粗
斜体
斜体,html5新标记
删除线,html5新标记
删除线


4. 文本对齐样式

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


5.列表样式

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


6. 表格样式

(1)

  • .table 表格全局样式,少量padding和水平方向的分割线
bootstrap(2)_第1张图片
Paste_Image.png
bootstrap(2)_第2张图片
Paste_Image.png
  • .table-striped 有条纹的背景色行(隔行变色)
Paste_Image.png
bootstrap(2)_第3张图片
Paste_Image.png
  • .table-bordered 带边框的条纹
Paste_Image.png
bootstrap(2)_第4张图片
Paste_Image.png
  • .table-hover 鼠标悬停效果(放上变色,离开恢复)
Paste_Image.png
bootstrap(2)_第5张图片
Paste_Image.png
  • .table-condensed 紧凑型表格(单元格内补会减半)

(2) 行或单元格背景色:

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

注意只能给或添加类样式

bootstrap(2)_第6张图片
Paste_Image.png
bootstrap(2)_第7张图片
Paste_Image.png

(3) 响应式表格

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

bootstrap(2)_第8张图片
Paste_Image.png
bootstrap(2)_第9张图片
Paste_Image.png

7. 表单样式

  • .form-group 表单组样式: 将

  • .form-control 表单元素样式 常用于