Bootstrap typography
May 04, 2021 Bootstrap
Table of contents
Bootstrap typography
Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif as its default font stack.
With Bootstrap's typography features, you can create titles, paragraphs, lists, and other inline elements.
Title
All HTML headings (h1 to h6) styles are defined in Bootstrap. Take a look at the following example:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 标题</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>
</body>
</html>
The result is as follows:
Inline subheading
If you need to add an inline subheading to any title, simply add .lt;small,or .small class on both sides of the element so that you get text with a smaller, lighter color, as shown in the following example:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 内联子标题</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
</body>
</html>
The result is as follows:
Extension: In the documentation, you may want the title to appear in a centered manner, then refer to this site's bootstrap programming practice to train text centering!
Boot the principal copy
To add emphasis text to a paragraph, you can add class"lead", which results in larger, thicker, higher-line text, as shown in the following example:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 引导主体副本</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<hr>
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。
</p>
</body>
</html>
The result is as follows:
Emphasize
Html's default emphasis labels are the "lt;small" (set text to 85% of the parent text size), "lt;strong" (set text to thicker text), and "set text to italics").
Bootstrap provides some classes that emphasize text, as shown in the following example:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 强调</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>
</body>
</html>The result is as follows:
Abbreviation
HTML elements provide tags for abbreviations, such as WWW or HTTP. B ootstrap defines the style of the element as a dotted border that appears at the bottom of the text and displays the full text when the mouse hovers over it (as long as you add text to the . To get text in a smaller font, add .initialism to .
<!DOCTYPE html><html><head>
<title>Bootstrap 实例 - 缩写</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script></head>
<body>
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
</body>
</html>The result is as follows:
Address (Address)
You can display contact information on the web page using the hashtag. B
ecause the default is display:block; T
hat you need to use
Labels to add new lines to closed address text.
<!DOCTYPE html><html><head>
<title>Bootstrap 实例 - 地址</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script></head><body><address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title="Phone">P:</abbr> (123) 456-7890</address><address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a></address>
</body>
</html>The result is as follows:
Reference (Blockquote)
You can use the default slt;blockquote next to any HTML text. O ther options include adding a hashtag to identify the source of the reference, using class .pull-right to align the reference to the right. The following example demonstrates these features:
The result is as follows:
<!DOCTYPE html><html><head>
<title>Bootstrap 实例 - 引用</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<blockquote><p>这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。</p></blockquote>
<blockquote>这是一个带有源标题的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote class="pull-right">这是一个向右对齐的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
</body>
</html>
List
Bootstrap supports ordered lists, sequenceless tables, and defined lists.
-
Ordered list: An ordered list is a list that begins with a number or other ordered character.
-
No-sequence tables: A sequenceless table is a list that does not have a specific order and begins with a traditional-style highlight. I f you don't want to display these highlights, you can use class .list-unstyled to remove the style. You can also put all list items in the same row by using class .list-inline.
-
Define a list: In this type of list, each list item can contain elements such as slt;dt;and slt;dd?gt; T he term is defined, just like a dictionary, which is defined as belonging to (or phrase). T hen, the description of the .lt;dd> is .lt;dt.gt. You can use class dl-horizontal to display the belongings in the line side by side with the description.
The following example demonstrates a list of these types:
<!DOCTYPE html><html><head>
<title>Bootstrap 实例 - 列表</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script></head><body><h4>有序列表</h4><ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li></ol><h4>无序列表</h4><ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li></ul><h4>未定义样式列表</h4><ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li></ul><h4>内联列表</h4><ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li></ul><h4>定义列表</h4><dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd></dl><h4>水平的定义列表</h4><dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd></dl></body></html>The result is as follows:
More typography classes
The following table provides examples of Bootstrap's more typography classes:
| Class | Describe | Instance |
|---|---|---|
| .lead | Highlight the paragraph | Give it a try |
| .small | Set small text (set to 85% size of parent text) | Give it a try |
| .text-left | Set the text to the left | Give it a try |
| .text-center | Set the text to center | Give it a try |
| .text-right | Set the text to align to the right | Give it a try |
| .text-justify | Set the text alignment, and the text in the paragraph that exceeds the screen is automatically lineed | Give it a try |
| .text-nowrap | Sections that are out of the screen do not line | Give it a try |
| .text-lowercase | Set the text in small case | Give it a try |
| .text-uppercase | Set the capital of the text | Give it a try |
| .text-capitalize | Capital the first letter of the word | Give it a try |
| .initialism | The text that appears in the element is displayed in small font | Give it a try |
| .blockquote-reverse | Set the reference to align to the right | Give it a try |
| .list-unstyled | Remove the default list style, and the list items are aligned to the left in the . This class applies only to direct child list items (if you need to remove nested list items, you need to use this style in nested lists) | Give it a try |
| .list-inline | Place all list items on the same line | Give it a try |
| .dl-horizontal | The class is set up for floating and offset, and is applied to the elements of slt;dl?gt; and the elements of the .lt;dt?gt; | Give it a try |
| .pre-scrollable | Make the elements scrollable | Give it a try |