一、bootstrap样式

在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时更要注意。

//lxy补充:今天看openstack的kilo版本horizon发现也是全部重置border-box。可能这是个趋势吧

二、例子

举例:做一个展开收缩的div。

代码如下:

<!DOCTYPE html>
<meta charset="utf-8" />
<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> -->
<style type="text/css">
#tabslide{
position: absolute;
width: 200px;
height: 400px;
background-color: green;
border:4px solid blue;
margin: 50px auto 0;
right: 0;
}
#fold{
position: absolute;
margin: -50px 0 0 0;
} </style>
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
function changeSize(){
if($("#tabslide").width() == 200){
$("#tabslide").css("width", "300px");
$("#fold").html("-unexpand");
}else{
$("#tabslide").css("width", "200px");
$("#fold").html("+expand");
}
}
</script>
<div id="tabslide">
<button id="fold" onclick="changeSize()" >+expend</button>
</div>

效果:点"+expand"按钮div宽度增大,点"-unexpand"div宽度缩小。

取消注释,引入bootstrap.min.css,就失效了,原因就是上面说的

* {
    box-sizing: border-box;
}
使得div的width:200px设置的是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。

这种方法是我推荐使用的,没有什么后顾之忧。

完整代码:

<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<style type="text/css">
#tabslide{
position: absolute;
width: 200px;
height: 400px;
background-color: green;
border:4px solid blue;
margin: 50px auto 0;
right: 0;
/* 方法二 box-sizing:content-box;*/
}
#fold{
position: absolute;
margin: -50px 0 0 0;
} </style>
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
function changeSize(){
$("#tabslide").css("box-sizing", "content-box");//方法三
// if($("#tabslide").width() == 192){ //方法一
if($("#tabslide").width() == 200){
$("#tabslide").css("width", "300px");
$("#fold").html("-unexpand");
}else{
$("#tabslide").css("width", "200px");
$("#fold").html("+expend");
}
}
</script>
<div id="tabslide">
<button id="fold" onclick="changeSize()" >+expend</button>
</div>

三、题外话

上面代码中expand拼写写错了,写成了expend。本来准备修改,结果还有别的问题就在此一吐为快。

expand:意思”展开“。

expend:意思“消费”。

还有一点是“unexpand”根本没有这个单词。这也是我写这段废话的原因。

我专门查了一下expand的反义词应该是shrink:意思"收缩"。

【经评论中小伙伴告知,一般情况用的是"展开(expand)"和"折叠(collapse)",哎,这英文捉急啊~】

ps:确实应该是expand和collapse,比如XenCenter中虚拟机属性部分就是Expand all和Collapse all。【2015/8/24】

因为改的是别人写的代码,我很无奈,只是提醒大家一点,以后写代码尽量写英文,不懂就多查查有道也好。这样别人看你代码不会至少可以多学个单词,而不是误导别人,比如这里"unexpand"。

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/4615897.html有问题欢迎与我讨论,共同进步。

使用Bootstrap v3.3.4注意细节box-sizing的更多相关文章

  1. 免费下载!Twitter Bootstrap V3 矢量界面素材

    Bootstrap 3 Vector UI Kit 包含所有矢量格式的 Twitter Bootstrap 3 界面控制元素.Glyphicons 以及额外的一些界面素材,而且基本的图形元素都切好图了 ...

  2. Bootstrap(v3.2.0)模态框(modal)垂直居中

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

  3. Bootstrap V3使用Tab标签

    Bootstrap V3使用Tab标签 >>>>>>>>>>>>>>>>>>>> ...

  4. 全球第一本基于Bootstrap V3.x的图书《深入理解Bootstrap》终于上市了,再次免费送书15本【活动结束】

    先说活动规则,再说书的事 经过将近1年的努力,终于有了第一本自己独立编写的书:<深入理解Bootstrap>,基于最新版V 3.1 ,侧重于源码详解.架构分析.插件扩展(全新开发)实战.为 ...

  5. CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  6. Box Model,边距折叠,内联和块标签,CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

  7. 【读书笔记《Bootstrap 实战》】2.作品展示站点

    假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这 ...

  8. CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  9. 【Bootstrap】2.作品展示站点

    假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这 ...

随机推荐

  1. AngularJs学习第一课 Hello World

    首先先介绍一下:AngularJS是干什么的. AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了 ...

  2. 过去几个月出炉的30款最喜欢的 jQuery 插件

    在这篇文章中,我们收集了一些在过去的几个月里最喜欢的 jQuery 插件.为了使您更容易搜索到自己喜欢的 jQuery 插件,我们已经对插件进行了分类: 页面布局插件,图片和视频插件,滑块和画廊,排版 ...

  3. 今日推荐:10款在 Web 开发中很有用的占位图片服务

    设计网站时,将要使用的图像在一开始通常还不存在,这个时候布局是最重要的.然而,图像的尺寸通常是预先设置,实用一些占位图像可以帮助我们更好地预览和分析布局. 如今,有免费的占位图片自动生成工具可以使用, ...

  4. [deviceone开发]-echart的简单报表示例

    一.简介 echart是一个常用的基于h5的报表库.这个例子简单展示了实现折线图,柱状图,圆环图和圆饼图的使用. 并实现和do的非html部分的数据交互. 二.效果图 三.相关下载 https://g ...

  5. 腾讯用过的插件jQuery twentytwenty 效果对比

    在线实例 左右对比 上下对比 使用方法 <div class="twentytwenty-container">     <img src="/api/ ...

  6. Chrome 控制台console的用法

    下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用. 目前控制台方法和属性有: ["$$", "$x", "dir" ...

  7. SharePoint 2013 VSS 编写器

    Windows Server 包含的 VSS 是提供内置卷影复制功能的基础结构.VSS 创建的卷影副本扩展了存储管理员的磁带备份存档解决方案,提供可轻松.有效创建和还原的高保真时间点副本,从而帮助简化 ...

  8. JEPF 3.1.2 发布,我们的软件机床(软件快速开发平台)

    JEPF新一代软件快速开发平台(Java Elephant Platform)是一款优秀的平台产品,它本着灵活.快捷开发.高性能.高协作性.高稳定性.高可用性.人性化的操作体验为设计宗旨历经2年研发成 ...

  9. 通过Map 3D API读取线状要素的节点坐标

    By Daniel Du 在Map 3D中可以使用Create from Geometry命令把AutoCAD实体转换成Map 3D中的FDO要素,比如可以把AutoCAD的polyline转换成FD ...

  10. DirectX标准规定 DirectX和OpenGL的不同

    DirectX标准规定 DirectX使用左手坐标系. X轴正向指向右,Y轴正向指向上,Z轴正向垂直纸面向内. 编写Direct3D应用程序时,通常只使用4×4的矩阵和1×4的行向量,相乘时行向量在前 ...