bootstrap显示代码的两种方式-code,pre

最新推荐文章于 2022-08-23 21:33:54 发布

四哥-云上

最新推荐文章于 2022-08-23 21:33:54 发布

阅读量1k

点赞数 1

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/yongbin668/article/details/51527576

版权

bootstrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

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

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

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

实例

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