Bootstrap学习笔记（二）

这一节笔记主要记录排版内容笔记，其内容包括标题、文本（包括段落、粗斜体、对齐）、列表、表格等。

 

一、标题

　　在bootstrap中H1-H6与非框架版的区别不大，需要注意的是<small>标签，在bootstrap中<small></small>标签中的文字设置成了灰色（#999）

 

二、文字

　　1.段落

　　　　全局文本为14px,行高大约是20px，颜色为深灰色（#333），字体是"Helvetica Neue", Helvetica, Arial, sans-serif;

　　2.强调

　　　　类名 .lead 做了加粗字号变大等强调处理

　　　　.text-muted　　　　　　　　　　　　　　提示，使用浅灰色(#999)

　　　　.text-primary　　　　　　　　　　　　　 主要，蓝色(#428bca)

　　　　.text-success　　　　　　　　　　　　　 成功，浅绿色(#3c763d)

　　　　.text-info　　　　　　　　　　　　　　   通知信息，浅蓝色(#31708f)

　　　　.text-warning　　　　　　　　　　　　   警告，使用黄色(#8a6d3b)

　　　　.text-danger　　　　　　　　　　　　　  危险，褐色(#a94442)

　　3.对齐

　　　　.text-left　　　　　　　　　　　　　　　 左对齐

　　　　.text-center　　　　　　　　　　　　　　居中对齐

　　　　.text-right　　　　　　　　　　　　　　  右对齐

　　　　.text-justify　　　　　　　　　　　　　　两端对齐

 

三、列表

　　.list-unstyled　　　　　　　　　　　　　　　 去点，去除默认列表风格样式

　　.list-liline　　　　　　　　　　　　　　　　　 内联列表，去掉符号，且水平显示

　　.dl-horizontal　　　　　　　　　　　　　　　 水平定义列表，在宽屏是<dd>内容自动与<dt>处于同一行

 

四、表格

　　.tabel　　　　　　　　　　　　　　　　　　  基础表格，表格

　　.table-striped　　　　　　　　　　　　　　  斑马线表格

　　.table-bordered　　　　　　　　　　　　　  带边框表格

　　.table-hover　　　　　　　　　　　　　　　 鼠标悬停高亮表格

　　.table-condensed　　　　　　　　　　　　  紧凑型表格

　　.table-responsive　　　　　　　　　　　　  响应式表格

　　表格行类：

　　.active　　　　　　　　　　　　　　　　　　表示当前活动的信息(#f5f5f5)

　　.success　　　　　　　　　　　　　　　　　表示成功或正确的行为(#dff0d8)

　　.info　　　　　　　　　　　　　　　　　　   表示中立的信息或行为(#d9edf7)

　　.warning　　　　　　　　　　　　　　　　  表示警告(#fcf8e3)

　　.danger　　　　　　　　　　　　　　　　　表示危险或者可能是错误的行为(#f2dede)

　　(注:以上行类除.active外，其他需要配合"table-hover"来使用)

<table class="table table-bordered  table-hover">
  <thead>
    <tr>
      <th>类名</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>.active</td>
      <td>表示当前活动的信息</td>
    </tr>
    <tr class="success">
      <td>.success</td>
      <td>表示成功或者正确的行为</td>
    </tr>
    <tr class="info">
      <td>.info</td>
      <td>表示中立的信息或行为</td>
    </tr>
    <tr class="warning">
      <td>.warning</td>
      <td>表示警告，需要特别注意</td>
    </tr>
    <tr class="danger">
      <td>.danger</td>
      <td>表示危险或者可能是错误的行为</td>
    </tr>
  </tbody>
</table>