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. Example
For 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 1
In 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 2
Set 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 3
In 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. digress
In 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 ".