bootstrap元素排版

Bootstrap中排版元素基本上跟JavaScript差不多。首先给大家介绍的是标题元素。先看下代码：

<div class="container"><h1 class="page-header">标题</h1><h1>h1 ..........<small>二级标题</small></h1><h2>h2 ..........</h2><h3>h3 ..........</h3><h4>h4 ..........</h4><h5>h5 ..........</h5><h6>h6 ..........</h6><h1 class="page-header">页面主体</h1><div style="border:1px solid"><p class="lead" style="border:1px solid">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></div>

在网页上显示大家可以自己看看，这里就不贴图了。page-header是页面标题，在网页上现实的比较大一些。然后就是h1到h6六级标题，从大到小依次显示。而small是该级标题的二级标题，大小相当于本级标题的85%，并且有些虚化。还是把图传上来了。。。

然后就是强调格式，就是让网页上的一部分字体凸显出来。先看代码：

<h1 class="page-header">强调格式</h1><div style="border:1px solid"><p>普通字<small>small标签的字比普通字的85%</small></p><p>普通字<strong>strong标签的字比普通字加粗</strong></p><p>普通字<em>em标签的字比普通字斜体</em></p></div>

这里面，介绍都有，不多介绍了。看图：

其次，还有文本对齐方式，左对齐，右对齐，居中对齐，以及将字体变色，都可以使用固定的class来决定。

<h1 class="page-header">文本对齐</h1><div style="border:1px solid"><p class="text-left">左对齐</p><p class="text-center">居中对齐</p><p class="text-right">右对齐</p></div><h1 class="page-header">强调class</h1><p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magn</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>

我是色盲，颜色分不清，大家自求多福把，看图。

还有就是缩略图，将鼠标放到字上，就会显示出title里面的内容，如果加上class，还会进一步把title中的内容进行缩小。

<h1></h1><abbr title="attribute">把鼠标放到字上，就会显示出title里面的内容</abbr><br/><abbr title="attribute" class="initialism">.initialism会将title里面的字进一步缩小</abbr>

然后就是地址标签，说实话，我没看出来地址标签的作用，大家见仁见智把。

<address><strong>CSDN,不会code的coder</strong><br/>姓名：风云无忌<br>年龄：222<br><abbr title="Phone">P:</abbr>131 8318 3892<a href="http://my.csdn.net/">http://my.csdn.net/</a></address>

然后就是，引用标签<blockquote>，