BootStrap v4.x 代码和图文

一．代码样式

1. 使用<code>标签元素，可以将编程代码放入其中，但还是要手动转义特殊符号；

    <code>
        &lt;div&gt;
    </code>

2. 使用<pre>标签元素，配合<code>实现代码块的效果；

<pre class="pre-scrollable" style=" 500px;">
    <code>
        &lt;div&gt;
        &lt;span&gt;这是一个代码块效果！&lt;span&gt;
        &lt;div&gt;
    </code>
</pre>

3. 可以在代码区域设置.pre-scrollable 样式，实现固定区域滚动，默认高 350px；

<pre class="pre-scrollable" style=" 500px;">

4. 使用<var>标签元素标识变量部分；

<var>y</var> = <var>m</var> + <var>b</var>
<!-- 整体包含原则上是不对的 -->
<var>y = m + b</var>

5. 使用<kbd>标签元素标识键盘输入；

<kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>c</kbd>

6. 使用<samp>标签元素标识这是一个示例；

<samp>这是一段代码</samp>

二．图文样式

1. 给图片添加一个.img-fluid 样式或设置 max-100%，height:auto；

<img src="img/banner.png" class="img-fluid" alt="响应式图片">

2. 给小图片加上一个缩略图的样式.img-thumbnail，设置一个空心边框；

<img src="img/thumb.png" class="img-thumbnail" alt="缩略图">

3. 通过设置.float-left 和.float-right 来设置图片的左右浮动；

<img src="img/thumb.png" class="float-left" alt="左浮动">
<img src="img/thumb.png" class="float-right" alt="有浮动">

4. 通过.d-block 设置为区块，再通过 margin 左右 auto 方式.mx-auto 实现居中；

<img src="img/thumb.png" class="mx-auto d-block">

5. 因为图片本身是内联块属性，所以，直接在父层用.text-center 也可以实现居中；

<div class="text-center">
　　<img src="img/thumb.png" class="img-thumbnail" alt="缩略图">
</div>

6. 使用 HTML5 新标签<picture>来实现响应式图片设置；

<picture>
　　<source srcset="img/banner2.png" media="(max-800px)">
　　<img src="img/banner.png" alt="大图">
</picture>

7. 使用 figure 和 figcaption 实现图文组合显示；

<figure class="figure">
    <img src="img/thumb.png" class="figure-img" alt="图文组合">
    <figcaption class="figure-caption text-right">
        这是一张图片
    </figcaption>
</figure>