-
排版（.page-header）
- Bootstrap 将全局
font-size设置为 14px，line-height设置为 1.428。这些属性直接赋予<body>元素和所有段落元素。另外，<p>（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。 - 代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--没有压缩的，即是没有去除空格和换行，方便学习--> <link rel="stylesheet" href="bs/css/bootstrap.css" /> <!-- 压缩版的，去除了空格和换行，文件小，省带宽 <link rel="stylesheet" href="bs/css/bootstrap.min.css" /> --> <!--要使用bootstrap的js插件，必须有jquery的支持--> <script type="text/javascript" src="js/jquery.min.js" ></script> <!--bootstrap的主包，同样bootstrap.min.js是压缩版--> <script type="text/javascript" src="bs/js/bootstrap.js" ></script> <style> </style> </head> <body> <div class="container"> <h1 class="page-header">Bootstrap前端框架</h1> </div> </body> </html>
- 效果截图
与正常h1标签相比，字的上边距加大，下面有根线
-
段落（.lead）
- 代码
<p class="lead">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
-
效果截图
与传统p标签相比，字体加黑，加粗，也即是强调
-
mark标记
- 代码
<mark>Nullam </mark>
- 效果截图
也即是字体加了背景
-
del删除线
- 代码
<del>Nullam </del>
- 效果截图
-
small小号字体
- 代码
<small>Nullam quis risus eget urna mollis </small>
- 效果截图
字体大小比周围小一号
-
文本对齐
- 代码
<p class="text-center">it sit amet non magna. </p>
- 效果截图
text-center文本居中，常用的有text-right、text-left，text-justify两端对齐，text-nowrap
-
文本大小写
- 代码
<!--全部字母小写--> <p class="text-lowercase">it sit amet non magna. </p> <!--全部字母大写--> <p class="text-uppercase">it sit amet non magna. </p> <!--首字母大写--> <p class="text-capitalize">it sit amet non magna. </p>
- 截图
-
无样式列表
- 代码
<ul class="list-unstyled"> <li>sfd</li> <li>sfd</li> <li>sfd</li> <li>sfd</li> </ul>
移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。 - 效果截图
-
内联样式
- 代码
<ul class="list-inline"> <li>...</li> </ul>
也即是通过设置display: inline-block;并添加少量的内补（padding），将所有元素放置于同一行。
-
自定义列表
- 代码
<dl>
<dt>选择题</dt>
<dd>A.Linux</dd>
<dd>B.Windows</dd>
</dl> - 效果截图
默认就改变了样式，标题加粗
-
水平排列列表
- 代码
<dl class="dl-horizontal"> <dt>选择题</dt> <dd>A.Linux</dd> <dd>B.Windows</dd> </dl>
- 效果截图
