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

理解Javascript_08_函数对象

Oct 15 Javascript

cookie的复制与使用记住用户名实现代码

Nov 04 Javascript

js数组转json并在后台对其解析具体实现

Nov 20 Javascript

ie 7/8不支持trim的属性的解决方案

May 23 Javascript

javascript实现的上下无缝滚动效果

Sep 19 Javascript

Vue全局分页组件的实现代码

Aug 10 Javascript

JS封装的模仿qq右下角消息弹窗功能示例

Aug 22 Javascript

小程序开发中如何使用async-await并封装公共异步请求的方法

Jan 20 Javascript

基于vue实现图片验证码倒计时60s功能

Dec 10 Javascript

JavaScript代码异常监控实现过程详解

Feb 17 Javascript

封装Vue Element的table表格组件的示例详解

Aug 19 Javascript

JavaScript实现原型封装轮播图

Dec 27 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

咖啡磨器如何选购一台适合家用的意式磨豆机

2021/03/05 新手入门

个人站长制做网页常用的php代码

2007/03/03 PHP

PHP统计目录下的文件总数及代码行数（去除注释及空行）

2011/01/17 PHP

php获取、检查类名、函数名、方法名的函数方法

2015/06/25 PHP

学习php设计模式 php实现策略模式(strategy)

2015/12/07 PHP

PHP实现模拟http请求的方法分析

2017/12/20 PHP

php实现图片压缩处理

2020/09/09 PHP

你的编程语言可以这样做吗？

2006/09/07 Javascript

浅说js变量

2011/05/25 Javascript

XMLHttpRequest处理xml格式的返回数据(示例代码)

2013/11/21 Javascript

JavaScript+CSS控制打印格式示例介绍

2014/01/07 Javascript

javascript实现单击和双击并存的方法

2014/12/13 Javascript

jQuery中size()方法用法实例

2014/12/27 Javascript

SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的

2015/12/10 Javascript

jQuery Validate插件实现表单验证

2016/08/19 Javascript

Bootstrap 网站实例之单页营销网站

2016/10/20 Javascript

javascript闭包功能与用法实例分析

2017/04/06 Javascript

JavaScript引用类型Date常见用法实例分析

2018/08/08 Javascript

在webstorm开发微信小程序之使用阿里自定义字体图标的方法

2018/11/15 Javascript

图文讲解vue的v-if使用方法

2019/02/11 Javascript

jQuery实现简单的Ajax调用功能示例

2019/02/15 jQuery

nuxt框架中对vuex进行模块化设置的实现方法

2019/09/06 Javascript

vue element-ui实现input输入框金额数字添加千分位

2019/12/29 Javascript

vue中改变滚动条样式的方法

2020/03/03 Javascript

JS实现图片幻灯片效果代码实例

2020/05/21 Javascript

简单讲解Python中的闭包

2015/08/11 Python

Python的Twisted框架中使用Deferred对象来管理回调函数

2016/05/25 Python

Django使用模板后无法找到静态资源文件问题解决

2019/07/19 Python

python实现通过队列完成进程间的多任务功能示例

2019/10/28 Python

Pytorch之contiguous的用法

2019/12/31 Python

Pycharm编辑器功能之代码折叠效果的实现代码

2020/10/15 Python

美国奢侈品在线团购网站：Gilt City

2017/11/16 全球购物

取保候审保证书

2014/04/30 职场文书

观后感的写法

2015/06/19 职场文书

idea编译器vue缩进报错问题场景分析

2021/07/04 Vue.js

python缺失值填充方法示例代码

2022/12/24 Python