Bootstrap系列之代码


此文档和实例用于展示如何使用 Bootstrap 展示行内代码和多行代码块。

1、行内代码

<code> 包裹行内代码片段。请确保转义 HTML 代码中尖括号。

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

效果如图:

在这里插入图片描述

2、代码块

<pre> 包裹多行代码。再次注意,请确保转义代码中的尖括号,以便正确展示。你还可以选择性地添加 .pre-scrollable 类,实现垂直滚动,并且设定的最大高度为 340px。

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

效果如图:

在这里插入图片描述

3、<var> 变量标签

使用 <var> 标签标识变量。

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

效果如图:

在这里插入图片描述

4、用户输入

<kbd> 标签通常用来标明键盘输入。

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

效果如图:

在这里插入图片描述

5、示例输出

<samp> 标签指示程序的示例输出。

<samp>This text is meant to be treated as sample output from a computer program.</samp>

效果如图:

在这里插入图片描述


后记

如果你感觉文章不咋地//(ㄒoㄒ)//,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※!!!

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_62277266/article/details/125011418