bootstrap 4常用スタイルアレンジ

背景
最近、小さな学習プロジェクトをしているときにbootstrap 4を何度も使っているので、ここでbootstrapを整理して、後で見るために使います.
bootstrap 4インストール

コンテナとグリッドシステム

container container-fluid// 100%

み

display//タイトルクラス1-4

small// テキスト

//テキストの にある の

text-mutedソフト

text-primary

text-success

text-infoプロンプト

text-warning

text-danger

text-secondaryサブタイトル

text-dark い

text-lightライトライトライト

text-white

table//デフォルトスタイル

table-striped//ストライプテーブル

table-bordered//

table-hover//マウスサスペンション

table-dark//ブラックバックグラウンドテーブル

table-responsive//レスポンステーブル

rounded//フィレット

rounded-circle//

img-thumbnail//ピクチャサムネイル

img-fluid//ピクチャ

スクリーン

jumbotron//スクリーン

jumbotron-fluid//フィレットのない

メッセージボックス

alert-success// プロンプト

alert-dismissable class="close"data-dismiss="alert"//プロンプトボックス

を じる
ツールバーの

btn-primary//メインボタン

btn-secondary//サブボタン

btn-success// ボタン

btn-info// ボタン

btn-danger//

btn-outline-primary//ボタンフレーム

btn-sm btn-lg// さなボタン

btn-block//ブロックレベルボタン

active//

disabled//

ボタングループ

btn-group//ボタングループ

btn-group-lg|sm|xs ボタングループサイズ

btn-group-vertical ボタン

バー

progress//div

を

progress-bar// のdivにprogress-barのdiv

を
ページング

pagination//ul に

を

page-item//li にpage-item

を
リストグループ

list-group//リストグループ

list-group-item//リストli

list-group-item-action

カード

card、card-header、card-body、card-footer

card-img-top//ピクチャ

card-body、card-title、card-text//ピクチャカード

card-img-overlay//

に を
ドロップダウンメニュー

dropdown//ドロップダウンメニューデフォルト

button dropdown-toggle data-toggle=「dropdown」//ドロップダウンbutton

dropdown-menu//ドロップダウンメニュー

a スタイルdropdown-item

ナビゲーションバー

navbar、navbar-expand-sm、bg-light

ul:navbar-nav li:nav-item

フォーム＃フォーム＃

form-group

label for email

input class form-control

モジュラボックス

button   data-toggle="modal" data-target="#myModal"



 

        
     
        ×
      
     ..
  

プロンプトボックス

data-toggle="tooltip"// プロンプトボックス

title=“ はヒントの です!”//ヒントの

data-placement="top"//プロンプトボックス

を
$(document).ready(function()/

$('[data-toggle="tooltip"]').tooltip(); 

});