编程 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 相关文章推荐

5款Javascript颜色选择器

Oct 25 Javascript

Javascript的常规数组和关联数组对比小结

May 24 Javascript

jQuery判断密码强度实现思路及代码

Apr 24 Javascript

javascript检测浏览器的缩放状态实现代码

Sep 28 Javascript

Jquery Ajax xmlhttp请求成功问题

Feb 04 Javascript

JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法

Jan 03 Javascript

浅谈ES6 模板字符串的具体使用方法

Nov 07 Javascript

深入Vue-Router路由嵌套理解

Aug 13 Javascript

React手稿之 React-Saga的详解

Nov 12 Javascript

vue动态添加路由addRoutes之不能将动态路由存入缓存的解决

Feb 19 Javascript

vue 数据遍历筛选过滤排序的应用操作

Nov 17 Javascript

Javascript实现单选框效果

Dec 09 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读MYSQL中文乱码的解决方法

2006/12/17 PHP

php在多维数组中根据键名快速查询其父键以及父键值的代码

2011/05/07 PHP

php向js函数传参的几种方法

2014/08/10 PHP

PHP实现微信图片上传到服务器的方法示例

2017/06/29 PHP

js中方法重载如何实现？以及函数的参数问题

2013/08/01 Javascript

JavaScript基础知识学习笔记

2014/12/02 Javascript

js实现仿QQ秀换装效果的方法

2015/03/04 Javascript

TinyMCE提交AjaxForm获取不到数据的解决方法

2015/03/05 Javascript

jQuery实现列表的全选功能

2015/03/18 Javascript

jQuery实现鼠标划过添加和删除class的方法

2015/06/26 Javascript

BootStrap中Datetimepicker和uploadify插件应用实例小结

2016/05/26 Javascript

Angular 4.x中表单Reactive Forms详解

2017/04/25 Javascript

解决jQuery ajax动态新增节点无法触发点击事件的问题

2017/05/24 jQuery

vue组件传递对象中实现单向绑定的示例

2018/02/28 Javascript

JS内部事件机制之单线程原理

2018/07/02 Javascript

webpack 最佳配置指北(推荐)

2020/01/07 Javascript

[01:00:25]2018DOTA2亚洲邀请赛3月30日小组赛A组 VG VS Liquid

2018/03/31 DOTA

Python设计模式之抽象工厂模式

2016/08/25 Python

Python学习笔记之解析json的方法分析

2017/04/21 Python

python实现音乐下载器

2018/04/15 Python

Python UnboundLocalError和NameError错误根源案例解析

2018/10/31 Python

python实现高斯(Gauss)迭代法的例子

2019/11/20 Python

在Tensorflow中实现梯度下降法更新参数值

2020/01/23 Python

Python使用pyyaml模块处理yaml数据

2020/04/14 Python

python 画条形图(柱状图)实例

2020/04/24 Python

Python3爬虫中Splash的知识总结

2020/07/10 Python

Python使用内置函数setattr设置对象的属性值

2020/10/16 Python

Shop Apotheke瑞士：您的健康与美容网上商店

2019/10/09 全球购物

党校培训自我鉴定范文

2014/03/20 职场文书

初中生期末评语大全

2014/04/24 职场文书

年度评优评先方案

2014/06/03 职场文书

小学课外活动总结

2014/07/09 职场文书

党支部对照检查材料

2014/08/25 职场文书

英文感谢信范文

2015/01/21 职场文书

运动会闭幕词

2015/01/28 职场文书

2016年教师政治思想表现评语

2015/12/02 职场文书