编程 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 美元符冲突的解决方法

Mar 28 Javascript

js实现动态改变字体大小代码

Jan 02 Javascript

JS获取图片lowsrc属性的方法

Apr 01 Javascript

jQuery链式操作实例分析

Nov 16 Javascript

Bootstrap组件系列之福利篇几款好用的组件(推荐)

Jun 23 Javascript

微信小程序 action-sheet详解及实例代码

Nov 09 Javascript

基于JS实现移动端左滑删除功能

Jul 28 Javascript

vue组件 $children,$refs，$parent的使用详解

Jul 31 Javascript

Angular4 反向代理Details实践

May 30 Javascript

Vue核心概念Action的总结

Jan 18 Javascript

详解JS实现简单的时分秒倒计时代码

Apr 25 Javascript

atom-design(Vue.js移动端组件库)手势组件使用教程

May 16 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实现根据字符串生成对应数组的方法

2014/09/22 PHP

yii2项目实战之restful api授权验证详解

2017/05/20 PHP

从数据结构分析看：用for each...in 比 for...in 要快些

2013/04/17 Javascript

各种常用的JS函数整理

2013/10/25 Javascript

JavaScript遍历table表格中的某行某列并打印其值

2014/07/08 Javascript

jquery幻灯片插件bxslider样式改进实例

2014/10/15 Javascript

js字符串完全替换函数分享

2014/12/03 Javascript

基于JavaScript实现网页倒计时自动跳转代码

2015/12/28 Javascript

JavaScript必知必会(十) call apply bind的用法说明

2016/06/08 Javascript

AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题

2017/01/21 Javascript

zTree树形菜单交互选项卡效果的实现方法

2017/12/25 Javascript

element-ui 上传图片后清空图片显示的实例

2018/09/04 Javascript

webpack4 入门最简单的例子介绍

2018/09/05 Javascript

详解如何实现Element树形控件Tree在懒加载模式下的动态更新

2019/04/25 Javascript

echarts大屏字体自适应的方法步骤

2019/07/12 Javascript

layui 动态设置checbox 选中状态的例子

2019/09/02 Javascript

koa-passport实现本地验证的方法示例

2020/02/20 Javascript

nuxt.js服务端渲染中axios和proxy代理的配置操作

2020/11/06 Javascript

使用Python的Tornado框架实现一个一对一聊天的程序

2015/04/25 Python

python构建基础的爬虫教学

2018/12/23 Python

使用python搭建服务器并实现Android端与之通信的方法

2019/06/28 Python

Python表达式的优先级详解

2020/02/18 Python

Python如何用filter函数筛选数据

2020/03/05 Python

Python加速程序运行的方法

2020/07/29 Python

python 5个实用的技巧

2020/09/27 Python

会计自荐书

2013/12/02 职场文书

银行求职自荐信

2014/06/30 职场文书

2014年幼儿园工作总结

2014/11/10 职场文书

2014年化妆品销售工作总结

2014/12/01 职场文书

学生自我评语

2015/01/04 职场文书

年度考核表个人总结

2015/03/06 职场文书

升职自荐信范文

2015/03/27 职场文书

中学生社会实践教育活动总结

2015/05/06 职场文书

2016元旦主持人经典开场白台词

2015/12/03 职场文书

MySQL InnoDB ReplicaSet(副本集)简单介绍

2021/04/24 MySQL

PostgreSQL数据库创建并使用视图以及子查询

2022/04/11 PostgreSQL