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函数定义的几种区别小结
Jan 06 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 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中如何在有限的内存中读取大文件
2013/07/02 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
python爬虫爬取网页表格数据
2018/03/07 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
小学毕业感言50字
2014/02/16 职场文书
导师推荐信范文
2014/05/09 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL
Python中的 enumerate和zip详情
2022/05/30 Python