Bootstrap3 Bootstrap4、Bootstrap3でガター幅（余白/カラムの隙間）を調整する
Bootstrapの基本 カラム自体にmarginはなく余白はカラムのpaddingで指定されている。 カラムのpaddingは左右15px. Bootstrapのカラムとカラムの間の余白スペースは15px＋15pxで30pxになる。 カラ...
Bootstrap4
Bootstrap3 Bootstrap4 Bootstrap4でHTMLパーツの共有化＜ヘッダー、サイド、フッター＞
静的HTMLよく使われるjQueryでのHTMLパーツの共通化。インラインフレームよりも便利なのでよく利用します。 インラインフレームはボーダーやスクロール、高さなどいろいろ面倒なので好きではありません。 今回はBootstrapでこのパー...
Bootstrap4 Bootstrap4イメージの配置（Aligning images）の新設
イメージを左右に配置 イメージの中央揃え （.mx-auto.d-block 使用） イメージの中央揃え （.text(-{breakpoint})-center 使用） 【Bootstrap3.xとの変更箇所】 .float-none が...
Bootstrap4 Bootstrap4のフォームコントロール（Form controls）
Bootstrap3では.form-control ＋ .input-lg等でしたがBootstrapでは.form-control ＋.form-control-lgｎに変更された。 .input-{size} ⇒ .form-contr...
Bootstrap4 Bootstrap4モバイルフレンドリーの為の＜要素の表示/非表示＞
要素の表示/非表示 デバイスごとに要素を表示および非表示にするためのレスポンシブ表示クラスを使用できるようになりました。同じサイトの全く異なるバージョンを作成するのではなく、代わりに各画面サイズに応じて要素を非表示にする。 画面サイズ クラ...
Bootstrap4 Bootstrap4に用意された空白ユーティリティ
Bootstrapまでは、個別に「mt20」などのクラスを追加して空白を調整していましたが、Bootstrap4では簡潔なレスポンシブマージンとパディングユーティリティクラスが用意されました。 マージン（Margin） ビューポートサイズ ...
Bootstrap4 Bootstrap4のグローバルナビ Navbarで使われるクラス
Bootstrapで用意されているナビゲーションバー、Bootstrap４ではdiv.container-fluid, div.navbar-header の設定は不要になりました。 基本・・・全幅 基本・・・全幅だけどメニューは「cont...
Bootstrap4 Bootstrap4、Bootstrap3からの主な変更点と利用頻度の高いクラス
カラム Bootstrap3.xとの変更箇所 ブレークポイント：ポイントが3つから4つに増加（定義済みクラスの種類は4つから5つに増加） 極小サイズは、全てのサイズで対応可能なので、.col-xs- から .col- に名称変更 モバイルサ...
Bootstrap4 Bootstrap4「CDN」の基本タグ
Bootstrap4.0.0の場合 <head>内に下記を追加 </body>の直前に下記を追加 サンプルHTML※integrity属性入り ※Font Awesome 最新と旧バージョン ※4.00のJSファイル「bundle.min....