Bootstrap v3.3.4 を使用した細部への注意 box-sizing_html/css

Bootstrap v3.3.4 を使用した細部への注意 box-sizing_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:41:56

オリジナル

1343 人が閲覧しました

1. 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;}

ログイン後にコピー

すべての要素のデフォルトのボックスモデルのボックスサイズを、最新のブラウザの標準である border-box に設定します。ボックスモデルはコンテンツボックスです。多くのサードパーティ UI ライブラリとサードパーティ JS ライブラリも、標準のコンテンツボックスを使用します。

これを理解することは、特定の関数を作成する場合、特に他のサードパーティライブラリとブートストラップを組み合わせる場合に重要です。

2. 例

例: 拡大および縮小する 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 のコメントを解除して導入すると無効になります

* {

div width:300px をボーダー+パディングの合計幅に設定します+contentwidth ですが、jquery は引き続き contentwidth を取得するため、無効です。

ブートストラップフレームワークを使用したい場合、上記の問題には 3 つの解決策があります:

1. 方法 1

js コードで if($("#tabslide").width() を変更します。 == 200) 200 が 192 に変更されました。

これは

設定した幅が200なので後のメンテナンス

に不便ですが、判定する際は200からボーダーとパディングを引いた値で判定しなければなりません。ボーダーまたはパディングが変更されると無効になるため、再計算する必要があります。

2. 方法 2

css で box-sizing:content-box の設定を表示します

最初の方法より少し優れていますが、ブートストラップと box-sizing:border-Box 関連のいくつかのスタイルの場合、しかし、変更する必要もあります。

3. 方法 3

js で box-sizing:content-box を表示して設定します。

この方法は私が推奨するものであり、心配する必要はありません。

完全なコード:

#tabslide{    ...    box-sizing:content-box;}

ログイン後にコピー

3. 余談

上記のコードのexpandのスペルが間違っており、expandと書かれています。本当は修正するつもりだったのですが、他にも問題があることが分かり、ここに吐き出しました。

expand: 「拡張」を意味します。

expend: 「消費」を意味します。

もう一つのポイントは、「展開しない」という言葉がまったくないことです。これが私がこのナンセンスを書いた理由です。

私は特に、expand の対義語が「縮小」を意味する Shrink であることを確認しました。

【コメントで友達から教えてもらいましたが、「展開」と「縮小」は一般的に使われています、ああ、英語はとても緊急です〜]

他の人が書いたコードが修正されているので、とても心配です。今後コードを書くときは英語で書くように努めてください。理解できない場合は調べてください。こうすることで、他の人があなたのコードを見たときに、少なくともここでの「展開解除」など、他の人を誤解させるのではなく、より多くの単語を学ぶことができます。