肉渣教程

文本样式

上一节 下一节

标题

Bootstrap对<h1><h6>的标题元素都进行的样式预设,可直接使用。

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

运行一下

副标题

在标题中Bootstrap对<small>标签或使用.small类的元素进行了预设,用以作为副标题。副标题会为灰色,比主标题字体大小略小。

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
<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在全局将<body>元素和所有的段落元素都默认设置成font-size14px,设置line-height为1.428。另外,<p>元素还被设置了等于1/2行高(即 10px)的底部外边距(margin-bottom)。

被标记的文本

示例:

You can use the mark tag to highlight text.

源码:

You can use the mark tag to <mark>highlight</mark> text.

运行一下

<del>标签 - 被删除的文本

示例:

This line of text is meant to be treated as deleted text.

源码:

<del>This line of text is meant to be treated as deleted text.</del>

运行一下

<s>标签 - 无用文本

示例:

This line of text is meant to be treated as no longer accurate.

源码:

<s>This line of text is meant to be treated as no longer accurate.</s>

运行一下

<ins>标签 - 插入文本

示例:

This line of text is meant to be treated as an addition to the document.

源码:

<ins>This line of text is meant to be treated as an addition to the document.</ins>

运行一下

<u>标签 - 带下划线的文本

示例:

This line of text will render as underlined

源码:

<u>This line of text will render as underlined</u>

运行一下

<small>标签 - 小号文本

示例:

This line of text is meant to be treated as fine print.

源码:

<small>This line of text is meant to be treated as fine print.</small>

运行一下

<strong>标签 - 着重文本

示例:

The following snippet of text is rendered as bold text.

源码:

<strong>rendered as bold text</strong>

运行一下

<em>标签 - 斜体文本

示例:

The following snippet of text is rendered as italicized text.

源码:

<em>rendered as italicized text</em>

运行一下

<kbd>标签 - 标记用户通过键盘的输入

示例:

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

源码:

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

运行一下

改变大小写

示例:

Lowercased text.

Uppercased text.

Capitalized text.

源码:

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

运行一下

文本对齐

示例:

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

源码:

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

运行一下

联系地址

示例:

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com

源码:

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

运行一下

<blockquote> - 引用

示例:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

源码:

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

运行一下

引用中的<footer> - 标记引用来源

示例:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

源码:

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

运行一下

右对齐的引用

示例:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

源码:

<blockquote class="blockquote-reverse">
  ...
</blockquote>

运行一下


文本样式

上一节 下一节