Bootstrap CSS 版式参考


Bootstrap的默认设置

Bootstrap 的全局默认字体大小为 14px,行高为 1.428。

这适用于 <body> 和所有段落。

此外,所有 <p> 元素的下边距等于其计算行高的一半(默认为 10px)。


版式

下面的元素是 HTML 元素,Bootstrap 的样式与浏览器默认样式略有不同。查看"Try it" 示例以了解结果/差异。

下面的类用于进一步设置元素的样式。

Element/Class Description Example
<h1> - <h6>
or
.h1 - .h6
h1 - h6 headings 尝试一下
<small> Creates a lighter, secondary text in any heading

Heading (secondary text)

尝试一下
.small Indicates smaller text (set to 85% of the size of the parent): Smaller text 尝试一下
.lead Makes a text stand out: Stand out text 尝试一下
<mark>
or
.mark
Highlights text: Highlighted text 尝试一下
<del> Indicates deleted text: Deleted text 尝试一下
<s> Indicates no longer relevant text: No longer relevant text 尝试一下
<ins> Indicates inserted text: Inserted text 尝试一下
<u> Indicates underlined text: Underlined text 尝试一下
<strong> Indicates bold text: Bold text 尝试一下
<em> Indicates italic text: Italic text 尝试一下
.text-left Indicates left-aligned text 尝试一下
.text-center Indicates center-aligned text 尝试一下
.text-right Indicates right-aligned text 尝试一下
.text-justify Indicates justified text 尝试一下
.text-nowrap Indicates no wrap text 尝试一下
.text-lowercase Indicates lowercased text: LOWERCASED TEXT 尝试一下
.text-uppercase Indicates uppercased text: uppercased text 尝试一下
.text-capitalize Indicates capitalized text: capitalized text 尝试一下
<abbr> The <abbr> element indicates an abbreviation or acronym. Abbreviations with a title attribute have a dotted bottom border and a help cursor on hover, providing additional context on hover. 尝试一下
.initialism Displays the text inside the <abbr> element in a slightly smaller font size 尝试一下
<address> Presents contact information 尝试一下
<blockquote> Indicates blocks of content from another source 尝试一下
.blockquote-reverse Indicates a blockquote with right-aligned content 尝试一下
<ul> Indicates an unordered list 尝试一下
<ol> Indicates an ordered list 尝试一下
.list-unstyled Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) 尝试一下
.list-inline Places all list items on a single line 尝试一下
<dl> Indicates a description list 尝试一下
.dl-horizontal Lines up the terms and descriptions in the <dl> element side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side 尝试一下

代码

Element/Class Description Example
<var> Indicates variables: x = ab + y 尝试一下
<kbd> Indicates input that is typically entered via the keyboard: CTRL + P 尝试一下
<pre> Indicates multiple lines of code 尝试一下
<pre class="pre-scrollable"> Indicates multiple lines of code with scrollbar 尝试一下
<samp> Indicates sample output from a computer program: Sample output 尝试一下
<code> Indicates inline snippets of code: span, div 尝试一下