国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Chinesisches Bootstrap-Handbuch / Bootstrap 代碼

Bootstrap 代碼

Bootstrap 允許您以兩種方式顯示代碼：

  • 第一種是 <code> 標(biāo)簽。如果您想要內(nèi)聯(lián)顯示代碼，那么您應(yīng)該使用 <code> 標(biāo)簽。

  • 第二種是 <pre> 標(biāo)簽。如果代碼需要被顯示為一個(gè)獨(dú)立的塊元素或者代碼有多行，那么您應(yīng)該使用 <pre> 標(biāo)簽。

請(qǐng)確保當(dāng)您使用 <pre> 和 <code> 標(biāo)簽時(shí)，開(kāi)始和結(jié)束標(biāo)簽使用了 unicode 變體： &lt; 和 &gt;。

讓我們來(lái)看看下面的實(shí)例：

實(shí)例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 代碼</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> 作為內(nèi)聯(lián)元素被包圍。</p>
<p>如果需要把代碼顯示為一個(gè)獨(dú)立的塊元素，請(qǐng)使用 <pre> 標(biāo)簽：</p>
<pre>
   <article>
      <h1>Article Heading</h1>
   </article>
</pre>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

更多實(shí)例

<var>           變量賦值: x = ab + y

實(shí)例

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

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

<kbd>         按鍵提示：CTRL + P

實(shí)例

<!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> 來(lái)打開(kāi)打印窗口。</p>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

<pre class="pre-scrollable">   多行代碼帶有滾動(dòng)條

實(shí)例

<!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 類(lèi),  pre 元素最大的高度 max-height 為 350px ，并生成一個(gè) Y 軸的滾動(dòng)條:</p>
  <pre class="pre-scrollable">在 pre 元素中的文本
  寬度的顯示與文本的寬度一樣，
  保留了  空  格 和

  換行。</pre>
</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

<samp>    電腦程序輸出: Sample output

實(shí)例

<!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 元素包含電腦輸出的內(nèi)容:</p>
  <p><samp>This text is output from a computer program....</samp></p>

</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

<code>   同一行代碼片段: span, div

實(shí)例

<!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 元素來(lái)表示代碼片段:</p>
  <p>以下是 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 。</p>

</div>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例