Bootstrap-CSS：代码

最新推荐文章于 2024-04-15 07:57:18 发布

转载最新推荐文章于 2024-04-15 07:57:18 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/storebook/p/8446289.html

本文介绍如何使用Bootstrap框架内的<code>和<pre>标签来展示代码片段，包括内联代码和多行代码的正确用法，并提供实例演示。

ylbtech-Bootstrap-CSS：代码

1.返回顶部

1、

Bootstrap 代码

Bootstrap 允许您以两种方式显示代码：

第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。

请确保当您使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： < 和 >。

让我们来看看下面的实例：

实例

<p><code>&lt;header&gt;</code> 作为内联元素被包围。</p>
<p>如果需要把代码显示为一个独立的块元素，请使用 &lt;pre&gt; 标签：</p>
<pre>
    &lt;article&gt;
        &lt;h1&gt;Article Heading&lt;/h1&gt;
    &lt;/article&gt;
</pre>

尝试一下 »

实例展示如下图：

更多实例

元素/类	描述	实例
<var>	变量赋值: `x` = `ab` + `y`	尝试一下
<kbd>	按键提示： `CTRL + P`	尝试一下
<pre>	多行代码	尝试一下
<pre class="pre-scrollable">	多行代码带有滚动条	尝试一下
<samp>	电脑程序输出: `Sample output`	尝试一下
<code>	同一行代码片段: `span`, `div`	尝试一下

2、

1、

http://www.runoob.com/bootstrap/bootstrap-code.html

2、

11.返回顶部

作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载于:https://www.cnblogs.com/storebook/p/8446289.html