Bootstrap-全局css-排版

最新推荐文章于 2022-01-28 18:05:25 发布

良之才-小良

最新推荐文章于 2022-01-28 18:05:25 发布

阅读量128

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/lidongliangzhicai/article/details/94223654

版权

Bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、标题

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