bootstrap4在庫スタイルリスト（見つけるために）

図1に示すように、グリッドシステム、及び容器

容器

• コンテナ：固定幅、異なる固定幅の異なるサイズ
• コンテナ流体：100％幅

グリッドシステム

• col-：<576px
• COL-SM-：> = 576px
• COL-MD-：> = 768px
• COL-LG-：> = 992px
• COL-XL-：> = 1200px

2、フォント色、背景色

フォント

• テキストミュートパステル
• テキスト、主に重要
• テキスト成功成功
• テキスト情報のヒント
• テキスト警告警告
• テキスト危険危険
• テキスト二サブタイトル
• テキスト濃い濃い灰色のテキスト
• テキスト光灰色がかりました
• テキスト、白、白

背景

• BG-主
• BG-二次
• BG-成功
• BG-危険
• BG-警告
• BG-情報
• BG-光
• BG-暗いです
• BG-白

3、国境

枠を追加

• ボーダー：默认：1pxの固体＃1 dee2e6重要！
• ボーダートップ
• border-left
• border-right
• border-bottom

国境を削除

• ボーダー0：除去フレームのエッジまたは側面を除去します
• border-top-0
• border-left-0
• border-right-0
• border-bottom-0

境界線の色

• ボーダープライマリ
• ボーダー、二次
• ボーダー成功
• ボーダー - 危険
• ボーダー警告
• 国境情報
• ボーダーライト
• ボーダー、暗いです
• ボーダー、白

角丸

• ！丸い：国境半径：.25rem重要。
• 丸みを帯びたトップ：上部のみ側面が丸みを帯びています
• 丸みを帯びた右
• 丸みを帯びた下
• 丸みを帯びた左
• 丸みを帯びた円形ベースの画像は楕円設けられていてもよいです
• 丸みを帯び0
• .IMGサムネイルクラスは、サムネイル画像を設定するために使用されている（境界で画像）

図4に示すように、内側マージン（pading）マージン（余裕）

• メートル - クラス代表マージン
• P - クラスのためのパディングの代わりに
• トン - クラスのためのそのセットのマージントップやパディングトップ
• B - クラスのためのそのセットのマージン下やパディング、下
• リットル - クラスのための一連のmargin-leftやパディング左います
• R - クラスのためのそのセットマージン右またはパディング右
• X - の両方*を設定するクラスのため-leftと*右回転
• Y - の両方* -topを設定し、クラスのための* -bottom
  

パディング

• P-1：パディング：！.25rem重要。
• P-2：パディング：！.5rem重要。
• P-3：パディング：！1rem重要。
• P-4：パディング：！1.5rem重要。
• P-5：パディング：！3rem重要。

一方的

• PT-0
• PL-0
• -あたり0
• PB-0
• PX-2
• PY-2

パディング：0 .5rem。// PY-2

マージン

• M-1：マージン：.25rem重要;！
• M-2：マージン：.5rem重要;！
• M-3：マージン：！1rem重要。
• M-4：マージン：！1.5rem重要。
• M-5：マージン：！3rem重要。

一方的

• MT-0
• ML-0
• MR-0
• MB-0

一方的なサイズ

• MT-1 //のmargin-left：！（スペーサー$ * 0.25）が重要。
• MT-2
• MT-3
• MT-4
• MT-5
• MX-車

マージン：0自動;

オート

• ML-オート：のmargin-left：！オート重要。
• MR-オート：マージン右：オート重要;！
• MT-オート：マージントップ：オート重要;！
• MB-オート：マージン下：オート重要;！

5、透明フロート

• クリアフロートclearfix //クラスの実装は、以下の

// MIXIN自体
clearfix @mixin（） { 
＆：：{後に
表示：ブロック。
内容："" ; 
クリア：両方を、
} 
} 


//ミックスインとして使用
.element { 
@include clearfix。
}

6、ディスプレイ表示

全て//任意のサイズを使用するための.d- {値}

.d- {ブレークポイント} - SMのための{値}、MD、LG、およびxl.//対応する寸法ローディング

• D-なし
• D-インライン
• D-インラインブロック
• d-ブロック
• D-テーブル
• D-テーブルセル
• D-テーブル行
• D-フレックス
• D-インラインフレックス

//印刷スタイルはあまり使用します

• D-印刷なし
• D-印刷インライン
• D-印刷インラインブロック
• D-印刷ブロック
• D-印刷テーブル
• D-印刷テーブル行
• D-印刷テーブルセル
• D-印刷フレックス
• D-印刷インラインフレックス

