ブートストラップ CSS の概要
この章では、Web 開発をより良く、より速く、より強力にするためのベスト プラクティスを含む、Bootstrap の基礎となる構造の重要な部分について説明します。
HTML 5 ドキュメント タイプ (Doctype)
Bootstrap は、いくつかの HTML5 要素と CSS プロパティを使用します。これらが正しく動作するには、HTML5 ドキュメント タイプ (Doctype) を使用する必要があります。 したがって、ブートストラップを使用してプロジェクトの先頭に次のコード スニペットを含めます。
<!DOCTYPE html> <html> .... </html>
Bootstrap によって作成された Web ページの先頭で HTML5 ドキュメント タイプ (Doctype) を使用しない場合、ブラウザーの表示に不整合が発生する可能性があり、特定の状況では不整合が発生する可能性があるため、コードを実行できなくなります。 W3C 標準検証に合格します。
モバイルファースト
モバイルファーストは、Bootstrap 3 の最も重要な変更です。
以前の Bootstrap バージョン (2.x まで) では、プロジェクト全体をモバイル対応にするために別の CSS を手動で参照する必要がありました。
今は違います。Bootstrap 3 のデフォルト CSS 自体はモバイル対応です。
Bootstrap 3 はモバイルを第一に、デスクトップを第二に設計されています。モバイルデバイスを使用するユーザーがますます増えているため、これは実際には非常にタイムリーな変化です。
Bootstrap によって開発された Web サイトをモバイル対応にし、適切な描画とタッチ スクリーンのスケーリングを確保するには、以下に示すように、Web ページの先頭に viewport メタ タグを追加する必要があります:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width属性はデバイスの幅を制御します。ウェブサイトがさまざまな画面解像度のデバイスで表示されることを想定して、device-width に設定すると、さまざまなデバイスで正しくレンダリングされます。
initial-scale=1.0 Web ページが読み込まれるときに、スケーリングなしで 1:1 の比率でレンダリングされることを確認します。
モバイルブラウザでは、user-scalable=noをviewportメタタグに追加することでズーム機能を無効にすることができます。
通常、maximum-scale=1.0は user-scalable=no とともに使用されます。ズームを無効にすると、ユーザーはスクロールのみできるようになり、Web サイトがネイティブ アプリのように見えます。
この方法はすべての Web サイトに推奨されるわけではないことに注意してください。それでも、実際の状況によって異なります。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
レスポンシブ画像
<img src="..." class="img-responsive" alt="响应式图像">
img-sensitive クラスを追加することで、Bootstrap 3 の画像をより使いやすくし、レスポンシブ レイアウトをサポートすることができます。
次に、このクラスに含まれる CSS 属性を見てみましょう。
以下のコードでは、img-owned クラスが max-width: 100% と height: auto; 属性を画像に割り当てていることがわかります。これにより、画像がそのサイズを超えずに比例的に拡大縮小されます。親要素。
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}これは、関連付けられた画像が inline-block としてレンダリングされることを示します。要素の表示プロパティを inline-block に設定すると、要素は周囲のコンテンツに対してインラインでレンダリングされますが、インラインとは異なり、この場合は幅と高さを設定できます。
height:autoを設定すると、関連する要素の高さはブラウザーによって異なります。
max-widthを 100% に設定すると、width 属性で指定された幅がオーバーライドされます。これにより、画像がよりわかりやすくなり、レスポンシブなレイアウトをサポートできるようになります。 グローバル表示、レイアウト、リンク
基本的なグローバル表示
Bootstrap 3 は、
body {margin: 0;}を使用してボディのマージンを削除します。 本文の次の設定を参照してください:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}最初のルールは、本文のデフォルトのフォント スタイルを
"Helvetica Neue"、Helvetica、Arial、sans-serifに設定します。 2 番目のルールは、テキストのデフォルトのフォント サイズを 14 ピクセルに設定します。
3 番目のルールは、デフォルトの行の高さを 1.428571429 に設定します。
4 番目のルールは、デフォルトのテキストの色を #333333 に設定します。
最後のルールは、デフォルトの背景色を白に設定します。
タイポグラフィ
@font-family-base、@font-size-base、@line-height-base プロパティをタイポグラフィ スタイルとして使用します。
リンク スタイル
@link-color 属性を通じてグローバル リンクの色を設定します。
リンクのデフォルトのスタイルについては、次のように設定します:
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}したがって、マウスがリンク上にある場合、またはクリックされたリンク上にある場合、色は #2a6496 に設定されます。同時に下線が表示されます。
さらに、クリックされたリンクには、カラーコード #333 の細い点線の輪郭が表示されます。もう 1 つのルールは、アウトラインを 5 ピクセル幅に設定することです。Webkit ベースのブラウザーの場合は、
-webkit-focus-ring-colorブラウザー拡張機能があります。アウトライン オフセットは -2 ピクセルに設定されます。 上記のスタイルはすべて scaffolding.less にあります。
ブラウザ間の不整合を回避する
Bootstrap は、Normalize を使用してブラウザ間の整合性を確立します。
Normalize.css は、HTML 要素のデフォルトのスタイルにおけるブラウザー間の一貫性を向上させる小さな CSS ファイルです。
Container
<div class="container"> ... </div>
Bootstrap 3 の
container クラスは、ページ上のコンテンツをラップするために使用されます。 bootstrap.css ファイル内のこの .container クラスを見てみましょう。 .container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
} 上記のコードにより、コンテナの左右のマージン (margin-right、margin-left) がブラウザによって決定されます。
パディングは固定幅であるため、デフォルトではコンテナはネストできないことに注意してください。
.container:before,
.container:after {
display: table;
content: " ";
}これにより、疑似要素が生成されます。
displayを table に設定すると、匿名のテーブルセルと新しいブロック書式設定コンテキストが作成されます。 :before 疑似要素は上部マージンの崩壊を防ぎ、:after 疑似要素はフロートをクリアします。
conteneditable 属性が HTML に存在する場合、Opera のバグにより、上記の要素の周囲にスペースが作成されます。これは、content: " " を使用することで修正できます。 .container:after {
clear: both;
}これは疑似要素を作成し、すべてのコンテナーにすべての浮動要素が含まれるようにします。
Bootstrap 3 CSS には、応答に適用されるメディア クエリがあり、グリッド システムに一致するように、コンテナの最大幅がさまざまなメディア クエリしきい値内に設定されます。
@media (min-width: 768px) {
.container {
width: 750px;
}ブートストラップ ブラウザ/デバイスのサポート
ブートストラップは、最新のデスクトップ システムとモバイル ブラウザで適切に動作します。
古いブラウザは十分にサポートされていない可能性があります。
次の表は、Bootstrap がサポートするブラウザとプラットフォームの最新バージョンを示しています。
| 該当なし | いいえ | 該当なし | iOS | ||
|---|---|---|---|---|---|
| 該当なし | 該当なしいいえ | はい | Mac OS X | ||
| はい | 該当なしYES | YES | Windows | ||
| YES | YES*YES | NO | * rap は Internet Explorer 8 以降のバージョンの IE ブラウザをサポートします。 | ||
