1、使用<code></code>表现单行内联代码
2、使用<pre></pre>表现多行代码
3、使用<kbd></kbd>表现用户输入代码

一. Bootstrap中的代码块

在使用代码时,用户可以根据具体的需求来使用不同的类型:
1、<code> 一般是针对于单个单词或单个句子的代码
2、<pre>: 一般是针对于多行代码(也就是成块的代码)
3、<kbd>: 一般是表示用户要通过键盘输入的内容

  代码块一般在博客中使用的较多,比较博客园中提供的贴代码.
在Bootstrap中提供了三种形式的代码显示

示例如下

  1. 使用<code></code>来显示单行内联代码

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

  2. 使用<pre></pre>来显示多行块代码

如图

  3. 使用<kbd></kbd>来显示用户输入代码

永利开户送38元体验金 1

 

屏幕快照 2016-08-24 23.05.53.png

二. code 显示

大块代码滚动条效果

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

效果如下

永利开户送38元体验金 2

永利开户送38元体验金,屏幕快照 2016-08-24 23.13.27.png

<div class="col-md-offset-2">          Bootstrap的code代码风格:          <code>&lt;code&gt;</code>          <code>&lt;pre&gt;</code>          <code>&lt;kbd&gt;</code>  </div>

  效果如下:

永利开户送38元体验金 3

 

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

  效果图如下:

永利开户送38元体验金 4

  如果代码块的内容较多,需要显示滚动条效果如何实现呢

永利开户送38元体验金 5永利开户送38元体验金 6

<pre class="pre-scrollable">          &lt;ul&gt;          &lt;li&gt;...&lt;/li&gt;          &lt;li&gt;...&lt;/li&gt;          &lt;li&gt;...&lt;/li&gt;              &lt;li&gt;...&lt;/li&gt;          &lt;li&gt;...&lt;/li&gt;          &lt;li&gt;...&lt;/li&gt;              &lt;li&gt;...&lt;/li&gt;          &lt;li&gt;...&lt;/li&gt;          &lt;li&gt;...&lt;/li&gt;              &lt;li&gt;...&lt;/li&gt;          &lt;li&gt;...&lt;/li&gt;          &lt;li&gt;...&lt;/li&gt;              &lt;li&gt;...&lt;/li&gt;          &lt;li&gt;...&lt;/li&gt;          &lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;          &lt;li&gt;...&lt;/li&gt;          &lt;li&gt;...&lt;/li&gt;          &lt;/ul&gt;          </pre>

带滚动条的pre

 

四. kbd 显示

<div>请输入<kbd>ctrl+c</kbd>来复制代码,然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

  效果如下

永利开户送38元体验金 7


相关文章