bootstrap 好坑啊

为了提高开发效率，减少不必要的劳动，前段时间我学习了下 bootstrap，这个 UI 框架我早已有所耳闻，github star 数能排到第二，所以起初我相信它不会让我失望。便刷了套视频教程，又照着文档把每个样例认真捋了捋，下面说说我对其的学习、使用感受。

学习过程很繁琐，它令我讨厌的第一点就是太多的类和嵌套，类多我勉强可以理解，因为要想定制 css 样式只有不断定义类这一种途径，但各种无用的标签嵌套我就看不出到底有何意义了，它完全可以不用加这么多无用的标签，我觉的一个 html 文档的标签结构应尽量与页面实际渲染出来的各元素嵌套关系保持一致，这是写好一个页面的基本素养，而 bootstrap 繁琐的标签结构完全破坏了这一原则。

其次是它的 css 组件和 js 组件，这里我要说，首先它们很多，然后它们的标签结构炒鸡复杂，第一眼看到基本是晕的，当时理清每个标签的意义着实浪费了我很长时间，然而等我学完后仔细一想，发现真正有用的其实也没几个 ……

第二点是栅格系统，起初在学习阶段我觉得它还是很不错的，每行分为十二列，而只要你愿意，每列又可以再细分为十二列，这很灵活，搭配上 bootstrap 预定义的媒体查询类，可以非常灵活快速的创建响应式页面，但直到今天（没错，就是今天才实际应用）我用它真正切图时，才发现它操蛋的地方。

在我开始切图的第一步——做导航栏时遇到了第一个问题，bootstrap 默认给每列加了 15px 的左右内边距，而且这个内边距还覆盖不了（关于这点比较迷，因为我的样式表是在最后引入的），除非我加 !important，但 !important 众所周知一般不要加，一是书写麻烦，二是会导致后续样式无法覆盖。网上查的解决方法要么是改源码要么是用 -15px 的 margin 抵消掉，后者会带来新的问题，栅格布局的列偏移就是用 margin 实现的，设置 -15px 的 margin 会与列偏移冲突，二者只能选其一，所以只能改源码，我只好利用 ctrl+f and ctrl+h 大法将源码的左右内边距替换为 0px。可是接着我又发现栅格布局的容器 container 默认有个最大宽度 970px，但我并不想要这个宽度，我想要的是自适应 100%，该宽度同样是覆盖不了的，由于 pc、移动端导航栏都是宽度 100%，所以我就用 !important 解决了这个问题。

第二步我开始做侧栏，然后我便又发现 container 的第二个坑——默认居中，而且又是无法覆盖，这时我心态已经崩了，用它一共也没写几行代码，坑倒是一步一遇，直接扔掉 bootstrap 只用 sass 写了。

做个总结，上面我描述了第一次正式使用 bootstrap 切图时遇到的坑以及表达了准备弃坑的想法，但它真的一无是处吗？其实后来想想，还是有那么几点可以用的，不至于完全扔掉，这里我列出目前觉得它还能用的几点。

第一，前面也说过，预定义媒体查询类，即 .visible-*-*、.hidden-* 这两系列类，可以方便的控制元素在不同屏幕下的显示，用于创建响应式页面，这个始终是不错的。

第二，字体图标，即 Glyphicons 系列图标，提供了常用的字体图标，用起来蛮方便。

第三，部分组件，比如按钮、表格、警告框、徽章、进度条，js 组件里的模态框和弹出框、滚动监听、标签页、工具提示，这些还是不错的，用起来不算太麻烦。

目前我能想到的就这三点还比较好，可以用一用，其它的就不知道了，欢迎有想法的朋友在评论区补充。

最后声明一下，虽然它有用，但我还是说它坑的原因是它包含了太多无用的东西，它害学习者（比如我）在学习时花了很多时间去学没用的东西，然而真正能用到的却只有一小部分，这事想想我就觉得难受。

哦，还有一件事，这篇文章是我在睡前花半个多小时，抱着吐糟的心情写的，有些部分可能言辞不当，见谅。