Bootstrap

Boostrapクラス一覧

Boostrapに定義されているクラスを自分メモ用にまとめておきます。
随時追加していきます。

メディアクエリーブレークポイント(BreakPoint)の指定

Bootstrapでの画面サイズによるメディアクエリーのブレークポイント(BreakPoint)クラス。

ブレークポイント(BreakPoint)
  • xl ・・・画面幅1200px以上のデスクトップ PC などの大画面モニタ
  • lg ・・・画面幅992px以上のノート PC などの省サイズモニタ
  • md ・・・画面幅768px以上のタブレット端末など
  • sm ・・・画面幅576px以上のスマートフォン(横持ち)など
  • なし・・・画面幅576px未満のスマートフォン(縦持ち)、IoT 端末など
bootstrap
Bootstrap4のグリッドシステムおさらい

Bootstrap4では画面の横幅を12分割して管理する「グリッドシステム」を採用しています。 この「グリッドシステム」を利用すれば、簡単にスマホなどに対応したレスポンシブデザインの表を作成することが ...

幅(width)の指定

Bootstrapでの幅(width)の指定クラス。

幅(width)
  • w-25・・・width:25% !important
  • w-50・・・width:50% !important
  • w-75・・・width:75% !important
  • w-100・・・width:100% !important
  • w-auto・・・width:auto !important
  • mw-100・・・max-width:100% !important
bootstrap
Boostrapで横幅と高さを指定する方法

