Bootstrap系列 -- 8. 代码显示
一. Bootstrap中的代码块
代码块一般在博客中使用的较多,比较博客园中提供的贴代码. 在Bootstrap中提供了三种形式的代码显示
1. 使用<code></code>来显示单行内联代码
2. 使用<pre></pre>来显示多行块代码
3. 使用<kbd></kbd>来显示用户输入代码
二. code 显示
<div class="col-md-offset-2">
Bootstrap的code代码风格:
<code><code></code>
<code><pre></code>
<code><kbd></code>
</div>
效果如下:
三. pre显示
<div>
<pre>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</pre>
</div>
效果图如下:
如果代码块的内容较多,需要显示滚动条效果如何实现呢
<pre class="pre-scrollable">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li><li>...</li>
<li>...</li>
<li>...</li>
</ul>
</pre>
带滚动条的pre
四. kbd 显示
<div>请输入<kbd>ctrl+c</kbd>来复制代码,然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>
效果如下
Bootstrap系列 -- 8. 代码显示的更多相关文章
- Bootstrap<基础四> 代码
Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...
- ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件
阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...
- 反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) C#中缓存的使用 C#操作redis WPF 控件库——可拖动选项卡的TabControl 【Bootstrap系列】详解Bootstrap-table AutoFac event 和delegate的分别 常见的异步方式async 和 await C# Task用法 c#源码的执行过程
反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) 背景介绍: 为了平衡社区成员的贡献和索取,一起帮引入了帮帮币.当用户积分(帮帮点)达到一定数额之后,就会“掉落”一定数量的“帮帮 ...
- Bootstrap系列 -- 9. 表格
一. Bootstrap 表格样式支持 Bootstrap提供了六种不同风格的样式支持,其中一个基础样式,4个附件样式,1个响应式设计样式 1. .table:基础表格 2. .table-strip ...
- ASP.NET MVC使用Bootstrap系列(1)——开始使用Bootstrap
阅读目录 Bootstrap结构介绍 在ASP.NET MVC 项目中添加Bootstrap文件 为网站创建Layout布局页 使用捆绑打包和压缩来提升网站性能 在Bootstrap项目中使用捆绑打包 ...
- Bootstrap列表与代码样式(附源码)--Bootstrap
给大家分享下Bootstrap框架中列表与代码样式相关的知识 1.列表 (1)无序列表 <ul> <li>CN217编程</li> </ul> 注意:u ...
- Bootstrap.之模态框 显示在遮罩层后面
Bootstrap.之模态框 显示在遮罩层后面 问题描述: 在使用bootstrap模态框,弹出的窗口在遮罩层后面,见图: 解决方案: 保证模态框的代码,所在的上一级(父元素)是body标签,即可.例 ...
- ASP.NET MVC使用Bootstrap系列(5)——创建ASP.NET MVC Bootstrap Helpers
阅读目录 序言 内置的HTML Helpers 创建自定义的Helpers 使用静态方法创建Helpers 使用扩展方法创建Helpers 创建Fluent Helpers 创建自动闭合的Helper ...
- bootstrap 分页样式代码
bootstrap 分页样式代码,废话不多说,直接上源码 <!DOCTYPE html> <html> <head> <title>Bootstrap ...
随机推荐
- Sql Server 添加外部程序集基本操作
简介:有时候Sql Server的内置函数没有那么好用的时候,可以引用一下外部程序集,下面献下丑,做下添加外部程序集操作 1.准备程序,编译出一个MyCLR的DLL. public class CLR ...
- Storm系列(一):搭建dotNet开发Storm拓扑的环境
上篇博客比较了目前流行的计算框架特性,如果你是 Java 开发者,那么根据业务场景选择即可:但是如果你是 .Net 开发者,那么三者都不能拿来即用,至少在这篇文章出现之前是如此.基于上篇文章的比较发现 ...
- nginx参数说明
一.nginx的核心配置: >>> 正常运行的必备配置: 1. user username [groupname]; #指定运行worker子进程的用户或组 2. pid /path ...
- DirectX API 编程起步 #01 项目设置
=========================================================== 目录: DirectX API 编程起步 #02 窗口的诞生 DirectX A ...
- IO的多路复用和信号驱动
Linux为多路复用IO提供了较多的接口,有select(),pselect(),poll()的方式,继承自BSD和System V 两大派系. select模型比较简单,“轮询”检测fd_set的状 ...
- 在Python命令行和VIM中自动补全
作者:gnuhpc 出处:http://www.cnblogs.com/gnuhpc/ 1. VIM下的配置: wget https://github.com/rkulla/pydiction/arc ...
- 连接到Windows Azure Point to Site VPN
Windows Azure支持两种模式的VPN接入: Site to Site,接入端需要有固定的公网IP地址,用于连接局域网和Windows Azure的虚拟网络. Point to Site,客户 ...
- 扫描线+堆 codevs 2995 楼房
2995 楼房 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 地平线(x轴)上有n个矩(lou)形(fan ...
- Servlet分页技术
这是看韩顺平老师的servlet视频,自己动手写的,楼主看韩顺平老师的servlet是2006制作的,用的是sql server数据库,自己又用的是oracle数据库,所以怕有的同学遇到同样的问题,不 ...
- POJ 2653 Pick-up sticks【线段相交】
题意:n根木棍随意摆放在一个平面上,问放在最上面的木棍是哪些. 思路:线段相交,因为题目说最多有1000根在最上面.所以从后往前处理,直到木棍没了或者最上面的木棍的总数大于1000. #include ...