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>

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

Javascript 相关文章推荐
一个用js实现的页内搜索代码
May 23 Javascript
JQuery 学习笔记 选择器之一
Jul 23 Javascript
jQuery chili图片远处放大插件
Nov 30 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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自定义函数实现代码
2011/12/30 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
python进行参数传递的方法
2020/05/12 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
CSS3 边框效果
2019/11/04 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
英国女士家居服网站:hush
2017/08/09 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
学生处主任岗位职责
2013/12/01 职场文书
初中女生自我鉴定
2013/12/19 职场文书
安全教育心得体会
2013/12/29 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
2014年采购部工作总结
2014/11/20 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技