Bootstrap查错工具Bootlint以及Bootstrap常见错误

发表于   |  

查错工具Bootlint

CSS检查工具Bootlint，它是bootstrap官方提供的一个js工具库，用于检测使用Bootstrap的页面中常见的HTML错误、class使用方式的错误，通常这些错误浏览器是检查不出来的。

使用过程中发现，这玩意儿似乎不能指出错误位置，略不爽。

使用时机： 开发、测试阶段

用法：在页面底部写入引入bootlint的脚本：

<script>
    (function () {
        var s = document.createElement("script");
        s.onload = function () {
            bootlint.showLintReportForCurrentDocument([]);
        };
        s.src = "js/bootlint.js";
        document.body.appendChild(s)
    })();
</script>

错误积累

1.
Bootstrap经典错误：

bootlint:  E027  `.table-responsive` is supposed to be used on the table's parent wrapper `<div>`, not on the table itself

table-responsive属性是用于table的父元素而不是用于table元素的

  1. glyphicon图标字体所加的元素必须是一个空元素，否则报错：

    ootlint:  E031  Glyphicon classes must only be used on elements that contain no text content and have no child elements.

3.

bootlint:  W012  `.container` or `.container-fluid` should be the first child inside of a `.navbar`
 jQuery.fn.init[1]

4.
如果没有panel-collapse样式，会报错：

<div id="c1" class="collapse panel-collapse">
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur odio officiis quae quis sit veritatis voluptates. At atque beatae, cum distinctio, dolor eaque eos eveniet ex, exercitationem inventore iure totam?</div>
</div>

5.轮播图内部只允许有一个子元素样式为carousel-inner：

bootlint:  E041  `.carousel` must have exactly one `.carousel-inner` child.
 jQuery.fn.init[1]

6.

7.轮播没写id：

bootlint:  W014  Carousel controls and indicators should use `href` or `data-target` to reference an element with class `.carousel`.
 [a.carousel-control.left, context: a.carousel-control.left, jquery: "2.1.3", constructor: function, selector: "", toArray: function…]
bootlint.js:11521 bootlint:  W014  Carousel controls and indicators should use `href` or `data-target` to reference an element with class `.carousel`.
 [a.carousel-control.right, context: a.carousel-control.right, jquery: "2.1.3", constructor: function, selector: "", toArray: function…]

8.轮播下边的小列表没加轮播的id：

bootlint:  W014  Carousel controls and indicators should use `href` or `data-target` to reference an element with class `.carousel`.

热评文章