bootstrap:(一)排版

（一）排版

1.小副标题

<small></small>;//行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
　　　　　　　　//由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；　

2.全局文本样式

　　字号为14px(font-size)。

　　行高为1.42857143（line-height），大约是20px(一串的小数是通过LESS编译器计算出来的，当然Sass也有这样的功能)。

　　颜色为深灰色（#333）；

　　字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family）；

　　在实际项目中，我们可以根据自己的需求进行重置

3.强调内容：给需要强调的元素加类名".lead"。

　　.lead { margin-bottom: 20px; font-size: 16px; font-weight: 200; line-height: 1.4; }

4.粗体：

　　<b>和<strong>标签让文本直接加粗

5.斜体：

    <em>或<i>标签让文本直接变为斜体

 

 

6.与强调相关的类：都是用颜色变化来表示的

.text-muted：提示，使用浅灰色（#999）

.text-primary：主要，使用蓝色（#428bca）

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

.text-info：通知信息，使用浅蓝色（#31708f）

.text-warning：警告，使用黄色（#8a6d3b）

.text-danger：危险，使用褐色（#a94442）

7.文本对齐风格（添加类名）

 　　 .text-left：左对齐

　　 .text-center：居中对齐

　　 .text-right：右对齐

 　　 .text-justify：两端对齐

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

 

8.bootstrap中六种列表形式：（Bootstrap对于列表，只是在margin上做了一些调整）

       普通列表

   有序列表

   去点列表（添加类名".list-unstyled"）

   内联列表（添加类名".list-inline"）//把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。为制作水平导航而生。

   描述列表

   水平描述列表（添加类名“.dl-horizontal”给定义列表实现水平显示效果。）

9.代码风格

　　在Bootstrap主要提供了三种代码风格：

　　1、<code>：一般是针对于单个单词或单个句子的代码
　　2、<pre>：一般是针对于多行代码（也就是成块的代码）；pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
　　3、<kbd>:一般是表示用户要通过键盘输入的内容

<div>Bootstrap的代码风格有三种：
  <code>&lt;code&gt;</code>
  <code>&lt;pre&gt;</code>
  <code>&lt;kbd&gt;</code>
</div>

<div>
<pre>
&lt;ul&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>

<div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

　　不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代。

10.表格

　　Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：

　　 .table：基础表格（给表格设置了margin-bottom:20px以及设置单元内距; 在thead底部设置了一个2px的浅灰实线;每个单元格顶部设置了一个1px的浅灰实线)

 　　 .table-striped：斑马线表格(与基础表格相比，仅是在tbody隔行有一个浅灰色的背景色)

     .table-bordered：带边框的表格

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

     .table-condensed：紧凑型表格

     .table-responsive：响应式表格

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2016-11-09