其他分享
首页 > 其他分享> > Bootstrap排版之超大标题

Bootstrap排版之超大标题

作者：互联网

原文链接：https://www.mk2048.com/blog/blog.php?id=jckhj21ab&title=Bootstrap%E6%8E%92%E7%89%88%E4%B9%8B%E8%B6%85%E5%A4%A7%E6%A0%87%E9%A2%98  

排版

标题

HTML 中的所有标题标签，

<h1>
 到 
<h6>
 均可使用。另外，还提供了 
.h1
 到 
.h6
 类，为的是给内联（inline）属性的文本赋予标题的样式。

h1. Bootstrap heading

Semibold 36px

h2. Bootstrap heading

Semibold 30px

h3. Bootstrap heading

Semibold 24px

h4. Bootstrap heading

Semibold 18px
h5. Bootstrap heading
Semibold 14px
h6. Bootstrap heading
Semibold 12px
复制
<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>

在标题内还可以包含 

<small>
 标签或赋予 
.small
 类的元素，可以用来标记副标题。

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
复制
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

页面主体

Bootstrap 将全局 

font-size
 设置为 14px，
line-height
 设置为 1.428。这些属性直接赋予 
<body>
 元素和所有段落元素。另外，
<p>
 （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

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>...</p>

中心内容

通过添加 

.lead
 类可以让段落突出显示。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

复制
<p class="lead">...</p>


标签：non,text,超大,Bootstrap,headingSemibold,排版,heading,Secondary
来源： https://blog.csdn.net/setsunadoudou/article/details/101080406