社区 学习 工具库 休闲
搜索
简体中文
Bootstrap 中文手册

Bootstrap 中文手册

  • 目录
  • 搜索
  • 书签
Bootstrap 中文手册 / Bootstrap 代码

Bootstrap 代码

Bootstrap 允许您以两种方式显示代码：

  • 第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。

  • 第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。

请确保当您使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： &lt; 和 &gt;。

让我们来看看下面的实例：

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

←
→
提交