Bootstrap 代码

教程和技术文档总离不开展示代码。Bootstrap 借鉴 HTML 原生语义，提供了行内代码、代码块、键盘按键、变量等几种代码样式，让示例在页面里清晰、易读、风格统一。

行内代码 code

在正文中提及变量名、函数名等短代码时，用 <code> 包起来即可显示等宽字体并带浅色底：

<!-- 本示例基于 CDN 引入的 Bootstrap 5（引入代码见"环境安装"章节）；行内代码：段落里引用 API 名 -->
<p>请调用 <code>setInterval()</code> 方法来实现定时刷新。</p>

显示效果：setInterval() 以等宽字体并带浅红底色出现，与普通文字明显区分。

代码块 pre

多行代码应放进 <pre> 中，它会保留空格与换行。Bootstrap 对 <pre> 做了样式优化，配合 <code> 使用是标准写法：

<!-- pre + code：多行代码块 -->
<pre><code>&lt;p&gt;示例段落&lt;/p&gt;
&lt;div class="row"&gt;网格行&lt;/div&gt;</code></pre>

显示效果：两行 HTML 源码按原样显示在浅灰底代码块中；因为尖括号已用 <、> 实体转义，不会被浏览器当作标签解析。

键盘按键 kbd

需要提示用户按哪个键时使用 <kbd>，它会渲染成按键样式（深底白字、带圆角）：

<!-- 键盘提示 -->
<p>按 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存，按 <kbd>Esc</kbd> 退出全屏。</p>

显示效果：三个按键以深色「键帽」样式呈现，组合键提示一目了然。

变量与输出

编程场景还常用 <var> 表示变量（斜体），<samp> 表示程序输出（等宽字体）：

<!-- 变量与示例输出 -->
<p>当 <var>count</var> 大于 10 时，程序输出 <samp>超出上限</samp>。</p>

显示效果：count 以斜体显示代表变量，超出上限 以等宽字体显示代表程序回显，二者区分清晰。

小结

把短代码放进 <code>、多行放进 <pre><code>、按键提示用 <kbd>、变量与输出用 <var>/<samp>，代码展示就能与整体排版协调一致。