Bootstrap基本チュートリアル

Bootstrapプラグイン

Bootstrap CSS 介绍

この章では、Bootstrapのベース構造の重要な部分、web開発をより良い、より速く、より強くするためのベストプラクティスについて説明します。

HTML 5 ドキュメントタイプ(Doctype)

BootstrapはいくつかのHTMLを使用しています5 要素とCSS属性。これらが正常に動作するためには、HTMLを使用する必要があります5 ドキュメントタイプ(Doctype) したがって、Bootstrapプロジェクトの先頭に以下のコードセクションを含めてください。

<!DOCTYPE　html>
<html>
....
.../html>

Bootstrapで作成したウェブページの先頭にHTMLを使用しない場合5 のドキュメントタイプ(Doctype)を使用すると、一部のブラウザでの表示不一致の問題や、特定の状況での不一致が発生し、コードが通過できない可能性があります。3の標準の確認

モバイルデバイスを優先

の基本方針は、モバイルデバイスを優先します。 3 まで）では、最も顕著な変更点でした。

の前のバージョン（ 2.x)の場合、他の CSS を手動で参照する必要があります。これにより、プロジェクト全体がモバイルデバイスに対応できるようになります。

今や、Bootstrap 3 デフォルトの CSS は既にモバイルデバイスにフレンドリーにサポートしています。

Bootstrap 3 のデザイン目標は、モバイルデバイスを優先し、次にデスクトップデバイスです。これは非常にタイムリーな変化であり、ますます多くのユーザーがモバイルデバイスを使用している現在、これは非常にタイムリーな変化です。

Bootstrapで開発したウェブサイトがモバイルデバイスに対応するように、適切な描画とタッチスクロールを確保するために、ヘッダーに以下を追加する必要があります： viewport meta タグを以下のように使用します：

-width, initial-1.0">

width 属性がデバイスの幅を制御します。あなたのウェブサイトが異なるスクリーン解像度を持つデバイスで閲覧されることを想定している場合、それを device-width を使用することで、異なるデバイス上で正しく表示されることを確保できます。

initial-1.0 ウェブページが読み込まれたときに、 1:1 のサイズに応じて表示され、任何のズームはありません。

モバイルデバイスブラウザ上では、 viewport meta タグに user-scalable=no を無効にすることで、そのズーム機能を無効にできます。

通常、-1.0 と user-scalable=no と一緒に使用すると、ユーザーはスクロールのみが可能になり、ウェブサイトがネイティブアプリのようになることができます。

注意、この方法はすべてのウェブサイトに推奨しません。あなた自身の状況に応じて決定してください！

-width,　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　initial-1.0,　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　-1.0,　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　user-scalable=no">

リスポンシブ画像

<img　src="..."　alt="リスポンシブ画像">

を追加することで img-responsive class は Bootstrap 3 の画像は、リスポンシブレイアウトに対してよりフレンドリーです。

次に、この class がどのような CSS 属性を含んでいるかを見てみましょう。

以下のコードを見てみましょう。img-responsive class は画像に max-width: 100%; そして height: auto; 属性により、画像はその親要素のサイズに応じて縮尺され、そのサイズを超えません。

.img-responsive　{
　　display:　block;
　　height:　auto;
　　max-width:　100%;
}

これは関連する画像が以下のように表示されることを示します。 block。要素のdisplay属性をblockに設定することで、ブロック要素として表示されます。

を設定します。 height:auto関連する要素の高さはブラウザに依存します。

を設定します。 max-width display 100%はwidth属性で指定された幅を上書きします。これは画像がレスポンシブレイアウトをより良くサポートするようにします。

もし .imgを使用して-responsive クラスの画像は水平に中央に配置されるため、.centerを使用してください。-block クラスを使用してください。.textを使用しないでください。-center。

全体的な表示、レイアウト、リンク

基本的な全体的な表示

Bootstrap 3 を使用します。 body {margin: 0;} bodyのマージンを削除するために

bodyに関する設定については以下をご覧ください：

body　{
　　font-family:　"Helvetica　Neue",　Helvetica,　Arial,　sans-serif;
　　font-size:　14left:
　　line-height:　1.428571429;
　　color:　#333333;
　　background-color:　#ffffff;
}

第一の規則は body のデフォルトのフォントスタイルを "Helvetica Neue", Helvetica, Arial, sans-serif.

第二の規則はテキストのデフォルトのフォントサイズを 14 のブラウザ拡張。

第三の規則はデフォルトの行の高さを 1.428571429.

第四の規則はデフォルトのテキストの色を #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-webkit-focus-color;
　　outline-offset:　-2left:
}

したがって、リンクにマウスが悬停している場合やクリックされたリンクの場合、色は #2a6496に設定されます。同時に、下線も表示されます。

これに加えて、クリックされたリンクは色コードが #333 細い点線の輪郭を設定する規則があります。 5 ピクセル幅で、webkit ブラウザ用に -webkit-webkit-focus-ring color -2 のブラウザ拡張。

ピクセル。

以上のすべてのスタイルはscaffolding.lessで見つけることができます。

を使用して、クロスブラウザの不一致を避けます。 Bootstrapは Normalize

をクロスブラウザの一致を確立するために使用されます。

Normalize.cssは非常に小さなCSSファイルで、HTML要素のデフォルトのスタイルでより良いクロスブラウザの一致を提供します。

容器(Container)
　　<div>
.../<

Bootstrap 3 div> の container classはページ上の内容を包むために使用されます。一緒にbootstrap.cssファイル内のこの .container

.container　{
　　　right:-class。　15left:
　　　right:-padding　15left:
　　　right:　auto;-px;
　　　right:　auto;-margin
}

left:　auto;-上記のコードを使用して、containerの左右外側マージン（margin-right、margin

left）はブラウザが決定します。

注意していただきたいのは、内側マージン(padding)が固定幅であるため、デフォルトではコンテナはネストできません。
.container:after　{
　　.container:before,
　　display:　table;
}

content:　"　"; これは仮想要素を作成します。設定 display はtable-、匿名のtableを作成します。cellと新しいブロックフォーマットコンテキストを作成します。 :before仮想要素が上端マージン崩壊を防ぎます。 :after

仮想要素を使用してフロートをクリアする場合、 conteneditable 属性がHTMLに表示され、いくつかのOperaのバグのために、上記の要素の周りにスペースが作成されます。これは、 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	はい	はい	不適用	不適用	不適用
iOS	はい	不適用	不適用	不適用	はい
Mac OS X	はい	はい	不適用	はい	はい
Windows	はい	はい	はい*	はい	不適用

* Bootstrap は Internet Explorer をサポートしています 8 およびそれ以降のバージョンの IE ブラウザ。

Bootstrap 排版 Bootstrap 環境設定