bootstrap3.0教程之排版详细使用教程(标题、页面主体、强调、缩略

2020-04-27 07:53:15易采站长站整理

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

1.标题

2.页面主体

3.强调

4.缩略语

5.地址

6.引用

7.列表

8.总结

标题

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

复制代码
<div class=”container”>
<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
元素,可以用来标记副标题。

复制代码
<div class=”container”>
<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)。

复制代码
<h1 class=”page-header”>页面主体</h1>
<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.