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>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值