Use Bootstrap v3.3.4 to pay attention to the details of box-sizing and v3.3.4box-sizing

Source: Internet
Author: User

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 ".

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.