Bootstrap显⽰代码的三种效果
代码（⼀）
本节内容相对来说⽐较简单，⼀般在个⼈博客上使⽤的较为频繁，⽤于显⽰代码的风格。在Bootstrap主要提供了三种代码风格： 1、使⽤<code></code>来显⽰单⾏内联代码 2、使⽤<pre></pre>来显⽰多⾏块代码 3、使⽤<kbd></kbd>来显⽰⽤户输⼊代码
预编译版本的Bootstrap将代码的样式单独提取出来： 1、LESS版本，请查阅code.less⽂件 2、Sass版本，请查阅_code.scss⽂件编译出来的CSS代码请查阅bootstrap.css⽂件第688⾏~第730⾏，由于代码太长，此处不⼀⼀列举。
在使⽤代码时，⽤户可以根据具体的需求来使⽤不同的类型： 1、<code>：⼀般是针对于单个单词或单个句⼦的代码 2、<pre>：⼀般是针对于多⾏代码（也就是成块的代码） 3、<kbd>:⼀般是表⽰⽤户要通过键盘输⼊的内容
虽然不同的类型风格不⼀样，但其使⽤⽅法是类似的。 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>代码块风格，标签前⾯留多少个空格，在显⽰效果中就会留多少个空格。
代码（⼆）
正如前⾯所⽰，<pre>元素⼀般⽤于显⽰⼤块的代码，并保证原有格式不变。但有时候代码太多，⽽且不想让其占有太⼤的页⾯篇幅，就想控制代码块的⼤⼩。Bootstrap也考虑到这⼀点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最⼤⾼度为
340px，⼀旦超出这个⾼度，就会在Y轴出现滚动条。 /*源码请查看bootstrap.css第731⾏~第734⾏*/
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
<pre>为什么使用bootstrap?
<ol>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
</ol>
</pre>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。