Bootstrap 排版功能,包括全局设置,标题,正文,列表等。
Bootstrap 设置基本的全局显示,排版和链接样式。 当需要更多控制时,请查看文本工具。
$font-family-base
,$font-size-base
和$$line-height-base
属性作为应用于<body>
的排版基础。$link-color
设置全局链接颜色,并仅在 :hover
上应用链接下划线。$body-bg
在 background-color
上设置背景颜色(默认情况下为#fff)。这些样式可以在 _reboot.scss
中找到,全局变量在 _variables.scss
中定义。 确保在 $font-size-base
中设置 rem
。
所有HTML标题<h1>
到<h6>
都可用。
Heading | Example |
---|---|
|
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>
同时提供 .h1 到 .h6 的 Class,因为当你想匹配某一标题的字体样式,但不能直接使用 HTML 元素时。
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
使用包含的工具类创建 Bootstrap 3 的小辅助标题文本。
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
传统的标题元素旨在最好地处理页面内容。 当你需要更突出标题时,请考虑使用超大标题 - 更大,更醒目。
Display 1 |
Display 2 |
Display 3 |
Display 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>
可以使用 .lead
来添加引言内容(字体比标题小一些)。
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
针对常见内联HTML5元素的样式。
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
.mark
和.small
类也可用于应用与<mark>
和<small>
相同的样式,同时避免标记带来的任何不必要的语义含义。
虽然上面没有展示,但可以在HTML5中使用<b>
和 <i>
。 <b>
旨在突出显示单词或短语而不会传达额外的重要性,而 <i>
主要用于声音,技术术语等。
使用文本工具和颜色工具更改文本对齐,转换,样式,重量和颜色。
用于缩写和首字母缩略词的HTML的 <abbr>
元素的程式化实现,以显示悬停时的扩展版本。 缩写具有默认下划线并获得帮助光标以提供有关悬停和辅助技术用户的其他上下文。
将.initialism
添加到缩写中以获得略小的字体大小。
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
用于引用文档中其他来源的内容块。 将任何HTML包含在<blockquote class="blockquote">
里作为引用。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
在 <footer class="blockquote-footer">
里添加需要署名的内容。 并在 <cite>
里添加作者。
我们中国的最伟大最永久,而且最普遍的“艺术”是男人扮女人。
<blockquote class="blockquote">
<p class="mb-0">我们中国的最伟大最永久,而且最普遍的“艺术”是男人扮女人。</p>
<footer class="blockquote-footer">来自 <cite title="Source Title">鲁迅</cite></footer>
</blockquote>
根据需要使用文本工具来更改 blockquote 的对齐方式。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-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.
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
删除列表项上的默认列表样式和左边距(仅限直接子项)。 仅适用于直接子列表项,这意味着你还需要为任何嵌套列表添加类。
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
删除列表的项目符号并使用两个类的组合应用一些微小的边距,使用 .list-inline
和.list-inline-item
来实现。
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
使用栅格系统的预定义类来对内容进行水平对齐。 对于较长的内容,你可以选择添加 .text-truncate
类来省略过长的内容。
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
响应式排版是指通过简单地在一系列媒体查询中调整根元素的 font-size
来缩放文本和组件。 Bootstrap 不会为你执行此操作,但如果你需要,它可以很容易地添加。
这是一个例子。 根据你希望的任何字体大小和媒体查询进行调整。
html {
font-size: 1rem;
}
@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}