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

baidu博客的编辑友情链接的新的层窗口！经典～支持【FF】

Feb 09 Javascript

JavaScript 异步调用框架 (Part 3 - 代码实现)

Aug 04 Javascript

jQuery 连续列表实现代码

Dec 21 Javascript

jQuery中 prop() attr()使用详解

May 19 Javascript

jQuery实现延迟跳转的方法

Jun 05 Javascript

jQuery模拟select实现下拉菜单功能

Jun 20 Javascript

微信小程序 Image API实例详解

Sep 30 Javascript

Bootstrap媒体对象学习使用

Mar 07 Javascript

Chrome调试折腾记之JS断点调试技巧

Sep 11 Javascript

JavaScript递归函数定义与用法实例分析

Jan 24 Javascript

vue中实现上传文件给后台实例详解

Aug 22 Javascript

vue+webpack 更换主题N种方案优劣分析

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

thinkphp使用phpmailer发送邮件的方法

2014/11/24 PHP

使用php转义输出HTML到JavaScript

2015/03/27 PHP

PHP获取用户客户端真实IP的解决方案

2016/10/10 PHP

QQ邮箱的一个文本编辑器代码

2007/03/14 Javascript

Firefox下提示illegal character并出现乱码的原因

2010/03/25 Javascript

基于jQuery的树控件实现代码(asp.net+json)

2010/07/11 Javascript

JavaScript中的排序算法代码

2011/02/22 Javascript

jquery索引在使用中的一些困惑

2013/10/24 Javascript

给js文件传参数(详解)

2014/07/13 Javascript

JS给超链接加确认对话框的方法

2015/02/24 Javascript

JavaScript探测CSS动画是否已经完成的方法

2016/08/30 Javascript

JS字符串和数组如何实现相互转化

2020/07/02 Javascript

python实现socket端口重定向示例

2014/02/10 Python

简单说明Python中的装饰器的用法

2015/04/24 Python

老生常谈Python序列化和反序列化

2017/06/28 Python

python实现读取excel写入mysql的小工具详解

2017/11/20 Python

python三引号输出方法

2019/02/27 Python

python变量的存储原理详解

2019/07/10 Python

python 两种方法修改文件的创建时间、修改时间、访问时间

2020/09/26 Python

使用CSS3 制作一个material-design 风格登录界面实例

2016/12/12 HTML / CSS

html5+css3进度条倒计时动画特效代码【推荐】

2016/03/08 HTML / CSS

AmazeUI 缩略图的实现示例

2020/08/18 HTML / CSS

英国创新设计文具、卡片和礼品包装网站：Paperchase

2018/07/14 全球购物

意大利折扣和优惠券网站：Groupalia

2019/10/09 全球购物

应聘医药代表职位求职信

2013/10/21 职场文书

证券期货行业个人的自我评价

2013/12/26 职场文书

一年级学生评语

2014/04/23 职场文书

全国文明单位申报材料

2014/05/31 职场文书

助人为乐好少年事迹材料

2014/08/18 职场文书

关于感恩的演讲稿400字

2014/08/26 职场文书

购房协议书范本（无房产证）

2014/10/07 职场文书

2015年维修工作总结

2015/04/25 职场文书

2015年保险公司内勤工作总结

2015/05/23 职场文书

2015年信息中心工作总结

2015/05/25 职场文书

小王子读书笔记

2015/06/29 职场文书

MySQL连接查询你真的学会了吗？

2021/06/02 MySQL