一. Bootstrap中的代码块
代码块一般在博客中使用的较多,比较博客园中提供的贴代码. 在Bootstrap中提供了三种形式的代码显示
1. 使用<code></code>来显示单行内联代码
2. 使用<pre></pre>来显示多行块代码
3. 使用<kbd></kbd>来显示用户输入代码
二. code 显示
<div class="col-md-offset-2"> Bootstrap的code代码风格: <code><code></code> <code><pre></code> <code><kbd></code> </div>
效果如下:
三. pre显示
<div> <pre> <ul> <li>...</li> <li>...</li> <li>...</li> </ul> </pre> </div>
效果图如下:
如果代码块的内容较多,需要显示滚动条效果如何实现呢
<pre class="pre-scrollable"> <ul> <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> <li>...</li><li>...</li> <li>...</li> <li>...</li> </ul> </pre>
四. kbd 显示
<div>请输入<kbd>ctrl+c</kbd>来复制代码,然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>
效果如下