Bootstrap排版方式

通过之前对Bootstrap框架的学习,我们基本掌握了在自己项目中引入并且使用Bootstrap的方法,在接下的文章里我们着重介绍一下,如何采用Bootstrap排版出简洁优雅的文章,希望对大家有所帮助。

 

标题与段落排版

标题和段落是构成文章的基本结构体,在Bootstrap当中,通过CSS Reset重写了默认的标题段落样式,使得整体结构更为合理美观。
我们通过h1~h6的标签来确定文章标题结构,从大到小,从重到轻。引用起来非常方便,类似<h1>文章主题</h1>这样的写法即可。

另外,文章每个段落的文字我们都应该用<p>标签进行包裹,因为<p>标签设置了对应的line-height,从而使得文章间隙更加明了清晰,例如:<p>这是文章的第一段,为了保持脉络清晰,我们需要用到p标签</p><p>这是文章的第二段,为了保持脉络清晰,我们需要用到p标签</p>除此之外,如果你需要额外突出第一段文字,可以在p标签中加入lead样式来渲染,例如:<p class="lead">这是文章的第一段,为了突出文字,我们引入了lead样式</p>

 

强调与弱化

如何让文章段落显得轻重分明,条理明晰,除了标题段落之外,强调弱化也是很重要的因素。
根据HTML5的语法规则,我们采用<strong>标签来设置重要的文字,用<small>标签来设置辅助作用的文字。
除此之外,还可以采用<em>标签来使文字变成斜体。
最后一种强调方式,就是采用Bootstrap设定好的颜色来定义文本颜色。
对应的颜色样式有text-muted/text-primary/text-success/text-info/text-warning/text-danger。

 

地址的使用

如果你需要在文档中添加地址,那么用<address>标签来包裹是最好的方式了,例如:<address><strong>下沙学源街68号</strong><br>电话:0571-87810757</address>

 

引用标签

如果你要在文章中嵌入引用的文字,那么需要用到<blockquote>标签,在Bootstrap中对这个标签也做了很好的样式定义。

 

列表排版

列表在排版中经常会用到,主要分为有序列表和无序列表。
有序列表是采用<ol><li></li></ol>的嵌套形式编写,无序列表是采用<ul><li></li></ul>的嵌套形式编写。
除此之外,还能采用list-inline样式来控制列表的内联样式。

 

写在最后

Bootstrap排版的样式还是相当给力好看的,所以只要你能够合理使用它们的使用方式,肯定能够构建出一篇优雅脉络清晰,简洁优雅的文章。