[Bootstrap]7日間Bootstrap(3)CSSレイアウトに深く入り込む
6844 ワード
Bootstrapの3つのコアコンテンツの基礎、すなわち基礎的なCSSレイアウト構文.これには、基礎レイアウト(Typography)、コード(Code)、テーブル(Table)、フォーム(Forms)、ボタン(Buttons)、ピクチャ(Images)、アシストクラス(Helper Classes)、応答設計(Responsive utilities)が含まれる.
このセクションのディレクトリ:概要 基礎レイアウト コード 表 フォーム ボタン 画像 補助様式
概要
HTML 5ドキュメントタイプ
BootstrapはHTML 5固有のHTML要素とCSS属性を使用しているため、Bootstrapを使用する場合、すべてのHTMLファイルがその上部にHTML 5のDOCTYPE属性を参照する必要がある
移動先
モバイルデバイスブラウザでは、viewport metaラベルに追加したuserscalable=noでスケール機能を無効にできます.
レスポンス画像
画像のサイズを適応的にスケーリングするために、Bootstrapは3.x版に1つ追加しました.img-responsiveスタイルは、本質的に画像にmaxwidth:100%を設定します.とheight:auto;ツールバーの
レイアウトとリンク
Bootstrapは、Webページの基本的なグローバルスタイル、レイアウト、リンクスタイルを設定しています. body要素でmargin設定がキャンセルされ、デフォルトは0、margin:0に変更されました. body要素に背景色が白色、background-color:#ffffが設定されています. レイアウトレイアウトにおいて、フォント、フォントサイズ、行間隔で使用する標準値
中央コンテナ
1つのページ(または要素)を中央に表示するには、外部コンテナに簡単に適用できます.containerスタイルでいいです.グリッドシステムは外部コンテナのサイズ設定に依存するため、デフォルトではcontainerスタイルにmax-widthプロパティがあり、グリッドシステムの最大幅を制限します.
ベースレイアウト
見出し
bsは、従来のタイトル要素h 1〜h 6に対して標準的なスタイルを再定義し、すべてのブラウザで表示効果が同じになるようにした.
bsはまた、hクラスのスタイルを提供する.h 1のスタイルはh 1ラベルのスタイルよりも、margin-topとmargin-bottomが定義されていないのとは異なります.
テキスト
bsは、グローバルに設定されたフォントサイズです.
small、strong、em、cite
コンテナ内のテキストの位置合わせ:text-left、text-center、text-right、text-justify
略語:abbr(マウスhoverにtitle値が表示されます)
リスト#リスト#
bsは、一般リスト、秩序リスト、脱点リスト、インラインリスト、記述リスト、水平記述リストの6つの形式のリストを提供する.
一般リスト(ul)、秩序リスト(ol)、脱点リスト(list-unstyled)、記述リスト、水平記述リストは、最適化されただけで、効果は明らかではありません.
インラインリスト(list-inline)は、リスト項目を水平に表示します.水平メニューの効果と同様
コード#コード#
コードスタイルは、通常、コードを参照する必要がある場所に表示されます.
単行のインラインコードにはcode要素が含まれている必要があります.
要素に含まれる内容は、その内容にユーザキーボード入力が必要であることを示すため、一般的にinputに設定された効果であり、使用法はcodeと類似している.
pre要素は、一般に、大きなブロックのコードセグメントを表示し、元のフォーマットが変わらないことを保証するために使用されます.またpre要素に適用することもできる.pre-scrollableスタイルで、この領域の最大高さ340画素を制御でき、y方向にスクロールできる
表
bsは1つの基礎を提供する.tableスタイル、4種類の追加スタイル(.table-striped、.table-bordered、.table-hover、.table-condensed)、および応答レイアウトをサポートする.table-responsiveコンテナスタイル.
.table-stripedスタイルで、行間隔と背景色の設定が追加されています.
.table-borderedテーブルのすべてのセルに1ピクセル幅の枠線を1つ提供
.table-hoverマウスを動かしたときに対応する部分を色に変えられると、動きが出てハイライト表示されます
.table-condensedコンパクトな表、つまり表の表示は普通の表より少しコンパクトで、実現原理はセルの内側の余白を減らすことです
.tableresponsiveスタイルパッケージtableスタイルの外部では、小画面デバイス(768ピクセル未満)で水平にスクロールする応答テーブルが作成されます.
bsは、テーブルのtr要素に5つの基本的な色スタイル(active successinfo warning danger)を提供し、trの背景色を制御する.
フォーム＃フォーム＃
bsフレームワークのコアコンテンツであり、フォームは豊富なスタイル(ベース、インライン、横方向)を提供します.
まず2つの基本スタイルについて
form-control:100%に設定
form-group:下マージンを設定し、各コントロールの表示を保証します.
select、input、textarea要素に適用する場合.form-controlスタイルで表示幅が100%になり、placeholderの色が#999999に設定されています
インラインフォーム
通常のform要素に1つだけ適用するすべてのコントロールが1行のフォームに必要になる場合があります.form-inlineスタイル
横フォーム
インラインフォームの使用方法とは異なり、form要素に簡単に1つ適用することはできない.form-horizontalスタイル.
によってform-horizontalスタイルが変わりました.form-groupの挙動は、グリッドシステムにおける行(row)のように表現するので、これ以上使用する必要はない.rowスタイルになりました.
フォームコントロール
既存のHTML 5構文のinputは、typeがtext、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel、colorの要素など、サポートされています.
Input要素はtypeタイプを宣言する必要があります.そうしないと、他の問題が発生する可能性があります.
select要素、マルチライン選択mulitipleプロパティをmultipleに設定
textarea要素、rows数字を定義すると大きなテキストボックスの高さを定義し、colsを定義して大きなテキストボックスの幅を定義します.
checkboxとradio要素は、input要素の2つの非常に特殊なtypeで、よく文字表示を組み合わせるため、bsは標準表示をしました
checkboxとradioの内容が少ない場合、横方向に表示する必要がある場合はcheckbox-inlineとradio-inlineを使用できます.
コントロールのステータス
bsは、フォーカス状態(デフォルト)、無効状態、検証プロンプト状態の3つの状態のスタイルを使用できます.
使用方法は通常のdisabledと同様に、無効な要素にdisabledプロパティを使用するだけです.
fieldset disabledプロパティを使用すると、内部のコントロールも無効になります.
フォームに記入する際には、ユーザに入力内容が合法かどうかを提示することがよくあり、bsは提供する.has-warning、.has-error、.has-successの3つのスタイル.
(親コンテナのhas-feedbackスタイルは位置決め方法を設定するために使用され、小さなアイコン要素のform-control-feedbackスタイルはアイコンの表示サイズを設定するために使用されます)
コントロールのサイズ
bsは、少し大きいまたは少し小さいinput入力ボックスを設定ための2つのスタイルを提供する.input-lg和.input-sm
ツールバーの
ボタンスタイルで、標準の5色、1つのデフォルト、1つのlinkボタンを定義します.
ボタンサイズは、3種類定義.btn-lg、.btn-sm、.btnxs..btn-blockスタイルは、文字幅に従って変化しない親要素で満たすことができます.
マルチラベル、button a input 3ラベルをサポートします.互換性のためにbuttonを使用することをお勧めします.
Activeおよびdisabledステータスをサポートします.
画像
3種類のスタイル効果を提供し、imgラベルに適用する.img-rounded、.img-circle、.img-thumbnailスタイルでOK
なお、上記のスタイルは、画像の表示サイズを制御ものではないので、画像の表示サイズを制御するために、追加のスタイルを適用するか、親要素のサイズを制限する必要がある.
IE 8および以下のバージョンはサポートされていない.img-rounded和.img-circleスタイルの特効.
補助スタイル
テキスト
テキストスタイル、bsは1つのグレー、および5つの基本標準スタイルの色を提供し、それぞれ、ソフトグレー(text-muted)、プライマリブルー(text-primary)、成功緑(text-success)、情報ブルー(text-info)、警告黄(textwrning)、危険赤(text-danger)である.
テキストバックグラウンドスタイル、bsはまた、主要青(bg-primary)、成功緑(bg-success)、情報青(bg-info)、警告黄(bg-warning)、危険赤(bg-danger)の5種類のテキストカラースタイル対応(mutedスタイルを除く)を提供している.
補助アイコン
アイコンを閉じる(右フローティング)
下矢印
フローティング
コンテンツフローティングでは、pull-left、pull-right、center-blockスタイルに対応する3つの要件(左フローティング、右フローティング、中央揃え)が一般的です.
レスポンススタイル
メディアクエリのプロパティを使用して、特定の状況を非表示または表示にする設定を行います.
.visible-先頭のスタイル表示は、あるサイズの場合にのみ表示され、その他は非表示になります.それでhiddenスタイルは、あるサイズの場合にのみ非表示になり、その他は表示されます.
次のようになります.
ブラウザとプリンタをそれぞれ非表示および表示にする設定visible-printとhidden-printを提供します.
大画面でのみvisble-lgを表示
このセクションのディレクトリ:
概要
HTML 5ドキュメントタイプ
BootstrapはHTML 5固有のHTML要素とCSS属性を使用しているため、Bootstrapを使用する場合、すべてのHTMLファイルがその上部にHTML 5のDOCTYPE属性を参照する必要がある
<!DOCTYPE html>
<html lang="en">
...
</html>
移動先
モバイルデバイスブラウザでは、viewport metaラベルに追加したuserscalable=noでスケール機能を無効にできます.
レスポンス画像
画像のサイズを適応的にスケーリングするために、Bootstrapは3.x版に1つ追加しました.img-responsiveスタイルは、本質的に画像にmaxwidth:100%を設定します.とheight:auto;ツールバーの
レイアウトとリンク
Bootstrapは、Webページの基本的なグローバルスタイル、レイアウト、リンクスタイルを設定しています.
中央コンテナ
1つのページ(または要素)を中央に表示するには、外部コンテナに簡単に適用できます.containerスタイルでいいです.グリッドシステムは外部コンテナのサイズ設定に依存するため、デフォルトではcontainerスタイルにmax-widthプロパティがあり、グリッドシステムの最大幅を制限します.
ベースレイアウト
見出し
bsは、従来のタイトル要素h 1〜h 6に対して標準的なスタイルを再定義し、すべてのブラウザで表示効果が同じになるようにした.
bsはまた、hクラスのスタイルを提供する.h 1のスタイルはh 1ラベルのスタイルよりも、margin-topとmargin-bottomが定義されていないのとは異なります.
テキスト
bsは、グローバルに設定されたフォントサイズです.
small、strong、em、cite
コンテナ内のテキストの位置合わせ:text-left、text-center、text-right、text-justify
略語:abbr(マウスhoverにtitle値が表示されます)
リスト#リスト#
bsは、一般リスト、秩序リスト、脱点リスト、インラインリスト、記述リスト、水平記述リストの6つの形式のリストを提供する.
一般リスト(ul)、秩序リスト(ol)、脱点リスト(list-unstyled)、記述リスト、水平記述リストは、最適化されただけで、効果は明らかではありません.
インラインリスト(list-inline)は、リスト項目を水平に表示します.水平メニューの効果と同様
コード#コード#
コードスタイルは、通常、コードを参照する必要がある場所に表示されます.
単行のインラインコードにはcode要素が含まれている必要があります.
要素に含まれる内容は、その内容にユーザキーボード入力が必要であることを示すため、一般的にinputに設定された効果であり、使用法はcodeと類似している.
pre要素は、一般に、大きなブロックのコードセグメントを表示し、元のフォーマットが変わらないことを保証するために使用されます.またpre要素に適用することもできる.pre-scrollableスタイルで、この領域の最大高さ340画素を制御でき、y方向にスクロールできる
表
bsは1つの基礎を提供する.tableスタイル、4種類の追加スタイル(.table-striped、.table-bordered、.table-hover、.table-condensed)、および応答レイアウトをサポートする.table-responsiveコンテナスタイル.
.table-stripedスタイルで、行間隔と背景色の設定が追加されています.
.table-borderedテーブルのすべてのセルに1ピクセル幅の枠線を1つ提供
.table-hoverマウスを動かしたときに対応する部分を色に変えられると、動きが出てハイライト表示されます
.table-condensedコンパクトな表、つまり表の表示は普通の表より少しコンパクトで、実現原理はセルの内側の余白を減らすことです
.tableresponsiveスタイルパッケージtableスタイルの外部では、小画面デバイス(768ピクセル未満)で水平にスクロールする応答テーブルが作成されます.
bsは、テーブルのtr要素に5つの基本的な色スタイル(active successinfo warning danger)を提供し、trの背景色を制御する.
フォーム＃フォーム＃
bsフレームワークのコアコンテンツであり、フォームは豊富なスタイル(ベース、インライン、横方向)を提供します.
まず2つの基本スタイルについて
form-control:100%に設定
form-group:下マージンを設定し、各コントロールの表示を保証します.
select、input、textarea要素に適用する場合.form-controlスタイルで表示幅が100%になり、placeholderの色が#999999に設定されています
インラインフォーム
通常のform要素に1つだけ適用するすべてのコントロールが1行のフォームに必要になる場合があります.form-inlineスタイル
横フォーム
インラインフォームの使用方法とは異なり、form要素に簡単に1つ適用することはできない.form-horizontalスタイル.
によってform-horizontalスタイルが変わりました.form-groupの挙動は、グリッドシステムにおける行(row)のように表現するので、これ以上使用する必要はない.rowスタイルになりました.
フォームコントロール
既存のHTML 5構文のinputは、typeがtext、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel、colorの要素など、サポートされています.
Input要素はtypeタイプを宣言する必要があります.そうしないと、他の問題が発生する可能性があります.
select要素、マルチライン選択mulitipleプロパティをmultipleに設定
textarea要素、rows数字を定義すると大きなテキストボックスの高さを定義し、colsを定義して大きなテキストボックスの幅を定義します.
checkboxとradio要素は、input要素の2つの非常に特殊なtypeで、よく文字表示を組み合わせるため、bsは標準表示をしました
<div class="radio">
<label><input name="opt" type="radio" />ON</label>
</div>
<div class="radio">
<label><input name="opt" type="radio" />OFF</label>
</div>
<div class="checkbox">
<label><input type="checkbox"/>Swing</label>
</div>
<div class="checkbox">
<label><input type="checkbox" />Runing</label>
</div>
checkboxとradioの内容が少ない場合、横方向に表示する必要がある場合はcheckbox-inlineとradio-inlineを使用できます.
コントロールのステータス
bsは、フォーカス状態(デフォルト)、無効状態、検証プロンプト状態の3つの状態のスタイルを使用できます.
使用方法は通常のdisabledと同様に、無効な要素にdisabledプロパティを使用するだけです.
fieldset disabledプロパティを使用すると、内部のコントロールも無効になります.
フォームに記入する際には、ユーザに入力内容が合法かどうかを提示することがよくあり、bsは提供する.has-warning、.has-error、.has-successの3つのスタイル.
(親コンテナのhas-feedbackスタイルは位置決め方法を設定するために使用され、小さなアイコン要素のform-control-feedbackスタイルはアイコンの表示サイズを設定するために使用されます)
<div class="form-group has-success has-feedback">
<label class="control-label" for="name">User Name:</label>
<input type="text" class="form-control" id="name" />
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
コントロールのサイズ
bsは、少し大きいまたは少し小さいinput入力ボックスを設定ための2つのスタイルを提供する.input-lg和.input-sm
ツールバーの
ボタンスタイルで、標準の5色、1つのデフォルト、1つのlinkボタンを定義します.
ボタンサイズは、3種類定義.btn-lg、.btn-sm、.btnxs..btn-blockスタイルは、文字幅に従って変化しない親要素で満たすことができます.
マルチラベル、button a input 3ラベルをサポートします.互換性のためにbuttonを使用することをお勧めします.
Activeおよびdisabledステータスをサポートします.
画像
3種類のスタイル効果を提供し、imgラベルに適用する.img-rounded、.img-circle、.img-thumbnailスタイルでOK
なお、上記のスタイルは、画像の表示サイズを制御ものではないので、画像の表示サイズを制御するために、追加のスタイルを適用するか、親要素のサイズを制限する必要がある.
IE 8および以下のバージョンはサポートされていない.img-rounded和.img-circleスタイルの特効.
補助スタイル
テキスト
テキストスタイル、bsは1つのグレー、および5つの基本標準スタイルの色を提供し、それぞれ、ソフトグレー(text-muted)、プライマリブルー(text-primary)、成功緑(text-success)、情報ブルー(text-info)、警告黄(textwrning)、危険赤(text-danger)である.
テキストバックグラウンドスタイル、bsはまた、主要青(bg-primary)、成功緑(bg-success)、情報青(bg-info)、警告黄(bg-warning)、危険赤(bg-danger)の5種類のテキストカラースタイル対応(mutedスタイルを除く)を提供している.
補助アイコン
アイコンを閉じる(右フローティング)
<button class="close">×</button>
<a class="close">×</a>
下矢印
<span class="caret"></span>フローティング
コンテンツフローティングでは、pull-left、pull-right、center-blockスタイルに対応する3つの要件(左フローティング、右フローティング、中央揃え)が一般的です.
レスポンススタイル
メディアクエリのプロパティを使用して、特定の状況を非表示または表示にする設定を行います.
.visible-先頭のスタイル表示は、あるサイズの場合にのみ表示され、その他は非表示になります.それでhiddenスタイルは、あるサイズの場合にのみ非表示になり、その他は表示されます.
次のようになります.
ブラウザとプリンタをそれぞれ非表示および表示にする設定visible-printとhidden-printを提供します.
大画面でのみvisble-lgを表示