Bootstrap学习-排版

标签：http   滚动条   ott   pad   成功   键盘   效果   语义   order   

1、标题

<h1>~<h6>，所有标题的行高都是1.1（也就是font-size的1.1倍）。

2、副标题

<small>，行高都是1，灰色（#999）

<h1>主标题

　　<small>副标题</small>

</h1>

3、Body样式

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

4、<p>，段落样式

p { margin: 0 0 10px; }

5、强调样式 .lend

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

6、粗体<b><strong>

b,strong {
  font-weight: bold; /*文本加粗*/
}

7、斜体<i><em>

<em> <strong> 一般是展现给爬虫看的（偏重语义），<i><b>是展现给用户的（偏重视觉效果）。

8、字体颜色

• .text-muted：提示，使用浅灰色（#999）
• .text-primary：主要，使用蓝色（#428bca）
• .text-success：成功，使用浅绿色(#3c763d)
• .text-info：通知信息，使用浅蓝色（#31708f）
• .text-warning：警告，使用黄色（#8a6d3b）
• .text-danger：危险，使用褐色（#a94442）

9、文字对齐方式

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

10、列表去点 .list-unstyled

.list-unstyled {
padding-left: 0;
list-style: none;
}

11、水平导航.list-inline

<ul class="list-inline">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

12、定义列表

<dl>
    <dt>主题一</dt>
    <dd>内容一</dd>
    <dt>主题二</dt>
    <dd>内容二</dd>
</dl>

水平定义列表.dl-horizontal

13、输入代码样式

（1）<code>：一般是针对于单个单词或单个句子的代码
（2）<pre>：一般是针对于多行代码（也就是成块的代码）
（3）<kbd>:一般是表示用户要通过键盘输入的内容

14、表格样式

.table：基础表格-不可缺少

.table-striped：斑马线表格

.table-bordered：带边框的表格

.table-hover：鼠标悬停高亮的表格-可以与其他表格样式叠加使用

.table-condensed：紧凑型表格

.table-responsive：响应式表格-小屏添加滚动条

表格背景颜色

Bootstrap学习-排版

标签：http   滚动条   ott   pad   成功   键盘   效果   语义   order   

原文地址：http://www.cnblogs.com/mazey/p/6129178.html