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的面向对象的特性实现限制试用期
Aug 04 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
小程序页面动态配置实现方法
Feb 05 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
JavaScript实现随机点名器
Mar 25 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基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
Javascript 读后台cookie代码
2008/09/15 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
python对html过滤处理的方法
2018/10/21 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
行政助理的职责
2013/11/14 职场文书
幼教个人求职信范文
2013/12/02 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
项目合作意向书模板
2014/07/29 职场文书
银行授权委托书范本
2014/10/04 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
创业计划书之餐饮
2019/09/02 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python