欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。

教程  Bootstrap学习(五)--Bootstrap的代码

H框架 本站 414 0评论

代码块


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>

实例展示如下图:

111.jpg

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


变量


通过 <var> 标签标记变量。

y = mx + b

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

 

程序输出


通过 <samp> 标签来标记程序输出的内容。

This text is meant to be treated as sample output from a computer program.

Copy

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


一般使用 <pre> 标签来包裹多行代码,这会保证代码中的回车、换行、空格、制表符等原有格式不变。Bootstrap也为多行代码添加了背景颜色和边框。


从美观方面考虑,还可以对源代码进行语法高亮显示。网上有很多这样的插件,最著名的非 google 的 code prettify 插件莫属。这个插件非常好用,只需导入它的样式表和JS文件,并为 <pre> 标签添加 .prettyprint 类即可。如果要为源代码添加行号,再追加一个 .linenums 类就行了。如:

<pre class="prettyprint linenums">
$(function() {
   $("#view").toggle(function() {
       $("nav").hide();
       $("[id=show]:checkbox").attr("checked", false);
   },function() {
       $("nav").show();
       $("[id=show]:checkbox").attr("checked", true);
   });
});
</pre>

效果如图 3‑21所示:

222.png


元素/

描述

<var>

变量赋值: x = ab + y

<kbd>

按键提示: CTRL + P

<pre>

多行代码

<pre>

多行代码带有滚动条

<samp>

电脑程序输出: Sample output

<code>

同一行代码片段: span, div


参考网址:

https://v3.bootcss.com/css/#code

https://www.runoob.com/bootstrap/bootstrap-code.html


转载请注明: ITTXX.CN--分享互联网 » Bootstrap学习(五)--Bootstrap的代码

最后更新:2020-04-14 18:40:38

赞 (1) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