Bootstrap内容排版(图、文、代码、表格颜色、边框)

可使文章更加清晰和美观

标题类

• 使用<h1>~</h6>可以创建不同尺寸的标题文字
• 如果是使用其它元素标签，比如<p>或<div>，调用.h1~.h6同样实现大标题;
• 通过.text-muted样式，构建大标题的附属小标题;
• 还有一种更大型，更加醒目的标题方式: .display-1~.display-4;
  代码练习：

        <h1>标题h1</h1>
        <h2>标题h2</h2>
        <h3>标题h3</h3>
        <h4>标题h4</h4>
        <h5>标题h5</h5>
        <h6>标题h6</h6>

        <div class="h2">标题h2</div>
        <div class="h1">index<small class="text-muted">.html</small></div>

        <div class="display-1">display-1</div>
        <div class="display-2">display-2</div>
        <div class="display-3">display-3</div>
        <div class="display-4">display-4</div>

文本类

• 想要指定一些段落中重要的内容，可以使用.lead强调;
• 比较常用的文本内联元素，来自HTML5:<mark><del><s><ins><u><small><strong><em>
• 也可以使用.mark、.small等方式实现同样元素的效果;
• 使用.title样式和<abbr>缩略语给文本做提示;
• 使用Blockquote设置来源备注或引用，使用.blockquote-footer设置底部备注来源;
• 可以对内容进行居中对齐.text-center或居右对齐.text-right;
  代码练习：

        <p class="lead">我是p标签的文本(lead)</p>
        <p>我是<mark>p标签(mark)</mark>的文本</p>
        <p>我是<del>p标签(del)</del>的文本</p>
        <p>我是<ins>p标签(ins)</ins>的文本</p>
        <p>我是<u>p标签(u)</u>的文本</p>
        <p>我是<strong>p标签(strong)</strong>的文本</p>
        <p>我是<em>p标签(em)</em>的文本</p>
        <p><abbr title="这是一个提示">我是p标签的文本(有提示)</abbr></p>
        <blockquote class="blockquote">
            <p>我是p标签的文本（blockquote）</p>
            <footer class="blockquote-footer text-right">
                index.html
            </footer>
        </blockquote>

列表类

• 使用.list-unstyled样式，可以将列表初始化;
• 使用.list-inline和.list-inline-item结合实现多列并排列表;
• 使用dl、dt和dd可以实现水平描述,使用.text-truncate可以省略溢出;
  代码练习：

        <ul class="list-unstyled">
            <li>列表1</li>
            <li>列表2</li>
            <ul class="list-unstyled">
                <li>列表2.1</li>
                <li>列表2.2</li>
            </ul>
            <li>列表3</li>
            <li>列表4</li>
        </ul>

        <ul class="list-inline">
            <li class="list-inline-item">列表1</li>
            <li class="list-inline-item">列表2</li>
            <li class="list-inline-item">列表3</li>
            <li class="list-inline-item">列表4</li>
        </ul>

        <div class="container">
            <dl class="row">
                <dt class="aa col-sm-3">dt</dt>
                <dd class="aa col-sm-9">dd</dd>
            </dl>
            <dl class="row">
                <dt class="aa col-sm-3">dt</dt>
                <dd class="aa col-sm-9 text-truncate">dd很多内容很多内容很多内容很多内容很多内容很多内容很多内容很多内容很多内容</dd>
            </dl>
            <dl class="row">
                <dt class="aa col-sm-3">dt</dt>
                <dd class="aa col-sm-9">dd</dd>
            </dl>
        </div>

代码类样式

• 使用<code>标签元素，可以将编程代码放入其中，但还是要手动转义特殊符号;
• 使用<pre>标签元素，配合<code>实现代码块的效果;
• 可以在代码区域设置.pre-scrollable样式，实现固定区域滚动，默认高350px;
• 使用<var>标签元素标识变量部分;
• 使用<kdb>标签元素标识键盘输入;
• 使用<samp>标签标识这是一个示例;
  代码练习：

