Bootstrap学习笔记 04 - 排版
程序员文章站
2022-07-14 21:33:36
...
<!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><strong>h1~h6</strong></h1>
<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><strong><small></strong></h1>
<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>
<h1><strong><mark></strong></h1>
<p><mark>Bootstrap</mark>，来自 Twitter，是目前很受欢迎的前端框架。</p>
<h1><strong><abbr></strong></h1>
<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>
<h1><strong><blockquote></strong></h1>
<h2>normal</h2>
<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>
<h2>class="blockquote-reverse"</h2>
<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),
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>
</div>
<h1><dl></h1>
<dl>
<dt>C++</dt>
<dd>- C++是C语言的继承</dd>
<dt>Java</dt>
<dd>- Java是一门面向对象编程语言</dd>
</dl>
<h1><code></h1>
<p>
A complete type, or <code>void</code> (possible cv-qualified),
or an array of unknown bound of a complete element type.
</p>
<h1><kbd></h1>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
<h1><pre></h1>
<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>
<h1>Contextual Colors and Backgrounds</h1>
<h2>Text Color</h2>
<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>
<h2>Background Color</h2>
<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>
<br>
<br>
<br>
</div>
</body>
</html>上一篇： 5.3.1面向可维护性的构造技术
下一篇： Bootstrap学习笔记——排版