七. 代码显示
来自慕课网
在Bootstrap主要提供了三种代码风格,用户可以根据具体的需求来使用不同的类型:
1、<code>
:一般是针对于单个单词或单个句子的代码
2、<pre>
:一般是针对于多行代码(也就是成块的代码)
3、<kbd>
:一般是表示用户要通过键盘输入的内容
预编译版本的Bootstrap将代码的样式单独提取出来:
1、LESS版本,请查阅code.less文件
2、Sass版本,请查阅_code.scss文件
编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行
虽然不同的类型风格不一样,但其使用方法是类似的。
code风格:
<div>Bootstrap的代码风格有三种:
<code><code></code>
<code><pre></code>
<code><kbd></code>
</div>
pre风格:
<div>
<pre>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</pre>
</div>
kbd风格:
<div>请输入<kbd>ctrl+c</kbd>来复制代码,然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>
不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码“<
”来替代,大于号(>)使用“>
”来替代。而且对于<pre>
代码块风格,标签前面留多少个空格,在显示效果中就会留多少个空格。建议在编写HTML标签时,就控制好。
有时候代码太多,不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
/*源码请查看bootstrap.css第731行~第734行*/
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}