编程 Javascript

Bootstrap CSS布局之代码

Posted in Javascript onDecember 17, 2016

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

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

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

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

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

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

元素包含的内容是表示该内容需要用户键盘输入，所以一般是设置成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);
}

3.使用

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

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

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

Bootstrap CSS布局之代码

- Author -

github_34514750

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

一行代码实现纯数据json对象的深度克隆实现思路

Jan 09 Javascript

javascript使用location.search的示例

Nov 05 Javascript

js获取域名的方法

Jan 27 Javascript

JavaScript中的函数（二）

Dec 23 Javascript

jquery在ie7下选择器的问题导致append失效的解决方法

Jan 10 Javascript

javascript基础语法——全面理解变量和标识符

Jun 02 Javascript

JS封装的选项卡TAB切换效果示例

Sep 20 Javascript

让微信小程序支持ES6中Promise特性的方法详解

Jun 13 Javascript

利用Node.js了解与测量HTTP所花费的时间详解

Sep 22 Javascript

基于jQuery ztree实现表格风格的树状结构

Aug 31 jQuery

VUE基于NUXT的SSR 服务端渲染

Nov 30 Javascript

bootstrap下拉分页样式带跳转页码

Dec 29 Javascript

基于js实现二级下拉联动

Dec 17 #Javascript

文件上传的几个示例分享【推荐】

Dec 16 #Javascript

JavaScript实现格式化字符串函数String.format

Dec 16 #Javascript

详解jQuery uploadify文件上传插件的使用方法

Dec 16 #Javascript

JS搜狐面试题分析

Dec 16 #Javascript

JS重载实现方法分析

Dec 16 #Javascript

概述一个页面从输入URL到页面加载完的过程

Dec 16 #Javascript

You might like

php array_intersect()函数使用代码

2009/01/14 PHP

ThinkPHP学习笔记（一）ThinkPHP部署

2014/06/22 PHP

Thinkphp 框架基础之源码获取、环境要求与目录结构分析

2020/04/27 PHP

laravel admin实现分类树/模型树的示例代码

2020/06/10 PHP

用js实现随机返回数组的一个元素

2007/08/13 Javascript

extjs 学习笔记（二） Ext.Element类

2009/10/13 Javascript

js 获取子节点函数 (兼容FF与IE)

2010/04/18 Javascript

jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果

2011/09/26 Javascript

jquery图片放大功能简单实现

2013/08/01 Javascript

Mac/Windows下如何安装Node.js

2013/11/22 Javascript

javascript中递归函数用法注意点

2015/07/30 Javascript

Webpack 实现 AngularJS 的延迟加载

2016/03/02 Javascript

JavaScript中获取纯正的undefined的方法

2016/03/06 Javascript

聊一聊Vue.js过渡效果

2016/09/07 Javascript

node.JS md5加密中文与php结果不一致的解决方法

2017/05/05 Javascript

关于Vue Webpack2单元测试示例详解

2017/08/14 Javascript

聊聊那些使用前端Javascript实现的机器学习类库

2017/09/18 Javascript

微信小程序开发之IOS和Android兼容的问题

2017/09/26 Javascript

js构造函数创建对象是否加new问题

2018/01/22 Javascript

webpack打包react项目的实现方法

2018/06/21 Javascript

JavaScript创建对象方法实例小结

2018/09/03 Javascript

用原生 JS 实现 innerHTML 功能实例详解

2019/04/03 Javascript

JS合并两个数组的3种方法详解

2019/10/24 Javascript

小程序如何定位所在城市及发起周边搜索

2020/02/11 Javascript

Vue实现穿梭框效果

2020/09/30 Javascript

[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26

2020/11/30 DOTA

解决pyqt中ui编译成窗体.py中文乱码的问题

2016/12/23 Python

python实现监控阿里云账户余额功能

2019/12/16 Python

13个Pandas实用技巧，助你提高开发效率

2020/08/19 Python

荟萃全球保健品：维他购

2018/05/09 全球购物

亚洲最大的运动鞋寄售店：KicksCrew

2020/11/26 全球购物

2014年人民调解工作总结

2014/12/08 职场文书

评先进个人材料

2014/12/29 职场文书

小兵张嘎电影观后感

2015/06/03 职场文书

经营场所使用证明

2015/06/19 职场文书

Mysql数据库group by原理详解

2022/07/07 MySQL