bootstrap代码标签风格
2016-08-24 本文已影响117人
天天发呆
1、使用<code></code>表现单行内联代码
2、使用<pre></pre>表现多行代码
3、使用<kbd></kbd>表现用户输入代码
在使用代码时，用户可以根据具体的需求来使用不同的类型：
1、<code> 一般是针对于单个单词或单个句子的代码
2、<pre>: 一般是针对于多行代码（也就是成块的代码）
3、<kbd>: 一般是表示用户要通过键盘输入的内容
示例如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>代码</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
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>
</body>
</html>
如图
屏幕快照 2016-08-24 23.05.53.png
大块代码滚动条效果
<pre>元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
下面是<code>.pre-scrollable</code>实现
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
示例代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>代码</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
高度超出340px，就会在Y轴出现滚动条
<!--下面是代码任务部分-->
<pre>
<ol class="pre-scrollable">
<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>
</body>
</html>
效果如下
屏幕快照 2016-08-24 23.13.27.png