<pre class="pre-scrollable" style="width: 500px;height: 200px;">
    <code>
        var <var>a</var>=1+2;
        function demo(){
            alert("a="+a);
        }
        
        <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>A</kbd>
        <samp>这是一个实例</samp>
        
        <var>var a=1+2;</var>
        function demo(){
            alert("a="+a);
        }
        
        var a=1+2;
        function demo(){
            alert("a="+a);
        }
        
    </code>
</pre>

图文类样式

• 给图片添加一个.img-fluid样式或设置max-width:100%,height:auto;
• 给小图片加上一个缩略图的样式，img-thumbnail,设置一个空心边框;
• 通过设置.float-left和float-right来设置图片的左右浮动;
• 通过.d-block设置为区块，再通过margin左右auto方式.mx-auto实现居中;
• 因为图片本身是内联块属性，所以，直接在父层用.text-center也可以实现居中;
• 使用HTML5新标签<picture>来实现响应式图片设置;
• 使用figure和figcaption实现图文组合显示;
  代码练习：

<!--<img src="img/1.jpg" style="max-width: 100%;height: auto;" />--><!--响应式同下-->
<!--<img src="img/1.jpg" class="img-fluid img-thumbnail float-right" />-->

<!--<img src="img/1.jpg" class="mx-auto d-block" />居中，同下-->
<!--<div class="text-center">
    <img src="img/1.jpg" />
</div>-->
<picture>
    <!--当屏幕宽度大于等于600px时，显示1.jpg，当屏幕宽度小于600px时，显示2.jpg-->
    <source srcset="img/1.jpg" media="(min-width:600px)">
    <img src="img/2.jpg" />
</picture>

<!--图文组合-->
<figure class="figure">
    <img src="img/1.jpg" class="figure-img" />
    <figcaption class="figure-caption text-center">文字居中</figcaption>
</figure>

表格样式

• 使用.table给表格设置一个基类，这是表格的基本样式;
• 使用.table-dark样式，启用颜色反转对比效果;
• 在<thead>使用.thead-light或.thead-dark实现浅黑或深灰调的标头;
• 使用.table-striped实现数据表的条纹状显示;
• 条纹状显示也适用于反转色调上;
• 默认情况下，边框是不完全的，使用.table-bordered设置表格边框;
• 表格边框也可以作用域返转色调上;
• 使用.table-borderless设置无边框，无边框效果也可以作用于反转色调上;
• 使用.table-hover实现一行悬停效果，行悬停效果也可以作用于反转色调上;
• 使用.table-sm实现紧缩型表格，反转色调依然支持;
• 使用.table-success等语义化实现<tr>或<td>、<th>等效果，反转色调通用;
• 使用.table-responsive实现溢出时出现底部滚动条;
• 使用.table-responsive-sm实现只有小于768px溢出时出现底部滚动条;
  例如：

<table class="table table-dark table-striped table-bordered table-hover table-sm table-responsive-sm">
    <thead class="thead-light">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="table-success">1</td>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>20</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>20</td>
        </tr>       
    </tbody>
</table>

边框样式

• 使用.border给元素增加相应的边框，默认是淡灰色(border-*: top, bottom, left, right指定任意一边);
• 如果颜色太淡，可以使用.border-*设置想要的场景，比如:.border-success;
• .border-*包含: primary、secondary、success、danger、warning、info、light、dark、white;
• 使用.border-0消除四周的边框，或使用.border-*-0消除某一边的边框;
• 使用.rounded和.rounded-*实现各种方位圆角,使用.rounded-circle正圆，使用.rounded-pill椭圆
• 使用.rounded-sm (小圆角）和.rounded-lg (大圆角）实现圆角半径大小;
  例如：

<div style="width: 100px;height: 100px;background-color: #EFEFEF;margin: 10px;float: left;" class=" border border-success"></div>
<div style="width: 100px;height: 100px;background-color: #EFEFEF;margin: 10px;float: left;;" class="border border-danger border-bottom-0"></div>
<div style="width: 100px;height: 100px;background-color: #EFEFEF;margin: 10px;float: left;" class="border rounded"></div>
<div style="width: 100px;height: 100px;background-color: #EFEFEF;margin: 10px;float: left;" class="border rounded-bottom"></div>
<div style="width: 200px;height: 100px;background-color: #EFEFEF;margin: 10px;float: left;" class="border rounded-pill"></div>