Bootstrap（2）排版（简练版）

（九）排版

①原文链接：

http://v2.bootcss.com/base-css.html

个人感觉有些标签是html自带，只不过bootstrap给其加了一些样式。

 另外，原教程的内容其实更全一些，这里是简单总结版本。

这篇是上周就写好的，但是一直没发，是因为觉得可以拓展的内容还是少了点。

 

以下只总结特殊的

 

②文字对齐：（类名）

左对齐：text-left

居中：text-center

右对齐：text-right

 

 

③强调（颜色）：（类名）

变淡：muted

黄色：text-warning

红色：text-error

蓝色：text-info

绿色：text-success

 

 

④缩略语：（标签）

abbr

缩略内容放在title属性中

<abbr title="test">to test</abbr>

类名：.initialism 加到abbr标签，让title的字体更小一些

 

 

⑤地址：（标签）

address

有一些基本的样式，但并没有什么特殊的。

 

 

⑥引用：（标签）

默认引用：blockquote

命名来源：small

来源名称：cite

 

右对齐（类名）：pull-right

 

 

⑦列表：（标签）

无序：ul

有序：ol

列表项：li

无样式列表（类名）：unstyled（只对直接子节点有效）

行内列表（类名）：inline（效果是让列表同行显示，并有间隔）；

 

 

⑧描述：（标签）

父：dl

着重/标题：dt

普通：dd

 

水平描述（类名，加到父）：dl-horizontal（效果是着重右对齐，普通左对齐，着重和描述对应的开始行在同一行）

 

 

⑨代码（标签）：

行内代码：code（类似<>尖括号需要用转义字符，左是&lt，右是&gt）；

基本代码块：pre（同样转义）；

 

把该区域设置成最大高度为350px并带有一个Y轴滚动条（类名）：pre-scrollable

 

 

⑩表格（类名）

横线分割行：.table

 

以上基础上，下同：（加在table标签）

【1】标题加黑：thead，然后是tr，具体每一格用th（而不是td）

<table class="table">
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>wang</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>total</td>
        <td>names</td>
    </tr>
    </tfoot>
</table>

 

【2】tbody内部，斑马样式，奇数行加重颜色：table-striped

 

【3】表格边框：table-bordered

 

【4】鼠标悬停样式：table-hover

 

【5】表格内部更紧凑（行高更少）：table-condensed

 

 

行属性（类名，背景颜色，加在tr标签上）：

变绿：success

红：error

黄：warning

蓝：info