全局设置
字体 14px 行高 1.428
标题
<h1>~<h6>
<h1>h1 Bootstrap heading (36px)</h1>
<h2>h2 Bootstrap heading (30px)</h2>
<h3>h3 Bootstrap heading (24px)</h3>
<h4>h4 Bootstrap heading (18px)</h4>
<h5>h5 Bootstrap heading (14px)</h5>
<h6>h6 Bootstrap heading (12px)</h6>
<small>
<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>
文本
<mark>
<p><mark>Bootstrap</mark>，来自 Twitter，是目前很受欢迎的前端框架。</p>
<abbr>
<p>A <abbr title="Plain Old Data">POD</abbr> type is a type whose characteristics are supported by a data type in the C language,either cv-qualified or not.</p>
<blockquote>
<blockquote>
<p>
A POD class is a class that is both trivial (can only be statically initialized) and standard-layout (has a simple data structure),and thus is mostly restricted to the characteristics of a class that are compatible with those of a C data structure declared with struct or union in that language,even though the expanded C++ grammar can be used in their declaration and can have member functions.
</p>
</blockquote>
可以使用 blockquote-reverse 样式将引用显示在右侧：
<blockquote class="blockquote-reverse">
<p>
A POD class is a class that is both trivial (can only be statically initialized) and standard-layout (has a simple data structure),even though the expanded C++ grammar can be used in their declaration and can have member functions.
</p>
</blockquote>
<dl>
<dl>
<dt>C++</dt>
<dd>- C++是C语言的继承</dd>
<dt>Java</dt>
<dd>- Java是一门面向对象编程语言</dd>
</dl>
<code>
<p>
A complete type,or <code>void</code> (possible cv-qualified),or an array of unknown bound of a complete element type.
</p>
<kbd>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
<pre>
<pre>
struct A { int i; }; // C-struct (POD)
class B : public A {}; // still POD (no data members added)
struct C : B { void fn(){} }; // still POD (member function)
struct D : C { D(){} }; // no POD (custom default constructor)</pre>
文字及背景颜色
文字
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
背景
<p class="bg-primary">This text is important.</p>
<p class="bg-success">This text indicates success.</p>
<p class="bg-info">This text represents some information.</p>
<p class="bg-warning">This text represents a warning.</p>
<p class="bg-danger">This text represents danger.</p>
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<title>Typography</title>
</head>
<body>
<div class="container">
<div>
<h1>h1 Bootstrap heading (36px)</h1>
<h2>h2 Bootstrap heading (30px)</h2>
<h3>h3 Bootstrap heading (24px)</h3>
<h4>h4 Bootstrap heading (18px)</h4>
<h5>h5 Bootstrap heading (14px)</h5>
<h6>h6 Bootstrap heading (12px)</h6>
</div>
<div>
<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>
</div>
<div>
<p><mark>Bootstrap</mark>，来自 Twitter，是目前很受欢迎的前端框架。</p>
<p>A <abbr title="Plain Old Data">POD</abbr> type is a type whose characteristics
are supported by a data type in the C language,either cv-qualified or not.</p>
<blockquote>
<p>
A POD class is a class that is both trivial (can only be statically initialized) and standard-layout (has a simple data structure),and thus is mostly restricted to the characteristics of a class that are compatible with those of a C data structure declared with
struct or union in that language,even though the expanded C++ grammar can be used in their declaration and can have member functions.
</p>
</blockquote>
<blockquote class="blockquote-reverse">
<p>
A POD class is a class that is both trivial (can only be statically initialized) and standard-layout (has a simple data structure),even though the expanded C++ grammar can be used in their declaration and can have member functions.
</p>
</blockquote>
</div>
<dl>
<dt>C++</dt>
<dd>- C++是C语言的继承</dd>
<dt>Java</dt>
<dd>- Java是一门面向对象编程语言</dd>
</dl>
<p>
A complete type,or an array of unknown bound of a complete element type.
</p>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
<pre>
struct A { int i; }; // C-struct (POD)
class B : public A {}; // still POD (no data members added)
struct C : B { void fn(){} }; // still POD (member function)
struct D : C { D(){} }; // no POD (custom default constructor)</pre>
<div>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
</div>
<div>
<p class="bg-primary">This text is important.</p>
<p class="bg-success">This text indicates success.</p>
<p class="bg-info">This text represents some information.</p>
<p class="bg-warning">This text represents a warning.</p>
<p class="bg-danger">This text represents danger.</p>
</div>
</div>
</body>
</html>
