前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Bootstrap 代码内联元素转变独立的块元素代码

Bootstrap 代码内联元素转变独立的块元素代码

原创
作者头像
好派笔记
修改2021-09-18 14:42:12
9130
修改2021-09-18 14:42:12
举报
文章被收录于专栏:好派笔记

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

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

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

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

实例

<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

尝试一下

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Bootstrap 允许您以两种方式显示代码:
    • 实例
      • 更多实例
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档