Bootstrap3实用教程
2.4.2 代码块
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

排版

源代码

行内代码

代码块

一般使用 <pre> 标签来包裹多行代码块,这会保证代码中的回车、换行、空格、制表符等原有格式不变。Bootstrap也为多行代码添加了背景颜色和边框。

从美观方面考虑,还可以对源代码进行语法高亮显示。网上有很多这样的插件,最著名的非 google 的 code prettify 插件莫属。这个插件非常好用,只需引入它的样式表和JS文件,并为 <pre> 标签添加 .prettyprint 类即可。如果要为源代码添加行号,再追加一个 .linenums 类就行了。如:

<pre class="prettyprint linenums">
$(function() {
   $("#view").toggle(function() {
       $("nav").hide();
       $("[id=show]:checkbox").attr("checked", false);
   },function() {
       $("nav").show();
       $("[id=show]:checkbox").attr("checked", true);
   });
});
</pre>

效果如图 2‑36所示:

多行代码
图2-36 多行代码

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验