首页 > 代码库 > Bootstrap学习-排版
Bootstrap学习-排版
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学习-排版