Bootstrap 代码块 pre


Bootstrap 代码

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

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

请确保当您使用 <pre> 和 <code> 标签时,开始和结束标签使用了 unicode 变体: &lt;&gt;

代码块

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

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

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


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

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.   <title>Bootstrap 实例 - 代码</title> 
  5.   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
  6.   <script src="/scripts/jquery.min.js"></script> 
  7.   <script src="/bootstrap/js/bootstrap.min.js"></script> 
  8. </head> 
  9. <body> 
  10.  
  11. <p>如果需要把代码显示为一个独立的块元素,请使用 <pre> 标签:</p> 
  12. <pre> 
  13.   &lt;article&gt; 
  14.     &lt;h1&gt;Article Heading&lt;/h1&gt; 
  15.   &lt;/article&gt; 
  16. </pre>
  17.  
  18. </body> 
  19. </html>  

运行结果:

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

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

没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)