7、埋め込まれたスタイル要素

これは、含まれている<iframe>, <embed>, <video>, and <object>など、スタイルなどの要素を

• 埋め込み応答：箱の外側
• 埋め込み応答-21by9（16by9,4by3,1by1）：アスペクト比
• 埋め込み応答項目：要素にスタイルを追加

< divのクラス= "埋め込む応答埋め込み応答-21by9" > 
< `のiframe クラス= "埋め込む応答項目" SRC = "..." > </ iframe` > 
</ DIV >

図8に示すように、柔軟なレイアウト

• D-フレックス//は弾性伸縮カートリッジとしてオブジェクトを表示します
• D-インラインフレックス//弾性伸縮インラインブロックレベルカートリッジとしてオブジェクトを表示
• D-SM-フレックス//ロード対応した寸法
• D-SM-インラインフレックス
• D-MD-フレックス
• D-MD-インラインフレックス
• D-LG-フレックス
• D-LG-インラインフレックス
• D-XL-フレックス
• D-XL-インラインフレックス

水平に

• フレックス行
• //反対方向をフレックス行は、逆

垂直

• フレックスコラム
• フレックス列逆転

同じスタイルは、異なるサイズにフィット

• フレックス行
• フレックス行逆
• フレックスコラム
• フレックス列逆転
• フレックス-SM-行
• フレックス-SM-行逆
• フレックス-SM-コラム
• フレックス-SM-列逆転
• フレックスMD-行
• フレックスMD-行逆
• フレックス-MD-コラム
• フレックス-MD-列逆転
• フレックスLG-行
• フレックスLG-行逆
• フレックスLG-コラム
• フレックスLG-列逆転
• フレックスXL-行
• フレックスXL-行逆
• フレックスXL-コラム
• フレックスXL-列逆転

コンテンツを正当化//は異なるサイズに合わせることができます

• 正当化 - コンテンツ開始
• 正当化するコンテンツ・エンド
• 正当化 - コンテンツセンター
• 正当化 - コンテンツ間
• 正当化コンテンツアラウンド

ラップ

• フレックスNOWRAP //サポート異なるサイズの試合
• フレックスラップ
• フレックス-SM-ラップ逆

オーダー//サブ要素は、異なるサイズの一致をサポートするように設定されています

• オーダー-0
• オーダー-1
• オーダー-2
• オーダー-3
• オーダー-4
• オーダー-5
• オーダー-6
• オーダー-7
• オーダー-8
• オーダー-9
• オーダー-10
• オーダー-11
• オーダー-12

試合に異なるサイズの位置に合わせ項目は//セット子支持要素

• ALIGN-アイテムスタート
• ALIGN-アイテムエンド
• ALIGN-アイテム中心
• 同じようなベースラインのアイテム
• ALIGN-アイテムストレッチ

試合に異なるサイズの位置に合わせ、自己//セット子支持要素

• ALIGN-自己開始
• ALIGN-自己エンド
• ALIGN-自己中心部
• ALIGN-自己のベースライン
• ALIGN-自己ストレッチ

試合に異なるサイズの位置に合わせたコンテンツ//セット子支持要素

• ALIGN-コンテンツ開始
• ALIGN-コンテンツエンド
• ALIGN-コンテンツ中心
• ALIGN-コンテンツアラウンド
• ALIGN-コンテンツストレッチ

図9に示すように、フロートに適合させることができる：フローティング状態（SM、MD LG XL）-xxx

• フロート左
• フロート右
• フロートなし

10、画像置換テキスト

• 背景画像の要素を置き換えるために、テキストに隠す//使用の.text非表示ヘルプテキストベースのコンテンツ。

< H1 クラス= "テキスト非表示" スタイル= "背景画像：のURL（ '/資産/ブランド/ブートストラップ-solid.svg'）;幅：は50px;高さ：は50px;" >ブートストラップ</ H1 >

11、位置

• 位置、静的
• 位置、相対
• 位置、絶対
• 位置固定
• 位置スティッキー

固定位置

• 固定トップ
• 固定下

.fixedトップ { 
位置：固定されました。
トップ：0 ; 
右：0 ; 
左：0 ; 
Zインデックス：1030。
}

12、寸法（サイズ）

• W-25//width: 25%!important; 以下值同理
• W-50
• W-75
• W-100

インターバル

• MW-100
• MH-100

13、テキスト

テキストの場所

