使用Bootstrap v3.3.4注意细节box-sizing_html/css_WEB-ITnose
在Bootstrap v3.3.4中有下面一条重置样式:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
将所有的元素的默认盒模型box-sizing都设置成了border-box,而现代浏览器的标准默认box model是 content-box。很多第三方其他的UI库,第三方js库用的也是标准的content-box。
了解这点在写某些功能时很重要,尤其是合并使用其他第三方库和bootstrap时更要注意。
二、例子举例:做一个展开收缩的div。
代码如下:
效果:点"+expand"按钮div宽度增大,点"-unexpand"div宽度缩小。
取消注释,引入bootstrap.min.css,就失效了,原因就是上面说的
* {
box-sizing: border-box;
}
使得div的width:300px设置的是border+padding+contentwidth的总宽度,jquery获取的还是contentwidth,所以就失效了。
如果要使用bootstrap框架,上述问题解决方案有三种:
1、方法一
在js代码里将if($("#tabslide").width() == 200)中的200改为192。
这样后期维护会不方便,因为你设置的宽度width为200,判断时却要判断200减去边框,减去padding得到的值。当border或padding修改时又会失效,又要重新计算。
2、方法二
在css中显示设置box-sizing:content-box
#tabslide{ ... box-sizing:content-box;}
比第一种方法好一点,但是万一用到bootstrap的某些样式和box-sizing:border-box相关,又要做改动。
3、方法三
在js中显示设置box-sizing:content-box。
这种方法是我推荐使用的,没有什么后顾之忧。
完整代码:
三、题外话
上面代码中expand拼写写错了,写成了expend。本来准备修改,结果还有别的问题就在此一吐为快。
expand:意思”展开“。
expend:意思“消费”。
还有一点是“unexpand”根本没有这个单词。这也是我写这段废话的原因。
我专门查了一下expand的反义词应该是shrink:意思"收缩"。
【经评论中小伙伴告知,一般情况用的是"展开(expand)"和"折叠(collapse)",哎,这英文捉急啊~】
因为改的是别人写的代码,我很无奈,只是提醒大家一点,以后写代码尽量写英文,不懂就多查查有道也好。这样别人看你代码不会至少可以多学个单词,而不是误导别人,比如这里"unexpand"。
上一篇: 和珅墓前的狮子为何面露凶光?和珅为何成为大清巨贪?
下一篇: cdr怎么设置及螺旋形背景花纹?