Bootstrap每天必学之基础排版(bootstrap快速入门)

编辑：rootadmin

推荐整理分享Bootstrap每天必学之基础排版(bootstrap快速入门)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:bootstrap要学到什么程度,bootstrap基础教程,bootstrap入门,bootstrap快速入门,bootstrap快速入门,bootstrap要学到什么程度,bootstrap基础教程,bootstrap要学到什么程度,内容如对您有帮助，希望把文章链接给更多的朋友！

本次主要来了解的是排版，这个大部分在HTML的基本标签中也是存在的，所以相对比较简单，为了保证系列的完整性，也顺带复习下，还是记录一下。主要内容如下：

1.标题 2.页面主体 3.强调 4.缩略语 5.地址 6.引用 7.列表

一、标题Html中的所有标题标签，从<h1>到<h6>均可使用。另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式。

直接看效果吧

在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。

二、页面主体 Bootstrap将全局font-size设置为px，line-height为1. 。这些属性直接赋给<body>和所有段落元素。另外，<p>（段落）还被设置了等于1/2行高的底部外边距（margin）（即px）。

通过效果展示就很明显了。

Lead body copy 通过添加.lead可以让段落突出显示。

通过和上面页面主体的对比就可以看到明显的效果了。

三、强调直接使用HTML中用于标注强调的标签，并给他们赋予少许的样式。1.小号文本　　对于不需要强调的inline或block类型的文本，使用<small>标签包裹，其内的文本将被设置为父容器字体大小的%。标题元素中嵌套的<small>元素被设置不同的font-size。你还可以为行内元素赋予.small以代替任何<small>标签。

2.着重通过增加font-weight强调一段文本。

3.斜体用斜体强调一段文本。

4.对齐class通过文本对齐class，可以简单方便的将文字重新对齐。

很明显第一行左对齐，第二行居中，第三行右对齐。5.强调class　这些class通过颜色来表示强调。也可以应用于链接，当鼠标盘旋于链接上时，其颜色会变深，就像默认的链接样式。

四、缩略图　　当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。基本缩略语如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。

看到效果了，就是没办法截到图。Initialism为缩略语添加.initialism可以将其font-size设置的更小些。

还是只上代码自己看效果。　　五、地址让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式。

六、引用在你的文档中引用其他来源的内容。默认样式的引用将任何HTML裹在<blockquote>之中即可表现为引用。对于直接引用，我们建议用<p>标签。

引用选项对于标准样式的<blockquote>，可以通过几个简单的变体就能改变风格和内容。命名来源:添加<small>标签来注明引用来源。来源名称可以放在<cite>标签里面。

会多一个Source Title另一种展示风格

使用.pull-right可以让引用展现出向右侧移动、对齐的效果。

向右对齐移动了额，当然也有相应的pull-left。　　七、列表无序列表顺序无关紧要的一列元素。

这个也很明显和Html的一样。有序列表顺序至关重要的一组元素。

同理有序列表无样式列表移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。这这是针对直接子元素，也就是说，你需要对所有嵌套的列表都添加此class才能具有同样的样式。

内联列表通过设置display: inline-block;并添加少量的内补，将所有元素放置于同一列。

效果当然就是在一行了。

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程Bootstrap实战教程