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

跨域请求之jQuery的ajax jsonp的使用解惑

Oct 09 Javascript

利用json获取字符出现次数的代码

Mar 22 Javascript

Javascript图像处理—为矩阵添加常用方法

Dec 27 Javascript

JS原型对象通俗"唱法"

Dec 27 Javascript

深入理解JavaScript系列（47）：对象创建模式（上篇）

Mar 04 Javascript

微信小程序实现签到功能

Oct 31 Javascript

Vue.use()在new Vue() 之前使用的原因浅析

Aug 26 Javascript

Layui table field初始化加载时进行隐藏的方法

Sep 19 Javascript

vue实现在线预览pdf文件和下载（pdf.js）

Nov 26 Javascript

微信小程序点击滚动到指定位置的实现

May 22 Javascript

JavaScript构造函数原理及实现流程解析

Nov 19 Javascript

vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

Feb 26 Vue.js

基于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 备份数据库代码(生成word,excel,json,xml,sql)

2013/06/23 PHP

destoon设置自定义搜索的方法

2014/06/21 PHP

php实现通过ftp上传文件

2015/06/19 PHP

ajax调用返回php接口返回json数据的方法(必看篇)

2017/05/05 PHP

php中pcntl_fork创建子进程的方法实例

2019/03/14 PHP

Yii框架中用response保存cookie，用request读取cookie的原理解析

2019/09/04 PHP

Jquery升级新版本后选择器的语法问题

2010/06/02 Javascript

javascript中的prototype属性实例分析说明

2010/08/09 Javascript

JS获取页面窗口大小的代码解读

2011/12/01 Javascript

jquery 插件开发 extjs中的extend用法小结

2013/01/04 Javascript

JavaScript输入邮箱自动提示实例代码

2014/01/13 Javascript

Angular.Js的自动化测试详解

2016/12/09 Javascript

Webpack+Vue如何导入Jquery和Jquery的第三方插件

2017/02/20 Javascript

前端页面文件拖拽上传模块js代码示例

2017/05/19 Javascript

vue router 跳转时打开新页面的示例方法

2019/07/28 Javascript

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

2020/07/27 Javascript

[02:05]2014DOTA2西雅图邀请赛老队长全明星大猜想谁不服就按进显示器

2014/07/08 DOTA

[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17

2018/08/18 DOTA

python实现sublime3的less编译插件示例

2014/04/27 Python

Python实现简单的语音识别系统

2017/12/13 Python

Android基于TCP和URL协议的网络编程示例【附demo源码下载】

2018/01/23 Python

解决Python selenium get页面很慢时的问题

2019/01/30 Python

Django中celery执行任务结果的保存方法

2019/07/12 Python

Python+Tensorflow+CNN实现车牌识别的示例代码

2019/10/11 Python

python读取与处理netcdf数据方式

2020/02/14 Python

python用TensorFlow做图像识别的实现

2020/04/21 Python

关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题

2020/11/28 Python

Java的五个基础面试题

2016/02/26 面试题

营销主管自我评价怎么写

2013/09/19 职场文书

医院办公室主任职责

2013/12/29 职场文书

5.1手机促销活动

2014/01/17 职场文书

运动会广播稿200米

2014/01/27 职场文书

社区四风存在问题及整改措施

2014/10/26 职场文书

谢师宴学生致辞

2015/07/27 职场文书

java解析XML详解

2021/07/09 Java/Android

vue3 自定义图片放大器效果的示例代码

2022/07/23 Vue.js