首页 > 代码库 > Bootstrap关于排版
Bootstrap关于排版
1.Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式
2.使用了<small>标签来制作副标题,由于<small>内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%;
3.如果想让一个段落p突出显示,可以通过添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的
处理。
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:两端对齐
8.列表:
无序列表 <ul> <li>…</li> </ul>
有序列表 <ol> <li>…</li> </ol>
定义列表 <dl> <dt>…</dt> <dd>…</dd> </dl>
去点列表使用类:.list-unstyled
通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。也可以说内联列表就是为制作水平导航而生。 水平定义列表就像内联列表一样。
Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。此处添加了一个媒体查询。也就是说,只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果。
9.三种代码风格:
a、使用<code></code>来显示单行内联代码
b、使用<pre></pre>来显示多行块代码
c、使用<kbd></kbd>来显示用户输入代码
<pre>元素一般用于显示大块的代码,并保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
Bootstrap关于排版