Bootstrap 排版
使用Bootstrap排版特性，可以创建标题、段落、列表、以及其它的内联元素。
1、标题
Bootstrap中定义了HTML中所有的标题(h1到h6)的样式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练作品</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link type="text/css" rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<script src="Css/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
内联子标题
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练作品</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link type="text/css" rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<h1>这是标题 1.<small>这是副标题1</small></h1>
<h2>这是标题 2.<small>这是副标题2</small></h2>
<h3>这是标题 3.<small>这是副标题3</small></h3>
<h4>这是标题 4.<small>这是副标题4</small></h4>
<h5>这是标题 5.<small>这是副标题5</small></h5>
<h6>这是标题 6.<small>这是副标题6</small></h6>
<script src="Css/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
强调
HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=decive-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
</head>
<body>
<small>本行内容是在标签内的,大小为父元素的85%</small><br />
<strong>本行内容是在标签内的，强调的文本</strong><br />
<em>本行内容是在标签内的，以斜体表示文本</em><br />
<p class="text-primary">这是一个带有text-primary类的段落</p>
<p class="text-success">这是一个带有text-success类的段落</p>
<p class="text-muted">这是一个带有text-muted类的段落</p>
<p class="text-warning">这是一个带有text-warning类的段落</p>
<p class="text-danger">这是一个带有text-danger类的段落</p>
<script src="Css/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
列表
Bootstrap 支持有序列表、无序列表和定义列表。
- 有序列表：有序列表是指以数字或其他有序字符开头的列表。
- 无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class.list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
- 定义列表：在这种类型的列表中，每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语，就像字典，这是被定义的属于（或短语）。接着，<dd> 是 <dt> 的描述。您可以使用 class dl-horizontal 把 <dl> 行中的属于与描述并排显示。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练作品：列表</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h2>有序列表</h2>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
<br />
<h2>无序列表</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<br />
<h2>未定义样式列表</h2>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<br />
<h2>内联列表</h2>
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<br />
<h2>自定义列表列表</h2>
<dl>
<dt>Bootstrap</dt>
<dd>Bootstrap是目前最受欢迎的前端框架</dd>
<dt>HTML5</dt>
<dd>HTML5是下一代HTML标签语言，现在有很多主流的浏览器都进行支持，作为一个web前端开发端，必须要掌握好HTML5.</dd>
</dl>
<br />
<h2>自定义列表列表</h2>
<dl class="dl-horizontal">
<dt>Bootstrap</dt>
<dd>Bootstrap是目前最受欢迎的前端框架</dd>
<dt>HTML5</dt>
<dd>HTML5是下一代HTML标签语言，现在有很多主流的浏览器都进行支持，作为一个web前端开发端，必须要掌握好HTML5.</dd>
</dl>
</div>
<script src="Css/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
- 上一篇 »css排版之-标准文档流
- 下一篇 »中文排版CSS心得