收藏757
分享
阅读57428
更新时间2022-04-21
Bootstrap 允许您以两种方式显示代码：
第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。
请确保当您使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： < 和 >。
让我们来看看下面的实例：
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 代码</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <p><code><header></code> 作为内联元素被包围。</p> <p>如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：</p> <pre> <article> <h1>Article Heading</h1> </article> </pre> </body> </html>
点击 "运行实例" 按钮查看在线实例
<var> 变量赋值: x = ab + y
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>代码</h2> <p>使用 var 元素表示变量：</p> <p><var>x</var> = <var>a</var><var>b</var> + <var>y</var></p> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
<kbd> 按键提示：CTRL + P
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>代码</h2> <p>使用 kbd 元素表示按键输入:</p> <p>使用 <kbd>ctrl + p</kbd> 来打开打印窗口。</p> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
<pre class="pre-scrollable"> 多行代码带有滚动条
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>代码</h2> <p>使用 pre 元素输出多行:</p> <pre>在 pre 元素中的文本 宽度的显示与文本的宽度一样， 保留了 空 格 和 换行。</pre> <p>如果你添加 .pre-scrollable 类, pre 元素最大的高度 max-height 为 350px ，并生成一个 Y 轴的滚动条:</p> <pre class="pre-scrollable">在 pre 元素中的文本 宽度的显示与文本的宽度一样， 保留了 空 格 和 换行。</pre> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
<samp> 电脑程序输出: Sample output
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>代码</h2> <p>使用 samp 元素包含电脑输出的内容:</p> <p><samp>This text is output from a computer program....</samp></p> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
<code> 同一行代码片段: span, div
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>代码</h2> <p>使用 code 元素来表示代码片段:</p> <p>以下是 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 。</p> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
