如何使用 Bootstrap 显示代码？

Bootstrap是一个流行的前端框架，可以轻松地展示代码示例，这对于程序员来说非常有用。下面将介绍如何使用Bootstrap进行代码展示。

步骤1：引入Bootstrap

首先，需要在HTML页面中引入Bootstrap的CSS和JS文件。这可以通过以下代码完成：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

上述代码使用的是Bootstrap 3，若使用Bootstrap 4或其他版本需引用对应版本的文件。

步骤2：使用

标签

接下来，在HTML中使用<pre>标签包含代码，该标签可以保留文本中的空格和换行符。下面是一个代码示例：

<pre><code>function helloWorld() {
  console.log("Hello, World!");
}
helloWorld();</code></pre>

以上代码中，<code>标签用于指定需要显示的代码。

步骤3：添加样式

为了增强代码的可读性，可以添加一些样式。Bootstrap提供了一个专门的CSS类<pre><code>，对于代码块来说，可以将<pre>标签和<code>标签合并在一起使用，将该类添加到合并后的标签中，如下所示：

<pre><code class="pre-scrollable">function helloWorld() {
  console.log("Hello, World!");
}
helloWorld();</code></pre>

其中pre-scrollable是一个Bootstrap的CSS类，可以使代码块在超出屏幕高度时出现滚动条。

以上是如何使用Bootstrap显示代码的方法，通过这样的方式，可以将程序示例进行美化，使其更易于阅读和理解。

返回markdown格式如下：

# 如何使用 Bootstrap 显示代码？

Bootstrap是一个流行的前端框架，可以轻松地展示代码示例，这对于程序员来说非常有用。下面将介绍如何使用Bootstrap进行代码展示。

## 步骤1：引入Bootstrap

首先，需要在HTML页面中引入Bootstrap的CSS和JS文件。这可以通过以下代码完成：

```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

步骤2：使用

标签

接下来，在HTML中使用

标签包含代码，该标签可以保留文本中的空格和换行符。下面是一个代码示例：

<pre><code>function helloWorld() {
  console.log("Hello, World!");
}
helloWorld();</code></pre>

以上代码中，标签用于指定需要显示的代码。

步骤3：添加样式

为了增强代码的可读性，可以添加一些样式。Bootstrap提供了一个专门的CSS类

，对于代码块来说，可以将
标签和标签合并在一起使用，将该类添加到合并后的标签中，如下所示：

<pre><code class="pre-scrollable">function helloWorld() {
  console.log("Hello, World!");
}
helloWorld();</code></pre>

其中pre-scrollable是一个Bootstrap的CSS类，可以使代码块在超出屏幕高度时出现滚动条。

以上是如何使用Bootstrap显示代码的方法，通过这样的方式，可以将程序示例进行美化，使其更易于阅读和理解。