Bootstrap 4教程-Bootstrap 4 Typography - 书目录

Bootstrap 4教程-Bootstrap 4 Typography

Bootstrap包含定义文本元素显示方式的样式。

此页面显示使用Bootstrap时如何呈现某些文本元素(通常不使用任何类)。通常,链接到Bootstrap 4样式表的任何页面都会以相同的方式呈现这些元素(除非被其他样式覆盖)。

主体

引导4的全局默认font-size的16px(适用于<html>元素)和<body>元素也具有font-size的1rem应用。

引导程序使用“原生字体堆栈”(用户的系统字体),回退到Helvetica Neue,Arial和sans-serif。

所有标题和p元素都删除了顶部边距。标题具有的底缘.5rem和p元件具有一个底部边缘1rem。

您完全可以自由地更改任何这些值以适合您自己的项目。

标题

以下是Bootstrap 4中出现的标题元素示例:

<h1>h1 (Semibold 36px)</h1>
<h2>h2 (Semibold 30px)</h2>
<h3>h3 (Semibold 24px)</h3>
<h4>h4 (Semibold 18px)</h4>
<h5>h5 (Semibold 14px)</h5>
<h6>h6 (Semibold 12px)</h6>

运行示例

标题类

Bootstrap还包含标题类.h1以.h6防止您需要以特定标题的样式呈现某些内嵌文本。

<p class="h1">.h1 (Semibold 36px)</p>
<p class="h2">.h2 (Semibold 30px)</p>
<p class="h3">.h3 (Semibold 24px)</p>
<p class="h4">.h4 (Semibold 18px)</p>
<p class="h5">.h5 (Semibold 14px)</p>
<p class="h6">.h6 (Semibold 12px)</p>

运行示例

小标题

您可以通过<small>在标题内的元素内放置文本来创建子标题或辅助文本。

<h1>Heading 1 <small>Sub-heading</small></h1>
<h2>Heading 2 <small>Sub-heading</small></h2>
<h3>Heading 3 <small>Sub-heading</small></h3>
<h4>Heading 4 <small>Sub-heading</small></h4>
<h5>Heading 5 <small>Sub-heading</small></h5>
<h6>Heading 6 <small>Sub-heading</small></h6>

运行示例

显示标题

显示标题旨在突出显示比正常标题更多的标题。有4种尺寸显示航向(的.display-1,.display-2,.display-3,和.display-4)。

例如,一个<h1>元素可以使用显示标题类以4种不同的大小呈现。

要创建显示标题,请将上面的类中的一个添加到标题元素。

<h1 class=”display-1″>Display 1</h1>
<h1 class=”display-2″>Display 2</h1>
<h1 class=”display-3″>Display 3</h1>
<h1 class=”display-4″>Display 4</h1>

运行示例

领导文本

您可以使用Bootstrap的.lead课程让一个段落脱颖而出。

<p class="lead">
This is the article lead &mdash; it stands out at the start of the article.
</p>

<p>
This is normal text at the normal size etc...
</p>

运行示例

标记文本

HTML <mark>元素代表文本被标记或突出显示以供参考,因为它与另一个上下文相关。

以下是Bootstrap渲染此元素的示例:

<p>Sample <mark>marked text</mark>.</p>

运行示例

缩略语

在HTML中,<abbr>代表缩写或首字母缩写词。该title属性可用于提供缩写的扩展。

在Bootstrap中,具有title属性的缩写用光点虚线底部边框和悬停上的帮助光标呈现。

<abbr title="Professor">Prof.</abbr>

运行示例

首字母缩略词

您可以添加Bootstrap .initialism类,以较小的字体大小渲染缩写。

<abbr title="Structured Query Language" class="initialism">SQL</abbr> is used to query databases.

运行示例

引用文字

要将Bootstrap的样式应用于<blockquote>元素,请使用.blockquote该类。

<blockquote class="blockquote">
<p>The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now.</p>
</blockquote>

运行示例

Blockquotes – 来源

引导程序呈现嵌套在元素内部的元素<cite>和<footer>元素,<blockquote>如下所示:

