![Bootstrap排版]( "Bootstrap排版")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap</title>
</head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<body class="container">
<!------------------------------------------标题------------------------------------------------------------->
<div class="container">
<h1 class="page-header">标题</h1>
<h1>h1. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h1>
<h2>h2. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h2>
<h3>h3. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h3>
<h4>h4. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h4>
<h5>h5. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h5>
<h6>h6. Bootstrap heading<small>在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。</small></h6>
</div>
<!------------------------------------------页面主体------------------------------------------------------------->
<h1 class="page-header">页面主体</h1>
<div>
<p> 普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。
普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。普通段落主体。</p>
<p class="lead">通过添加.lead可以让段落突出显示.通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示
通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示通过添加.lead可以让段落突出显示</p>
</div>
<!------------------------------------------强调------------------------------------------------------------->
<h1 class="page-header">强调</h1>
<small>1、小号文本------对于不需要强调的inline或block类型的文本，使用small标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。
你还可以为行内元素赋予.small以代替任何small标签。</small><br />
<strong>2、着重--------通过增加font-weight强调一段文本。 </strong><br />
<em>3.斜体---------用斜体强调一段文本。</em>
<p class="text-left">4.1----对齐class,左对齐</p>
<p class="text-center">4.2----对齐class,中间对齐</p>
<p class="text-right">4.3----对齐class,右对齐</p>
<!------------------------------------------强调Class------------------------------------------------------------->
<h1 class="page-header">强调Class</h1>
<p class="text-muted">这些class通过颜色来表示强调。也可以应用于链接，当鼠标盘旋于链接上时，其颜色会变深，就像默认的链接样式。</p>
<p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
<p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
<p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<!------------------------------------------缩略图------------------------------------------------------------->
<h1 class="page-header">缩略图</h1>
<p>当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。</p>
<abbr title="如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。">基本缩略语</abbr><br />
<abbr title="为缩略语添加.initialism可以将其font-size设置的更小些。" class="initialism">缩略图initialism</abbr>
<!------------------------------------------地址------------------------------------------------------------->
<h1 class="page-header">地址</h1>
<p>让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式。</p>
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Garnett</strong><br>
<a href="#">first.last@example.com</a>
</address>
<!------------------------------------------引用------------------------------------------------------------->
<h1 class="page-header">引用</h1>
<blockquote>
<p>默认样式的引用，将任何HTML裹在blockquote之中即可表现为引用。对于直接引用，我们建议用p标签。</p>
<small>引用来源<cite title="Source Title">来源名称</cite></small>
</blockquote>
<!------------------------------------------列表------------------------------------------------------------->
<h1 class="page-header">无序列表</h1>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<h1 class="page-header">有序列表</h1>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<h1 class="page-header">无样式列表</h1>
<ul class="list-unstyled">
<li>无样式列表</li>
<li>无样式列表</li>
<li>无样式列表</li>
<li>无样式列表</li>
<li>无样式列表</li>
</ul>
<h1 class="page-header">内联列表,将所有元素放置于同一列。</h1>
<ul class="list-inline">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<!------------------------------------------描述------------------------------------------------------------->
<h1 class="page-header">描述</h1>
<dl>
<dt>.Lorem ipsum dolor sit amet</dt>
<dd>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet</dd>
</dl>
<dl class="dl-horizontal">
<dt>.dl-horizontal</dt>
<dd>可以让dl内短语及其描述排在一行。</dd>
</dl>
</body>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</html>
