bootstrap聪明在哪里（CSS）

最近在看bootstrap，深深感受到别人家程序员的聪明和严谨，私以为bootstrap的精华之处在于对各种CSS样式的灵活运用和各个规则的巧妙严谨组合。非前端的程序员可以用它来实现快速的网页编写，但是前端程序员却可以从中学到对前端样式的规则的巧妙组合运用。

一.移动先行-根据屏幕大小选择样式

CSS样式的选择顺序是有规则的，内置样式>外联样式>代理样式，在没有内置样式的情况下，如果外联样式出现了重复，那么就选择最后出现的。

移动先行，一个最明显的体现就是把对于小屏幕的样式放在最前面，作为默认样式出现。对于其他屏幕的样式按照从小到大用min-width进行选择，这样的巧妙之处在于我用max-width和min-width选择屏幕的时候，人家运用后面覆盖前面的规则和一个min-width就解决了不同屏幕样式的选择。 

二.12栅格系统-元素按比例偏移可以这样

12栅格系统是bootstrap的基础，说白了就是平分行，这个设计中最让我亮眼的是它把所有col-样式的position都设置为了relative，这样，在想实现col-元素的偏移时，就可以不用margin，而是采用left，需要的偏移和col-元素本身具有的margin不会打架。

三.样式套样式，不能忘了互相之间的影响

css里面一个比较常出现的问题就是外边距，有时候可能一行里的每个元素之前都有一定外边距，但是头尾元素和外部边框则没有外边距。这个时候bootstrap会采用在头尾元素消除与外边框外边距的方式来进行处理。

翻看源代码可以发现，对于首尾元素，bootstrap都是小心做了处理的。

四.无处不在的css的规则顺序

前面已经说到了，CSS的样式选择是有顺序的，作用于同一元素的样式（仅指只存在外联样式表的时候），如果发生了冲突会优先选择后面的。因为存在这样的问题，bootstrap在编写顺序上也是用了心的。当然，在运用bootstrap的时候，如果发现某个类不起作用了，那么不排除是因为作用于同一元素的其他类和它有冲突并且在样式表中较后出现。