ホームページ > 記事 > ウェブフロントエンド > ブートストラップの学習ノート ブートストラップの概要_html/css_WEB-ITnose
ブートストラップの学習ノート ブートストラップの概要_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:30:381141ブラウズ
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">
幅属性はデバイスの幅を制御します。 Web サイトがさまざまな画面解像度のデバイスで表示されることを想定して、Web サイトをデバイス幅に設定すると、さまざまなデバイスで正しくレンダリングされます。
Initial-scale=1.0 は、Web ページが読み込まれるときに、スケーリングなしで 1:1 の比率でレンダリングされることを保証します。
モバイル ブラウザでは、user-scalable=no を viewport meta タグに追加することでズーム機能を無効にできます。
通常、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-sensitiveclass を追加することで、Bootstrap 3 の画像の応答性を高め、レスポンシブ レイアウトのサポートに対応させることができます。
次に、このクラスに含まれる CSS 属性を見てみましょう。
以下のコードでは、img-sensitiveclass が max-width: 100%; 属性と height: auto; 属性を画像に割り当てていることがわかります。これにより、画像は親要素のサイズを超えずに比例的に拡大縮小されます。
.img-responsive { display: inline-block; height: auto; max-width: 100%;} これは、関連する画像がインラインブロックでレンダリングされることを示します。要素の表示プロパティを inline-block に設定すると、要素は周囲のコンテンツに対して相対的にインラインでレンダリングされますが、インラインとは異なり、この場合は幅と高さを設定できます。
高さを自動に設定します。関連する要素の高さはブラウザーによって異なります。
max-width を 100% に設定すると、width 属性で指定された幅がオーバーライドされます。これにより、画像がよりわかりやすくなり、レスポンシブなレイアウトをサポートできるようになります。
グローバル表示、レイアウト、リンク
基本的なグローバル表示
ブートストラップ 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 のコンテナクラスは、ページ上のコンテンツをラップするために使用されます。 bootstrap.css ファイル内のこの .containerclass を見てみましょう。
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;} 通过上面的代码，把 container 的左右外边距（margin-right、margin-left）交由浏览器决定。
请注意，由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。
.container:before,.container:after { display: table; content: " ";} 这会产生伪元素。设置 display为 table，会创建一个匿名的 table-cell 和一个新的块格式化上下文。 :before伪元素防止上边距崩塌， :after伪元素清除浮动。
如果 conteneditable属性出现在 HTML 中，由于一些 Opera bug，围绕上述元素创建一个空格。这可以通过使用 content: " "来修复。
.container:after { clear: both;} 它创建了一个伪元素，并确保了所有的容器包含所有的浮动元素。
Bootstrap 3 CSS 有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为 container 设置了max-width，用以匹配网格系统。
@media (min-width: 768px) { .container { width: 750px;} Bootstrap 浏览器/设备支持
Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。
旧的浏览器可能无法很好的支持。
下表为 Bootstrap 支持最新版本的浏览器和平台：
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | YES | YES | 不适用 | NO | 不适用 |
| iOS | YES | 不适用 | 不适用 | NO | YES |
| Mac OS X | YES | YES | 不适用 | YES | YES |
| Windows | YES | YES | YES* | YES | NO |
* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。