• テキスト左//テキスト左
• テキストセンター
• テキストの右
• テキスト-SM-左
• テキスト-MD-左
• テキスト-LG-左
• テキスト-XL-左

テキスト変換（テキスト変換）//すべてのブラウザでは、このプロパティをサポート

• テキスト・小文字//小文字のアルファベット文字
• 文字の大文字テキストの大文字//テキスト
• テキスト生かす//テキストの大文字で始まる各単語。

フォントエンファシスおよびイタリック（フォント重量およびイタリック）

• フォントの太太字//フォント重いです
• フォントの太さ、通常//通常のフォント
• フォントの太光//テーパーフォント
• フォントイタリック//イタリック

14、垂直配向（垂直配向）

• ALIGN-基線
• ALIGN-トップ
• ALIGN-真ん中
• ALIGN-下
• ALIGN-テキストトップ
• ALIGN-テキスト下

垂直-ALIGN：テキスト-下重要;！//.align-text-bottom

15、ショー隠さ

• 公演
• 非表示またはSR-のみ
• スクリーンリーダーが推奨されていないため非表示//クラスはまだ利用できますが、それは再生することはできません
• 要素の位置を保持した文書を非表示にする目に見えません
• 見え見え//

可視性：隠された重要な;！

16、テーブル

• テーブル//デフォルトのスタイル
• テーブルストライプ//ストライプ状
• テーブルのテーブル-境//ボーダー
• テーブル・ホバー//ホバー
• テーブル・ダーク//黒背景フォーム
• テーブル凝縮//コンパクトなフォーム
• テーブル応答応答//テーブル

背景色テーブルの行を設定します

• 場合行または細胞におけるホバー//アクティブ色セット
• 成功//成功したか、積極的な行動を識別
• 情報//共通メッセージまたはアクションを識別します
• 警告//警告を識別したり注意を払うことをユーザに要求
• 危険なのは//アクションまたは潜在的な危険性の負の影響を特定します

17、ボタンとボタングループ

プッシュボタン

• BTN-主要//メインボタン
• //セカンダリボタンBTN-二次
• BTN-成功//成功ボタン
• BTN-情報//情報ボタン
• BTN-危険//危険
• BTN-概要 - 主要//ボタンの境界線
• BTN-XS BTN-SM BTN-LG //小さなチューバボタン
• BTN-ブロック//ブロックレベルボタン
• アクティブ//利用可能
• 無効//無効化

ボタングループ

• BTN-グループ//ボタンセット
• BTN-グループ-LG | SM | XSコントロールボタンのグループのサイズ
• BTN基垂直垂直ボタンセット

18、グループのリスト

• リストグループ//セットリスト
• リストグループ項目//リストリー
• リストunstyled // unstyledリスト
• リストULに追加リストインライン//インライン

一覧の背景色

• リストグループ項目アクション
• リストグループ項目-成功、
• リストグループ項目-二、
• リストグループ項目情報、
• リストグループ項目の警告、
• リストグループ項目-危険、
• リストグループ項目、暗いです
• リストグループ項目ライト：

19、形

• そのような要素を追加する形インライン//フォームは、フォームをインラインで構成することができます
• フォームの水平//あなたが側レイアウトによってタグと対照群レベルの側にラベルを付けることができます
• フォーム・グループ//フォームグループマージン下：15ピクセル;
• 入力フォームに入力基アドオン//使用は、更新されたアイコン又は接尾辞の前および後に添加してもよいです
• 100％となる幅フォームコントロール//フォーム要素
• SR-のみの隠された形

フォームのサイズを制御します

• 入力-LG
• 入力-SM

チェックボックスとラジオ

• チェックボックス//包まれた箱
• チェックボックスインライン//インライン複数の選択肢
• ラジオ//小包ボックス
• 無線インライン//ラジオインライン
• クリッカブル//無効になっていません

ドロップダウン・リスト（選択）

• フォームコントロール

状態をチェック

• // .FORMグループで使用することができ、成功はしました
• // .FORMグループで使用することができ、警告はしました
• // .FORMグループで使用することができ、エラーがしました

20、メッセージボックス

• アラートカテゴリ

背景色は、次のクラス名を追加しました

• アラート成功、
• アラート情報、
• アラート警告、
• アラート危険、
• アラート主、
• アラート二、
• 警告ライト
• プロンプトボックスを実装するためのアラート暗い暗いクラス

21、三角形

• 小さな下向きの三角形を達成するために// CSSキャレット