当前位置：首页 > 资讯 > 技术文档

Bootstrap CSS布局之代码

时间：2022-12-07 10:27 编辑：来源：阅读：
扫一扫，手机访问

摘要：Bootstrap CSS布局之代码

Bootstrap对代码显示提供了三种方式：内联代码 [b]1.使用 [/b][b]元素显示单行内联代码[/b] 内联代码主要是设置code元素的背景颜色和其内部的文字颜色。

//用法
<code><body></body></code>

//源码
code {
 padding: 2px 4px;
 font-size: 90%;
 color: #c7254e;
 background-color: #f9f2f4;
 border-radius: 4px;
}

[b]2.使用 [/b][b]元素显示用户输入代码[/b] 元素包含的内容是表示该内容需要用户键盘输入，所以一般是设置成input 的效果，用法和code类似

//用法
<pre>
<article>
  <h1>Article Heading</h1>
</article>
</pre>

//源码
kbd {
 padding: 2px 4px;
 font-size: 90%;
 color: #fff;
 background-color: #333;
 border-radius: 3px;
 -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
     box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}

[b]3.使用[/b] 元素新生多行代码块，代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用标签。

//用法
<pre>
<article>
  <h1>Article Heading</h1>
</article>
</pre>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：javascript中创建对象的三种常用方法
下一篇：js中top、clientTop、scrollTop、offsetTop的区别文字详细说明版

资讯排行榜
更多>>