bootstrap-文档中代码显示

显示代码的三种风格:

  1. 使用<code></code>来显示单行内联代码
  2. 使用<pre></pre>来显示多行块代码
  3. 使用<kbd></kbd>来显示用户输入代码

code

<p>你玩过QQ飞车吗?按住<code>Shift</code>键释放氮气</p>

pre

<div>
    <p>一个Bootstrap引用的HTML模板:</p>
<pre class="pre-scrollable">
&lt!DOCTYPE html&gt
&lthtml lang="en"&gt
&lthead&gt
    &ltmeta charset="UTF-8"&gt
    &ltmeta name="viewport" content="width=device-width, initial-scale=1.0"&gt
    &ltmeta http-equiv="X-UA-Compatible" content="ie=edge"&gt
    &lttitle&gtmodel&lt/title&gt
    &ltlink rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"&gt
&lt/head&gt
&ltbody&gt
    &ltp&gt需要非常注意的一点:在代码中碰到小于号(<)要使用硬编码“&lt;”来替代,大于号(>)使用“&gt;”来替代.&lt/p&gt
    &ltp&gt而且空格真实有效.&lt/p&gt
    &ltp&gt通过pre-scrollable类名控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条.&lt/p&gt
    &ltp&gt通过pre-scrollable类名控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条.&lt/p&gt
    &ltp&gt通过pre-scrollable类名控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条.&lt/p&gt
    &ltp&gt通过pre-scrollable类名控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条.&lt/p&gt
    &ltscript src="jquery-1.10.0.js"&gt&lt/script&gt
    &ltscript src="bootstrap-3.3.7-dist/js/bootstrap.min.js"&gt&lt/script&gt
&lt/body&gt
&lt/html&gt
</pre>
</div>

kbd

<div>请输入<kbd>ctrl+c</kbd>来复制代码,然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

猜你喜欢

转载自blog.csdn.net/bertZuo/article/details/85156492