Bootstrap3.0学习第四轮：排版
|
上一篇：Bootstrap3.0学习第三轮：栅格系统案例 本文主要讨论的是排版，这个大部分在HTML的基本标签中也是存在的，所以相对比较简单，为了保证系列的完整性，也顺带复习下，还是记录一下。 主要内容如下： 标题 Html中的所有标题标签，从<h1>到<h6>均可使用。另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式。
<h1 class="page-header">标题</h1> <h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6> </div> 直接看效果吧
在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。
<h1 class="page-header">标题</h1> <h1>h1. Bootstrap heading</h1> <small>Secondary text</small> <h2>h2. Bootstrap heading</h2> <small>Secondary text</small> <h3>h3. Bootstrap heading</h3> <small>Secondary text</small> <h4>h4. Bootstrap heading</h4> <small>Secondary text</small> <h5>h5. Bootstrap heading</h5> <small>Secondary text</small> <h6>h6. Bootstrap heading</h6> <small>Secondary text</small> </div>
页面主体 Bootstrap将全局font-size设置为14px，line-height为1.428 。这些属性直接赋给<body>和所有段落元素。另外，<p>（段落）还被设置了等于1/2行高的底部外边距（margin）（即10px）。
<div style="border:1px solid "> <p 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> 通过效果展示就很明显了。
Lead body copy 通过添加.lead可以让段落突出显示。
<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> <h1></h1> 通过和上面页面主体的对比就可以看到明显的效果了。
强调 直接使用HTML中用于标注强调的标签，并给他们赋予少许的样式。 1.小号文本 对于不需要强调的inline或block类型的文本，使用<small>标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。 你还可以为行内元素赋予.small以代替任何<small>标签。 （编辑：佛山站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
<div class="container">
<div class="container">
<h1 class="page-header">页面主体</h1>
<h1 class="page-header">Lead Body Copy</h1>