<blockquote class="blockquote">
<p>Most of us are awash with beliefs of all sorts. We are steeped in the common sense and prevailing wisdom of our culture, traditions, communities, profession, family, and friends.</p>
<footer>Tom Campbell in <cite>My Big Toe</cite></footer>
</blockquote>

运行示例

块引用 – 对齐

您可以使用Bootstrap文本实用程序指定块引用的对齐方式。例如,.text-center:

<blockquote class="blockquote text-center">
<p>Most of us are awash with beliefs of all sorts. We are steeped in the common sense and prevailing wisdom of our culture, traditions, communities, profession, family, and friends.</p>
<footer>Tom Campbell in <cite>My Big Toe</cite></footer>
</blockquote>

运行示例
和.text-right:

<blockquote class="blockquote text-right">
<p>Most of us are awash with beliefs of all sorts. We are steeped in the common sense and prevailing wisdom of our culture, traditions, communities, profession, family, and friends.</p>
<footer>Tom Campbell in <cite>My Big Toe</cite></footer>
</blockquote>

运行示例

列表

Bootstrap应用各种样式,并且有许多专门用于列表的类。

列表 – 无风格

您可以使用Bootstrap .list-unstyled类来呈现没有默认值的列表,list-style并且left-margin:

<ul class="list-unstyled">
<li>Cats</li>
<li>Dogs</li>
<li>Elephants</li>
</ul>

运行示例

列表 – 内联

您可以使用Bootstrap .list-inline和.list-inline-item类来渲染列表display: inline-block并应用一些填充:

<ul class="list-inline">
<li class="list-inline-item">Cats</li>
<li class="list-inline-item">Dogs</li>
<li class="list-inline-item">Elephants</li>
</ul>

运行示例

说明列表

在Bootstrap中,描述列表呈现如下所示:

<dl>
<dt>Arahat</dt>
<dd>The “Perfected One”, who has overcome The Three Poisons of Desire, Hatred and Ignorance. </dd>
<dt>Bodhi</dt>
<dd>Awakened wisdom.</dd>
<dt>Zen</dt>
<dd>Meditative absorption in which all dualistic distinctions are eliminated.</dd>
</dl>

运行示例

说明列表 – 水平

您可以在术语和说明水平排队加引导的.row类的dl标签,那么任何网格系统的预定义类的dt和dd标签。

<dl class=”row”>
<dt class=”col-sm-2″>Arahat</dt>
<dd class=”col-sm-10″>The “Perfected One”, who has overcome The Three Poisons of Desire, Hatred and Ignorance. </dd>
<dt class=”col-sm-2″>Bodhi</dt>
<dd class=”col-sm-10″>Awakened wisdom.</dd>
<dt class=”col-sm-2″>Zen</dt>
<dd class=”col-sm-10″>Meditative absorption in which all dualistic distinctions are eliminated.</dd>
</dl>

运行示例

代码

在Bootstrap中,<code>元素呈现如下所示:

The <code>accesskey</code> attribute can be used on any HTML5 element.

运行示例

键盘输入

在Bootstrap中,<kbd>元素呈现如下所示:

To save the document on a Mac, press <kbd><kbd>Command</kbd>+<kbd>S</kbd></kbd>

运行示例

预格式化文本

在Bootstrap中,<pre>元素呈现如下所示:

<pre>This text has
been formatted using
the HTML pre tag. The browser should
display all white space
as it was entered.
</pre>

运行示例

您还可以添加Bootstrap的.pre-scrollable类来设置一个max-height350像素,并设置一个Y轴滚动条。

示例文本

在Bootstrap中,<samp>元素呈现如下所示:

Computer says <samp>Not enough memory</samp>. I always thought I had a good memory!

运行示例

变量

在Bootstrap中,<var>元素呈现如下所示:

<var>E</var> = <var>m</var> <var>c</var><sup>2</sup>

运行示例

 

133621

 

英语原文:https://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_typography.cfm 由工具自动翻译,由书目录整理