第五谈：代码与图文

本节课我们来开始学习 Bootstrap 的代码排版和图文排版。

一．代码样式

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

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

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

      <pre class="pre-scrollable" style="width: 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="width: 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-width:100%，height:auto；

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

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

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

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

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

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

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

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

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

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

      <picture>
          <source srcset="img/2.png" media="(max-width:800px)">
          <img src="img/1.png" alt="大图">
      </picture>

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

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