ホームページ > 記事 > ウェブフロントエンド > Bootstrap v3.3.4 を使用した細部への注意 box-sizing_html/css_WEB-ITnose
Bootstrap v3.3.4 を使用した細部への注意 box-sizing_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:41:561253ブラウズ
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 であることを確認しました。
【コメントで友達から教えてもらいましたが、「展開」と「縮小」は一般的に使われています、ああ、英語はとても緊急です〜]
他の人が書いたコードが修正されているので、とても心配です。今後コードを書くときは英語で書くように努めてください。理解できない場合は調べてください。こうすることで、他の人があなたのコードを見たときに、少なくともここでの「展開解除」など、他の人を誤解させるのではなく、より多くの単語を学ぶことができます。