アラートに「×」ボタンを追加する。 サンプルコード アラートに「×」ボタンを追加する。 alert-dismissibleを使うことで下記のようにアラートに「×」ボタンを追加してアラートを閉じられるように設定することが可能です。 ここにアラートを書きます × サンプ…

ナビバーについて ナビバーについて Bootstrapでは下記のようなナビバーを作ることができます。 Logo Link Link Link <div class="container"> <nav class="navbar navbar-expand navbar-light"> <a href="" class="navbar-brand">Logo</a> <ul class="navbar-nav"> <li class="nav-item"><a href="" class="nav-link">Link</a></li> <li class="nav-item"></li></ul></nav></div>

ツールチップについて ツールチップ設定手順 ツールチップについて Bootstrapでは下記のようなツールチップを実装することができます。 （ツールチップとはカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内…

タブメニュー作成 タブメニュー作成手順 タブメニュー作成 Bootstrapでは下記のようなタブメニューを作ることができます。 Aタブ Bタブ Cタブ あいうえお かきくけこ さしすせそ タブメニュー作成手順 1.タブの見出しを作る <div class="container"></div>内にul、li要素でタブの見出しを…

Bootstrapのボタンについて Grid system ブレークポイント Bootstrapのボタンについて 公式サイトの[Documentation]－[Layout]－[glid]にGrid systemについての詳細が掲載されています。 getbootstrap.com Grid system Bootstrapでは横幅を12分割したグリッ…

Bootstrapのボタンについて Button tags Outline buttons Sizes Active state Disabled state Bootstrapのボタンについて 公式サイトの[Documentation]－[Components]－[Buttons]にBootstrapのボタンに関しての詳細が掲載されています。 getbootstrap.com Bu…

Bootstrapでスタイリングをした時の注意点 Bootstrapでスタイリングをした時の注意点 Bootstrapが用意しているスタイル（特にUtilitysのスタイル）は「!important」という指定がされているため最優先でスタイルが適用されます。下記は「<div class="bg-success w-75 h-100">Box</div>」のスタイルをデ…

paddingとmarginについて 使い方 構文 property sides paddingとmarginについて Bootstrap公式サイトの「Documentation」ー「Utilities」ー「Spacing」ページで確認することができます。 getbootstrap.com 使い方 paddingとmarginについてはproperty、sides…

Bootstrapで使用可能な幅と高さ 幅（Width） 高さ（Height） Bootstrapで使用可能な幅と高さ Bootstrap公式サイトの「Documentation」ー「Utilities」ー「Sizing」ページで確認することができます。 getbootstrap.com 幅（Width） 25%、50%、75%、100%、Auto…

Bootstrapで使用可能なテキストの調べ方 テキストの配置位置（Text alignment） テキストのサイズ 大文字・小文字変換（Text transform） 太字と斜体（Font weight and italics） 等幅フォント（Monospace） Bootstrapで使用可能なテキストの調べ方 Bootstra…

Bootstrapで使用可能な色の調べ方 Color Background color Bootstrapで使用可能な色の調べ方 Bootstrap公式サイトの「Documentation」ー「Utilities」ー「Colors」ページで使用できる文字色と背景色を確認することができます。 getbootstrap.com Color 下記…

Bootstrapって何？ 公式サイト Bootstrapを使う方法 Bootstrapを使うと何ができるのか？ Bootstrapって何？ ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークです。（詳細はウィキペディアを参照） Bootstrap -…