Home > Developer > JavaScript
Use Bootstrap v3.3.4 to pay attention to the details of box-sizing and v3.3.4box-sizing
I. bootstrap Style
In Bootstrap v3.3.4, there is the following reset style:
* { -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;}
Set the default box model box-sizing of all elements to border-box, while the Standard box model of modern browsers is content-box. Many Third-Party UI libraries and third-party js libraries use standard content-box.
Understanding this is important when writing some features, especially when merging and using other third-party libraries and bootstrap.
Ii. ExampleFor example, create an expanded and shrunk div.
The Code is as follows:
<!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>
Effect: click "+ expand" to increase the div width, and click "-unexpand" to decrease the div width.
Put it into bootstrap.min.css, and it becomes invalid because it is the one mentioned above.
* {Box-sizing: border-box;} makes the width: 300px of the div set the total width of border + padding + contentwidth, And the contentwidth obtained by jquery is invalid.If you want to use the bootstrap framework, there are three solutions to the above problems:
1. method 1In the js Code, change 200 in if ($ ("# tabslide"). width () = 200) to 192.
This wayPost-maintenance will be inconvenientBecause the width you set is 200, you must judge the value of 200 minus the border, minus the value obtained by padding. When the border or padding is modified, it becomes invalid and needs to be recalculated.
2. method 2Set box-sizing: content-box in css
#tabslide{ ... box-sizing:content-box;}
It is better than the first method, but some bootstrap styles are related to box-sizing: border-box.
3. Method 3In js, set box-sizing: content-box.
I recommend this method and have no worries.
Complete code:
<! 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;/* method 2 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"); // method 3 // if ($ ("# tabslide "). width () = 192) {// method 1 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>View Code 3. digressIn the above Code, the spelling of expand is wrong and written as expend. The modification was prepared, and there were other problems in the results.
Expand: indicates "expand".
Expend: indicates "consumption ".
Another point is that "unexpand" does not have this word at all. This is why I wrote this nonsense.
I specifically checked that the antonym of expand should be shrink: Meaning "shrink ".
I am helpless because I changed the code written by others. I just want to remind you that you should try to write the code in English as much as possible. In this way, you can not learn at least one word in your code, rather than mislead others, such as "unexpand ".
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
