Bootstrap中國語マニュアル
/ Bootstrap 代碼
Bootstrap 代碼
Bootstrap 允許您以兩種方式顯示代碼：
第一種是 <code> 標簽。如果您想要內(nèi)聯(lián)顯示代碼，那么您應(yīng)該使用 <code> 標簽。
第二種是 <pre> 標簽。如果代碼需要被顯示為一個獨立的塊元素或者代碼有多行，那么您應(yīng)該使用 <pre> 標簽。
請確保當您使用 <pre> 和 <code> 標簽時，開始和結(jié)束標簽使用了 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> 作為內(nèi)聯(lián)元素被包圍。</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 元素包含電腦輸出的內(nèi)容:</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>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例