没有不值得去解决的问题,也没有不值得去学习的技术!

通过 npm 进行安装 Bootstrap v3.3.7

在某一个基于 Bootstrap 的页面上,打开 Run Bootlint 书签,将出现一个弹出窗口,通知您是否检测到问题,如果存在问题,请打开开发人员工具并选择控制台选项卡

1、通过 npm 进行安装 v3,如图1
npm install bootstrap@3

通过 npm 进行安装 v3
图1

2、安装 Grunt,以 编译 CSS 和 JavaScript 文件,由于 npm 安装速度较慢,最终选择 cnpm ,如图2
(1)在全局环境中安装 grunt-cli :npm install -g grunt-cli
(2)进入 /bootstrap/ 根目录,然后执行 cnpm install 命令。npm 将读取 package.json 文件并自动安装此文件中列出的所有被依赖的扩展包。

安装 Grunt,以 编译 CSS 和 JavaScript 文件,由于 npm 安装速度较慢,最终选择 cnpm
图2

3、执行 grunt dist 命令,仅编译 CSS 和 JavaScript 文件,如图3

执行 grunt dist 命令,仅编译 CSS 和 JavaScript 文件
图3

4、安装 Bootlint,其是 Bootstrap 官方所支持的 HTML 检测工具,如图4
cnpm install -g bootlint

安装 Bootlint,其是 Bootstrap 官方所支持的 HTML 检测工具
图4

5、在命令行中执行检测,如图5
bootlint index.html

在命令行中执行检测
图5

6、在浏览器中运行 Bootlint,参考网址:https://github.com/twbs/bootlint ,如图6
(1)在浏览器中创建一个新的书签
(2)设置名称:Run Bootlint
(3)设置网址:
javascript:(function(){var s=document.createElement(“script”);s.onload=function(){bootlint.showLintReportForCurrentDocument([]);};s.src=”https://maxcdn.bootstrapcdn.com/bootlint/latest/bootlint.min.js”;document.body.appendChild(s)})();

7、在某一个基于 Bootstrap 的页面上,打开 Run Bootlint 书签,将出现一个弹出窗口,通知您是否检测到问题,如果存在问题,请打开开发人员工具并选择控制台选项卡,如图7

在某一个基于 Bootstrap 的页面上,打开 Run Bootlint 书签,将出现一个弹出窗口,通知您是否检测到问题,如果存在问题,请打开开发人员工具并选择控制台选项卡
图7

关于作者 · 持续学习与技术实践

我是一名拥有 15 年以上开发经验的技术从业者,自 2013 年起持续运营个人技术博客,记录工作与个人项目中遇到的真实问题,以及解决问题过程中的探索、实践和思考。

除了技术写作,我也在持续开发和维护自己的独立项目,探索新技术和新工具在实际场景中的应用。我始终相信,没有不值得去解决的问题,也没有不值得去学习的技术。

如果这篇文章对你有所帮助,欢迎浏览博客中的其他文章,也欢迎交流技术经验与想法。

关于我  ·  GitHub  ·  邮件联系