转载

Bootstrap 代码块 pre

Bootstrap 代码

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

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

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

代码块

多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。

 <p>Sample text here...</p>

 <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

注释或提示：还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。

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

<!DOCTYPE html>

<html>

<head>

  <title>Bootstrap 实例 - 代码</title>

  <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <script src="/scripts/jquery.min.js"></script>

  <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<p>如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：</p>

<pre>

  <article>

    <h1>Article Heading</h1>

  </article>

</pre>

</body>

</html>

运行结果：

如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：

     <article>      <h1>Article Heading</h1>    </article>

正文到此结束

所属分类： bootstrap3

本文标签： js src ip 实例 HTML 注释代码 CSS Bootstrap jquery
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

Bootstrap 代码块 pre

Bootstrap 代码

代码块

热门推荐

相关文章

bootstrap3

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流