Bootstrap-全局css-排版

最新推荐文章于 2022-05-03 18:31:20 发布

原创最新推荐文章于 2022-05-03 18:31:20 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

Bootstrap 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了Bootstrap框架中标题、页面主体、文本元素、列表等组件的使用方法，包括不同级别的标题、段落样式、文本格式、对齐方式及列表类型。

一、标题

<h1> 到 <h6> 均可使用。还提供了 .h1 到 .h6 类。

<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）。

三、中心内容

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

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

四、内联文本元素

1.Marked text-高亮-<mark>

2.被删除的文本-<del>

3.带下划线的文本-<u>

4.小号文本-<small>

5.着重-<strong>

6.对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

五、列表

无序列表

<ul>
  <li>...</li>
</ul>

有序列表

<ol>
  <li>...</li>
</ol>

无样式列表

<ul class="list-unstyled">
  <li>...</li>
</ul>

内联列表-所有元素放置于同一行

<ul class="list-inline">
  <li>...</li>
</ul>

描述

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>