Bootstrap

Bootstrap 是一个流行的前端框架，它提供了一套响应式的网格系统以及丰富的组件和JavaScript插件，用于快速开发美观、响应式的网站。在Bootstrap中，展示代码通常使用HTML的 <code> 和 <pre> 标签，这些标签不仅有助于格式化代码，还能提供语义化的内容结构。

<code> 标签

<code> 标签用于内联显示代码片段。当你只需要展示一小段代码，并且这段代码需要被包围在其他文本中时，使用 <code> 标签是一个很好的选择。

示例代码：

<p>这段文本中包含一个内联代码片段：<code>&lt;p&gt;Hello, world!&lt;/p&gt;</code>。</p>

<pre> 标签

<pre> 标签用于显示预格式化的文本，通常用于显示多行代码。使用 <pre> 标签时，文本中的空白符（空格和换行符）会被保留，这使得它非常适合展示代码块。

示例代码：

<p>如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：</p>
<pre>
    &lt;article&gt;
        &lt;h1&gt;Article Heading&lt;/h1&gt;
    &lt;/article&gt;
</pre>

Bootstrap 特有的类

Bootstrap 还提供了一些类来增强 <code> 和 <pre> 标签的样式和功能：

• .pre-scrollable：这个类可以应用于 <pre> 标签，为预格式化的内容添加一个最大高度和滚动条，当内容超出屏幕大小时，用户可以滚动查看。

示例代码：

<pre class="pre-scrollable">
    <code>
        // 这里是多行代码
        // 当代码超出屏幕大小时，会出现滚动条
        function example() {
            // 代码内容
        }
    </code>
</pre>

其他相关标签

• <var>：用于表示计算机程序中的变量。
• <kbd>：用于表示用户应该输入的键盘输入或按键。
• <samp>：用于表示计算机程序的样本输出。

示例代码：

<p>变量赋值：<var>x</var> = <var>ab</var> + <var>y</var></p>
<p>按键提示：请按 <kbd>CTRL</kbd> + <kbd>P</kbd></p>
<p>电脑程序输出：<samp>Sample output</samp></p>