Bootstrap 文字/排版
-
默认设置
Bootstrap 使用默认的字体大小为 16px,其行高为 1.5。默认字体系列为 “Helvetica Neue”,Helvetica,Arial,sans-serif。此外,所有 <p> 元素的 margin-top:0 和 margin-bottom:1rem(默认为16px)。
-
<h1> - <h6>
Bootstrap 设置 HTML 标题(<h1> 至 <h6>)的样式,其字体粗细和字体大小增大:h1 Bootstrap 标题 (2.5rem = 40px)h2 Bootstrap 标题 (2rem = 32px)h3 Bootstrap 标题 (1.75rem = 28px)h4 Bootstrap 标题 (1.5rem = 24px)h5 Bootstrap 标题 (1.25rem = 20px)h6 Bootstrap 标题 (1rem = 16px) -
显示标题
显示标题比普通标题(较大的字体大小和较轻的字体粗细)更引人注目,并且有四种类别可供选择:.display-1,.display-2,.display-3,.display-4:Display 1
Display 2
Display 3
Display 4
-
HTML 标签元素
<small>
在 Bootstrap 中,HTML <small> 元素用于在任何标题中创建较浅的辅助文本:h1 标题 small次要文字h2 标题 small次要文字h3 标题 small次要文字h4 标题 small次要文字h5 标题 small次要文字h6 标题 small次要文字<mark>
在 Bootstrap 将使用黄色背景色和一些填充来设置 HTML <mark>元素的样式:使用mark元素突出显示文本。<abbr>
在 Bootstrap 将用虚线边框底部的样式设置 HTML <abbr>元素的样式:蝴蝶教程 域名为www.jc2182.com<blockquote>
当引用另一个来源的内容块时,将.blockquote 类添加到 <blockquote> 中:
尝试一下<div class="container"> <h1>块引用</h1> <p>blockquote元素用于呈现其他来源的内容:</p> <blockquote class="blockquote"> <p>50年来,世界自然基金会一直在保护自然的未来。 世界自然基金会(WWF)是世界领先的自然保护组织,在100个国家/地区开展工作,得到了美国120万会员和全球近500万会员的支持。</p> <footer class="blockquote-footer">来自世界自然基金会的网站</footer> </blockquote> </div>
<dl>
Bootstrap 将通过以下方式设置 HTML <dl> 元素的样式:
尝试一下<div class="container"> <h1>描述列表</h1> <p>dl元素表示描述列表:</p> <dl> <dt>咖啡</dt> <dd>-黑热饮</dd> <dt>牛奶</dt> <dd>-白冷饮</dd> </dl> </div>
<code>
Bootstrap 将通过以下方式设置 HTML <code> 元素的样式:
尝试一下<div class="container"> <h1>代码段</h1> <p>内联代码片段应嵌入到code元素中:</p> <div>以下HTML元素:<code>span</code>,<code>section</code> 和 <code>div</code> 定义了文档中的一个部分</div> </div>
<kbd>
Bootstrap 将通过以下方式设置 HTML <kbd> 元素的样式:使用ctrl + p 打开“打印”对话框。<pre>
Bootstrap 将通过以下方式设置 HTML <pre> 元素的样式:
尝试一下<div class="ontainer"> <h1>多行代码</h1> <p>对于多行代码,请使用pre元素:</p> <pre> 前置元素中的文字 以固定宽度显示 字体,并保留 空格和 换行符。 </pre> </div>
-
更多文字样式类
可以添加以下 Bootstrap 类来进一步设置 HTML 元素样式:类名 描述 .font-weight-bold 加粗文本。尝试一下 .font-weight-bolder 粗体文本。尝试一下 .font-italic 斜体文本。尝试一下 .font-weight-light 轻量文本。尝试一下 .font-weight-lighter 较轻的文本。尝试一下 .font-weight-normal 普通文本。尝试一下 .lead 使段落突出。尝试一下 .small 表示较小的文本(设置为父级大小的80%)。尝试一下 .text-left 表示左对齐的文本。尝试一下 .text-*-left 指示在小,中,大或超大屏幕上的左对齐文本。尝试一下 .text-break 防止长文本破坏布局。尝试一下 .text-center 表示居中对齐的文本。尝试一下 .text-*-center 表示在小,中,大或超大屏幕上居中对齐的文本。尝试一下 .text-decoration-none 从链接中删除下划线。尝试一下 .text-right 表示右对齐的文本。尝试一下 .text-*-right 表示在小,中,大或超大屏幕上的右对齐文本。尝试一下 .text-justify 表示对齐的文本。尝试一下 .text-monospace 等宽文本。尝试一下 .text-nowrap 表示没有自动换行。尝试一下 .text-lowercase 表示小写文本。尝试一下 .text-reset 重置文本或链接的颜色(继承其父级的颜色)。尝试一下 .text-uppercase 表示大写的文本。尝试一下 .text-capitalize 表示大写文本。尝试一下 .initialism 以较小的字体大小显示<abbr>元素内的文本。尝试一下 .list-unstyled 删除列表项的默认列表样式和左边界(在<ul>和<ol>上均可)此类仅适用于直接子级列表项。尝试一下 .list-inline 将所有列表项放在一行上(与每个<li>元素上的.list-inline-item一起使用) 尝试一下 .pre-scrollable 使<pre>元素可滚动。 尝试一下 有关 Bootstrap 中可用的所有 CSS 类的完整参考,请访问我们的 Bootstrap 所有类参考。