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

JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器

Dec 12 Javascript

jquery live()调用不存在的解决方法

Feb 26 Javascript

js键盘事件的keyCode

Jul 29 Javascript

iframe里使用JavaScript控制主页转向的方法

Apr 03 Javascript

javascript消除window.close()的提示窗口

May 20 Javascript

快速学习JavaScript的6个思维技巧

Oct 13 Javascript

js实现简单的省市县三级联动效果实例

Feb 18 Javascript

JavaScript事件代理和委托详解

Apr 08 Javascript

jQuery实现导航高亮的方法【附demo源码下载】

Nov 09 Javascript

vue 清空input标签中file的值操作

Jul 21 Javascript

uniapp开发小程序的经验总结

Apr 08 Javascript

基于angular实现树形二级表格

Oct 16 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

用ＰＨＰ和ＡＣＣＥＳＳ写聊天室(四)

2006/10/09 PHP

浅析php中如何在有限的内存中读取大文件

2013/07/02 PHP

php中ob_get_length缓冲与获取缓冲长度实例

2014/11/20 PHP

推荐几个开源的微信开发项目

2014/12/28 PHP

PHP实现的简单分页类及用法示例

2016/05/06 PHP

微信公众平台开发-微信服务器IP接口实例（含源码）

2017/03/05 PHP

AJAX的跨域与JSONP(为文章自动添加短址的功能)

2010/01/17 Javascript

jquery.validate使用攻略第五步正则验证

2010/07/01 Javascript

JS文本框追加多个下拉框的值的简单实例

2013/07/12 Javascript

jQuery热气球动画半透明背景的后台登录界面代码分享

2015/08/28 Javascript

jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法

2015/11/23 Javascript

javascript时间差插件分享

2016/07/18 Javascript

实现隔行换色效果的两种方式【实用】

2016/11/27 Javascript

JavaScript日期对象(Date)基本用法示例

2017/01/18 Javascript

three.js快速入门【推荐】

2017/01/21 Javascript

详解如何使用Vue2做服务端渲染

2017/03/29 Javascript

深入Node TCP模块的理解

2019/03/13 Javascript

Python EOL while scanning string literal问题解决方法

2020/09/18 Python

python批量添加zabbix Screens的两个脚本分享

2017/01/16 Python

Python3安装Pymongo详细步骤

2017/05/26 Python

matplotlib绘图实例演示标记路径

2018/01/23 Python

python自动12306抢票软件实现代码

2018/02/24 Python

在Windows中设置Python环境变量的实例讲解

2018/04/28 Python

使用Python通过win32 COM实现Word文档的写入与保存方法

2018/05/08 Python

浅谈flask源码之请求过程

2018/07/26 Python

python3+selenium实现qq邮箱登陆并发送邮件功能

2019/01/23 Python

python 自动批量打开网页的示例

2019/02/21 Python

python不到50行代码完成了多张excel合并的实现示例

2020/05/28 Python

基于Keras 循环训练模型跑数据时内存泄漏的解决方式

2020/06/11 Python

解决html5中video标签无法播放mp4问题的办法

2017/05/07 HTML / CSS

Molly Bracken法国电子商店：法国女性时尚品牌

2019/07/24 全球购物

机关党建工作汇报材料

2014/08/20 职场文书

我的中国心演讲稿

2014/09/04 职场文书

员工激励培训演讲稿

2014/09/16 职场文书

司法工作人员群众路线对照检查材料思想汇报

2014/09/30 职场文书

如何写好一份优秀的工作总结？

2019/06/21 职场文书