Bootstrap 代码
Bootstrap 的代码（Code）相关样式是其 CSS 框架的一部分，用于格式化与代码相关的元素，如内联代码、代码块、键盘输入和示例文本等。这些样式帮助开发者在网页中清晰、统一地展示代码或技术内容。以下是对 Bootstrap 代码样式的中文讲解，涵盖核心类、用法和示例，基于最新版本 Bootstrap 5.3.3（截至 2025 年 10 月）。
1. Bootstrap 代码样式概述
Bootstrap 提供了一组专门用于格式化代码的 CSS 类，适用于展示程序代码、命令行输入或用户输入的键盘按键等内容。核心特点包括：
- 统一外观：使用等宽字体（monospace）确保代码可读性。
- 语义化：通过不同标签和类区分代码类型（如内联代码、代码块）。
- 轻量级：样式简洁，易于与页面其他部分集成。
- 可定制：通过 Sass 变量调整字体、颜色和背景。
2. 核心代码相关类
Bootstrap 提供了以下主要类来格式化代码相关内容：
(1) 内联代码（Inline Code）
使用 <code> 标签和 .code 样式（默认应用）展示内联代码。
- 用法：
<p>使用 <code>console.log()</code> 输出到控制台。</p>- 效果：
console.log()显示为等宽字体，背景略微高亮（默认浅灰色）。
(2) 代码块（Code Blocks）
使用 <pre> 标签展示多行代码块，通常结合 .pre-scrollable 控制高度。
- 基本用法：
<pre><code>
function helloWorld() {
console.log("Hello, World!");
}
</code></pre>- 可滚动代码块：
使用.pre-scrollable限制最大高度并添加垂直滚动条：
<pre class="pre-scrollable" style="max-height: 300px;"><code>
function longCode() {
// 很长的代码...
console.log("This is a long code block.");
}
</code></pre>(3) 键盘输入（Keyboard Input）
使用 <kbd> 标签和 .kbd 样式表示用户通过键盘输入的内容。
- 用法：
<p>按下 <kbd>Ctrl + S</kbd> 保存文件。</p>- 效果：
Ctrl + S显示为等宽字体，背景深色（默认深灰色），带圆角边框。
(4) 示例文本（Sample Output）
使用 <samp> 标签表示程序或脚本的输出结果。
- 用法：
<p>命令输出结果为：<samp>Hello, World!</samp></p>- 效果：
Hello, World!显示为等宽字体，样式简洁。
(5) 变量（Variables）
使用 <var> 标签表示程序变量。
- 用法：
<p>变量 <var>x</var> 表示宽度。</p>- 效果：
x显示为等宽斜体字体。
3. 代码样式特性
- 字体：默认使用等宽字体栈（如
"SFMono-Regular", Menlo, Monaco, Consolas）。 - 颜色：内联代码和代码块使用浅灰背景（
$code-bg），键盘输入使用深灰背景（$kbd-bg）。 - 间距：代码块 (
<pre>) 有默认内边距和外边距，优化可读性。 - 响应式：代码样式在不同屏幕尺寸下保持一致，支持响应式调整（如字体大小）。
4. 结合工具类
Bootstrap 的工具类可以增强代码样式的表现力：
- 文本颜色：如
.text-primary改变<code>或<kbd>的颜色。
<code class="text-success">successCode()</code>- 背景颜色：如
.bg-dark为代码块添加深色背景。
<pre class="bg-dark text-white"><code>
console.log("Dark theme code block");
</code></pre>- 边框和圆角：如
.border和.rounded。
<pre class="border rounded"><code>
console.log("With border and rounded corners");
</code></pre>- 字体大小：使用
.fs-*调整代码字体。
<code class="fs-5">largerCode()</code>5. 定制代码样式
Bootstrap 的代码样式基于 Sass 变量，可通过以下方式定制：
- 字体：修改
$font-family-monospace。 - 颜色：修改
$code-color（内联代码）、$kbd-bg（键盘输入背景）。 - 背景：修改
$pre-bg（代码块背景）。
定制示例：
// custom.scss
$font-family-monospace: "Courier New", monospace;
$code-color: #d63384;
$pre-bg: #f8f9fa;
@import "node_modules/bootstrap/scss/bootstrap";编译后引入：
<link href="custom.css" rel="stylesheet">6. 完整示例
以下是一个展示多种代码样式的页面：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 代码样式示例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
pre { background-color: #f8f9fa; padding: 1rem; }
</style>
</head>
<body>
<div class="container my-4">
<h2 class="text-center">Bootstrap 代码样式</h2>
<!-- 内联代码 -->
<p>使用 <code>console.log()</code> 输出信息到控制台。</p>
<!-- 代码块 -->
<h4>代码块</h4>
<pre><code>
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("Bootstrap"));
</code></pre>
<!-- 可滚动代码块 -->
<h4>可滚动代码块</h4>
<pre class="pre-scrollable" style="max-height: 150px;"><code>
for (let i = 0; i < 20; i++) {
console.log(`Line ${i}`);
}
</code></pre>
<!-- 键盘输入 -->
<p>按下 <kbd>Ctrl + C</kbd> 复制内容，或按 <kbd>Ctrl + V</kbd> 粘贴。</p>
<!-- 示例输出 -->
<p>运行结果：<samp>Hello, Bootstrap!</samp></p>
<!-- 变量 -->
<p>设置变量 <var>width</var> 为 <code>100px</code>。</p>
<!-- 结合工具类 -->
<p>自定义样式：<code class="text-primary fs-5">styledCode()</code></p>
<pre class="bg-dark text-white rounded"><code>
console.log("Dark theme code block");
</code></pre>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>7. 注意事项
- 语义化：使用正确的标签（如
<code>、<pre>、<kbd>）以提高可访问性和 SEO。 - 代码转义：在 HTML 中展示代码时，确保特殊字符（如
<、>）被转义为<和>。 - 可读性：为长代码块添加
.pre-scrollable限制高度，避免页面过长。 - 可访问性：确保代码块的背景和文字颜色对比度符合 WCAG 标准。
- 性能：避免在页面中嵌入过多大型代码块，必要时使用外部文件或动态加载。
8. 学习资源
- 官方文档：https://getbootstrap.com/docs/5.3/content/code/
- 中文教程：https://www.bootcss.com/（非官方）
- X 平台：搜索“Bootstrap 代码”或“Bootstrap Code”，查看社区分享的代码展示技巧。
如果你需要更详细的代码样式讲解（例如特定语言的高亮、动态代码展示）或实现某效果的代码，请告诉我，我可以提供进一步的指导或示例！