您的位置：首页 > Web前端 > BootStrap

Bootstrap学习速查表（二）排版及表格

2016-04-26 17:12 525 查看

一、h1~h6标签

固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

1、重新设置了margin-top和margin-bottom的值，h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
2、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。

二、h1~h6标签的副标题标签

<h1>Bootstrap标题一<small>我是副标题</small></h1>

h1small,.h1small,h2small,.h2small,h3small,.h3small,h1.small,.h1.small,h2.small,.h2.small,h3.small,.h3.small{font-size:65%;}
h4,.h4,h5,.h5,h6,.h6{margin-top:10px;margin-bottom:10px;}
h4small,.h4small,h5small,.h5small,h6small,.h6small,h4.small,.h4.small,h5.small,.h5.small,h6.small,.h6.small{font-size:75%;}

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

三、body标签及p标签的初始设置

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

p{margin:0010px;}

1、行高为1.42857143（line-height），大约是20px

四、强调内容的标签

1、如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。用法如下：

2、除此之外，Bootstrap还通过元素标签:、、和<cite>给文本做突出样式处理。

3、在Bootstrap中，可以使用和标签让文本直接加粗。

4、除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签或来实现。

5、强调颜色的样式名称

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

6、文本对齐的风格

<pclass="text-left">我居左</p>
<pclass="text-center">我居中</p>
<pclass="text-right">我居右</p>
<pclass="text-justify">我两端对齐</p>

五、列表标签ul、ol、dl

1、去点列表，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

2、水平列表，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

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

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

六、插入代码风格

在Bootstrap主要提供了三种代码风格：<code>、[b]<pre>、[b]<kbd>[/b][/b]
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码

4、多行块代码块，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

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

.pre-scrollable{max-height:340px;overflow-y:scroll;}

七、表格table标签

Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。

1、Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：（table标签上）

☑.table：基础表格

☑.table-striped：斑马线表格

☑.table-bordered：带边框的表格

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

☑.table-condensed：紧凑型表格

☑.table-responsive：响应式表格

2、Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：

特别提示：除了”.active”之外，其他四个类名和”.table-hover”配合使用时，注意要实现悬浮状态，需要在<table>标签上加入

table-hover

类。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Bootstrap学习速查表（二） 排版及表格

Bootstrap学习速查表（二）排版及表格