Boostrapでの横幅と高さの指定は既定のクラスが設定されているので、そのクラスを利用すると簡単に横幅と高さが設定できます。 Boostrapでの横幅と高さの指定 Boostrapでは横幅(widt ...

高さ(height)の指定

Bootstrapでの高さ(height)の指定クラス。

高さ(height)
  • h-25・・・height:25% !important
  • h-50・・・height:50% !important
  • h-75・・・height:75% !important
  • h-100・・・height:100% !important
  • h-auto・・・height:auto !important
  • hw-100・・・height-width:100% !important
bootstrap
Boostrapで横幅と高さを指定する方法

Boostrapでの横幅と高さの指定は既定のクラスが設定されているので、そのクラスを利用すると簡単に横幅と高さが設定できます。 Boostrapでの横幅と高さの指定 Boostrapでは横幅(widt ...

マージン(margin)の指定

Bootstrapでのマージン(margin)の指定クラス。

マージン(margin)
  • mt・・・上マージン
  • mb・・・下マージン
  • ml・・・左マージン
  • mr・・・右マージン
  • mx・・・左右マージン
  • my・・・上下マージン
  • m・・・上下左右マージン
bootstrap
Boostrapでマージン(margin)とパディング(Paddning)を指定する方法

Boostrapでのマージン(margin)とパディング(Paddning)の指定は既定のクラスが設定されているので、そのクラスを利用するとマージン(margin)とパディング(Paddning)が設 ...

パディング(paddning)の指定

Bootstrapでのパディング(paddning)の指定クラス。

パディング(paddning)
  • pt・・・上パディング
  • pb・・・下パディング
  • pl・・・左パディング
  • pr・・・右パディング
  • px・・・左右パディング
  • py・・・上下パディング
  • p・・・上下左右パディング
bootstrap
Boostrapでマージン(margin)とパディング(Paddning)を指定する方法

Boostrapでのマージン(margin)とパディング(Paddning)の指定は既定のクラスが設定されているので、そのクラスを利用するとマージン(margin)とパディング(Paddning)が設 ...

マージン(margin)、パディング(paddning)のサイズ指定

Bootstrapでのマージン(margin)、パディング(paddning)のサイズの指定クラス。

パディング(paddning)
  • 0・・・サイズ「0」
  • 1・・・サイズ「0.25rem」
  • 2・・・サイズ「0.5rem」
  • 3・・・サイズ「1rem」
  • 4・・・サイズ「1.5rem」
  • 5・・・サイズ「3rem」
  • auto・・・サイズ「auto」
bootstrap
Boostrapでマージン(margin)とパディング(Paddning)を指定する方法

Boostrapでのマージン(margin)とパディング(Paddning)の指定は既定のクラスが設定されているので、そのクラスを利用するとマージン(margin)とパディング(Paddning)が設 ...

テキストの左寄せ、中央寄せ、右寄せの指定

Bootstrapでのテキストの左寄せ、中央寄せ、右寄せ(align)のクラス。

左寄せ、中央寄せ、右寄せ(align)
  • text-left  ・・・テキストを左寄せにする
  • text-center ・・・テキストを中央寄せにする
  • text-right ・・・テキストを右寄せにする
bootstrap
Bootstrapでtext-left、text-center、text-rightを使って左寄せ・中央・右寄せを行う方法

Bootstrapではキストの左寄せ・中央・右寄せにするクラスが用意されています。 実際にはtext-left、text-center、text-rightクラスを指定することで実現します。 左寄せ ...

行揃えの指定

Bootstrapでのテキストの行揃えのクラス。

行揃え
  • text-justify・・・両端揃えにする
  • text-nowrap・・・改行しないようにする

文字色の指定

Bootstrapでのテキストの文字色指定のクラス。

文字色
  • text-primary・・・青系統の色
  • text-success・・・緑系統の色
  • text-info・・・薄い青系統の色
  • text-warning・・・黄系統の色
  • text-danger・・・薄い赤系統の色
  • text-muted・・・灰色

背景色の指定

Bootstrapでの背景色指定のクラス。

背景色
  • bg-primary・・・青系統の色
  • bg-success・・・緑系統の色
  • bg-info・・・薄い青系統の色
  • bg-warning・・・黄系統の色
  • bg-danger・・・薄い赤系統の色

見出しの指定

Bootstrapでの見出し指定のクラス。

見出し
  • h1・・・文字にh1要素と同じ書式を指定
  • h2・・・文字にh2要素と同じ書式を指定
  • h3・・・文字にh3要素と同じ書式を指定
  • h4・・・文字にh4要素と同じ書式を指定
  • h5・・・文字にh5要素と同じ書式を指定
  • h6・・・文字にh6要素と同じ書式を指定

ジャンボトロン

Bootstrapでのジャンボトロン作成のクラス。

ジャンボトロン
  • jumbotron・・・ジャンボトロンの作成
bootstrap
親要素いっぱいに広がるジャンボトロンを使う方法

親要素いっぱに広がるジャンボトロン これは親要素の横方向いっぱいに広がるジャンボトロンです。ブログのアイキャッチにも使えます。 Bootsrapにはデフォルトでジャンボトロン(jumbotron)が設 ...

リスト(ol、ul)への書式を設定する

Bootstrapでのリスト(ol、ul)への書式を設定するクラス。

リスト(ol、ul)への書式設定
  • list-unstyled・・・マーカーを削除して左の余白を0に指定する
  • list-inline・・・各項目を横に並べる(マーカーなし)

定義リスト(dl,dt,dd)への書式を設定する

Bootstrapでの定義リスト(dl,dt,dd)への書式を設定するクラス。

定義リスト(dl,dt,dd)への書式設定
  • dl-horizontal・・・「用語」と「意味」を横に並べて配置する

画像の表示サイズを設定する

Bootstrapでの画像の表示サイズを設定するクラス。

画像の表示サイズ
  • img-responsive・・・画像を親要素の幅に縮小して表示する
  • img-rounded・・・画像の四隅を角丸で表示する
  • img-circle・・・画像の楕円形で表示する
  • img-thumbnail・・・画像の周囲を角丸の枠線で囲んで表示する
bootstrap
Bootstrapで画像を丸く表示するrounded-circleの使い方

Bootstrapで画像を丸く表示する Bootstrapで画像を丸く表示するにはrounded-circleを使います。 Bootstrap4では四角い画像を簡単に丸い形で表示することができます。 ...

スポンサーリンク

-Bootstrap
-

Copyright© ソフトウェア開発日記 , 2019 All Rights Reserved.