登录
注册
node.js 学习社区
bootstrap显示代码的三种效果

古月胡

2015-11-28 14:25

代码(一)本节内容相对来说比较简单,一般在个人博客上使用的较为频繁,用于显示代码的风格。在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>&lt;code&gt;</code>

<code>&lt;pre&gt;</code>

<code>&lt;kbd&gt;</code>

</div>pre风格:

<div>

<pre>

&lt;ul&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;/ul&gt;

</pre>

</div>kbd风格:

<div>请输入<kbd>ctrl+c</kbd>来复制代码,然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码“&lt;”来替代,大于号(>)使用“&gt;”来替代。而且对于<pre>代码块风格,标签前面留多少个空格,在显示效果中就会留多少个空格。代码(二)正如前面所示,<pre>元素一般用于显示大块的代码,并保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。

/*源码请查看bootstrap.css第731行~第734行*/

.pre-scrollable {

max-height: 340px;

overflow-y: scroll;

}

<pre>

<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>

回复 · 0

发表回复

你可以在回复中 @ 其他人