脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap CSS布局

Bootstrap CSS布局之代码

 更新时间：2016年12月17日 09:16:28   作者：github_34514750  
这篇文章主要介绍了Bootstrap CSS布局之代码的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Bootstrap对代码显示提供了三种方式：内联代码

1.使用 元素显示单行内联代码

内联代码主要是设置code元素的背景颜色和其内部的文字颜色。

//用法
<code>&lt;body&gt;&lt;/body&gt;</code>

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

2.使用 元素显示用户输入代码

元素包含的内容是表示该内容需要用户键盘输入，所以一般是设置成input 的效果，用法和code类似

//用法
<pre>
&lt;article&gt;
  &lt;h1&gt;Article Heading&lt;/h1&gt;
&lt;/article&gt;
</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);
}

3.使用

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

//用法
<pre>
&lt;article&gt;
  &lt;h1&gt;Article Heading&lt;/h1&gt;
&lt;/article&gt;
</pre>

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

您可能感兴趣的文章:

相关文章

  • 利用JavaScript实现绘制2023新年烟花的示例代码

    利用JavaScript实现绘制2023新年烟花的示例代码

    大家过年好！新春佳节，在这个充满喜悦的日子里，愿新年的钟声带给你一份希望和期待。在这喜庆的日子里，小编和大家分享一个烟花代码，希望大家能够喜欢
    2023-01-01
  • Bootstrap fileinput组件封装及使用详解

    Bootstrap fileinput组件封装及使用详解

    这篇文章主要介绍了Bootstrap fileinput组件封装及使用的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JS实现霓虹灯文字效果的方法

    JS实现霓虹灯文字效果的方法

    这篇文章主要介绍了JS实现霓虹灯文字效果的方法,涉及javascript遍历字符串及页面样式的动态操作技巧,效果非常炫目华丽,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • JS简单实现数组去重的方法分析

    JS简单实现数组去重的方法分析

    这篇文章主要介绍了JS简单实现数组去重的方法,结合具体实例形式分析了javascript数组遍历、判断实现去重复的相关操作技巧与注意事项,需要的朋友可以参考下
    2017-10-10
  • js设置document.domain实现跨域的注意点分析

    js设置document.domain实现跨域的注意点分析

    这篇文章主要介绍了js设置document.domain实现跨域的注意点,较为详细的分析了document.domain跨域的相关技巧,需要的朋友可以参考下
    2015-05-05
  • JavaScript中通过提示框跳转页面的方法

    JavaScript中通过提示框跳转页面的方法

    这篇文章主要介绍了JavaScript中通过提示框跳转页面的方法的相关资料,需要的朋友可以参考下
    2016-02-02
  • JS动态添加Table的TR，TD实现方法

    JS动态添加Table的TR，TD实现方法

    这篇文章主要介绍了JS动态添加Table的TR，TD实现方法,涉及js针对Table中TR、TD节点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • ie与ff下的event事件

    ie与ff下的event事件

    event是ie自带的一个对象，而ff中不存在该对象，只能通过传递参数的方式来模拟event，：（
    2009-09-09
  • js闭包和垃圾回收机制示例详解

    js闭包和垃圾回收机制示例详解

    这篇文章主要给大家介绍了关于js闭包和垃圾回收机制的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • Javascript字符串拼接小技巧(推荐)

    Javascript字符串拼接小技巧(推荐)

    下面小编就为大家带来一篇Javascript字符串拼接小技巧(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06

最新评论