Bootstrap学习笔记 04

来源：互联网发布：sql 截取字符串函数编辑：程序博客网时间：2024/06/06 00:50
<!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>&lt;small&gt;</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>&lt;mark&gt;</strong></h1>                <p><mark>Bootstrap</mark>，来自 Twitter，是目前很受欢迎的前端框架。</p>                <h1><strong>&lt;abbr&gt;</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>&lt;blockquote&gt;</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>&lt;dl&gt;</h1>            <dl>                <dt>C++</dt>                <dd>- C++是C语言的继承</dd>                <dt>Java</dt>                <dd>- Java是一门面向对象编程语言</dd>            </dl>            <h1>&lt;code&gt;</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>&lt;kbd&gt;</h1>            <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>            <h1>&lt;pre&gt;</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>
这里写图片描述
阅读全文
1 0