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 相关文章推荐
JavaScript 无符号右移运算符
Apr 17 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
vue项目中极验验证的使用代码示例
Dec 03 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 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仿discuz分页效果代码
2008/10/02 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
浅谈python字符串方法的简单使用
2016/07/18 Python
python flask实现分页效果
2017/06/27 Python
Python简单基础小程序的实例代码
2019/04/28 Python
flask框架路由常用定义方式总结
2019/07/23 Python
详解Python3 pandas.merge用法
2019/09/05 Python
python中树与树的表示知识点总结
2019/09/14 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
python 装饰器重要在哪
2021/02/14 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
任课老师推荐信范文
2013/11/24 职场文书
卖车协议书
2014/04/21 职场文书
护士节策划方案
2014/05/19 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
艺术节开幕词
2015/01/28 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers