Bootstrap代码

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

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

这里写图片描述


var元素:变量赋值

<div class="container">
    <h2>代码</h2>   
    <p>使用 var 元素表示变量:</p>
    <p><var>x</var> = <var>a</var><var>b</var> + <var>y</var></p>
</div>

这里写图片描述


kbd元素:表示按键输入

<div class="container">
    <h2>代码</h2>
    <p>使用 kbd 元素表示按键输入:</p>
    <p>使用 <kbd>ctrl + p</kbd> 来打开打印窗口。</p>
</div>

这里写图片描述


.pre-scrollable:多行代码带有滚动条

pre 元素最大的高度 max-height 为 350px ,添加 .pre-scrollable 类,会生成一个 Y 轴的滚动条。


samp元素:电脑程序输出

<div class="container">
    <h2>代码</h2>
    <p>使用 samp 元素包含电脑输出的内容:</p>
    <p><samp>This text is output from a computer program....</samp></p>
</div>

这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值