Bootstrap显示代码的三种效果

代码（一）

本节内容相对来说比较简单，一般在个人博客上使用的较为频繁，用于显示代码的风格。在Bootstrap主要提供了三种代码风格： 1、使用来显示单行内联代码 2、使用

来显示多行块代码 3、使用来显示用户输入代码

预编译版本的Bootstrap将代码的样式单独提取出来： 1、LESS版本，请查阅code.less文件 2、Sass版本，请查阅_code.scss文件 编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行，由于代码太长，此处不一一列举。

在使用代码时，用户可以根据具体的需求来使用不同的类型： 1、：一般是针对于单个单词或单个句子的代码 2、

：一般是针对于多行代码（也就是成块的代码） 3、:一般是表示用户要通过键盘输入的内容
 
     
虽然不同的类型风格不一样，但其使用方法是类似的。 code风格：
 
     
Bootstrap的代码风格有三种：
  <code>
  <pre>
  <kbd>
 
     
pre风格：
 
     


<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

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

 
....
 
....
 
....
 
....
 
....
 
....
 
....
 
....
 
....
 
....
 
....
 
....
 
....
 
....

 
      
 
     
 
    

转载于:https://www.cnblogs.com/9miao/p/5025147.html