【Bootstrap】Bootstrap5 基礎【クラス一覧】

はじめに

　本記事は、プログラミングの学習を始めて1ヶ月の初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

Bootstrap5 基礎

Bootstrapとは

レスポンシブに対応したウェブサイトを素早く作るための便利なツールです。
CSSやJavaScriptを使わずに素早くおしゃれなWebサイトを作ることができますが、細かい調整を行う際には、Bootstrapがどのように実装されているのかを知る必要があるため、使用しない場合の方が早い場合もあります。
Bootstrapを導入する際には、あらかじめ、実装の速度を重視するのか、細かい調整を重視するのか検討した上で、導入するか否か決定しましょう。

Bootstrapの使いかた

Bootstrapは基本的にはHTMLのタグに対してクラスを指定することで様々な設定をすることができます。

Bootstrapのクラス一覧（基本的なもの）

index.html

 <div class="container"></div>  <!--　ブラウザの幅に応じてコンテンツの幅をいい感じに調整してくれる -mdや　-smをつけることで幅を調整することができる　-->
 <div class="bg-primary"></div>  <!--　bg-　とすることで背景色を設定できる。色の指定も可　-->
 <div class="row"></div>  <!--　行を表す　-->
　　<div class="col"></div>  <!--　カラムを表す　-->
　　<div class="col-8"></div>  <!--　`-8`等とすることで比率を設定することができる。1〜12の間で選択可能。　-->
 <div class="col-8　col-md-6"></div>  <!--　`-md-6`等とすることで特定の画面幅での比率を設定することができる。1〜12の間で選択可能。　-->
 <div class="col-md-8"></div>  <!--　通常は単なるdiv。md以上の幅になると比率が8になる。　-->
 <div class="d-none d-lg-block col-2"></div>  <!-- 幅がlg未満の場合には非表示、lg以上になったら表示し、比率は2。 -->
 <div class="border"></div>  <!-- 上下左右にボーダーをつける。上下左右どこにボーダーをつけるかは指定可能。 -->
　　<div class="text-center"></div>  <!-- 中央揃え。左揃え等も指定可能。 -->
 <div class="text-light"></div>  <!-- 文字色を明るくする -->
 <div class="mx-1"></div>  <!-- 左右にmarginを設定。数字は0〜5、autoで指定可能 -->
　　<div class="ps-1"></div>  <!-- 左側にpaddingを設定 -->
 <div class="fs-3"></div>  <!-- フォントサイズ変更 -->
 <h1 class="display-1"></h1>   <!-- 見出しを拡大表示　-->
 <div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true"></a>
 </div>
  <!-- リンクのリストを表示　-->
　　<table class="table">
 　 <thead>
 　   <tr>
  　    <th scope="col"></th>
 　     <th scope="col"></th>
 　   </tr>
 　 </thead>
 　 <tbody>
  　  <tr>
    　  <th scope="row"></th>
    　  <td></td>
   　 </tr>
 　 </tbody>
　</table>
  <!-- テーブルを作成する。　-stripedや　-borderdを設定可能　-->
　<button type="button" class="btn btn-primary"></button>　　　<!-- ボタンを設置。btm-smなどの設定が可能。 -->
<div class="d-flex"></div>   <!-- フレックスボックス -->
<i class="bi bi-search"></i>   <!-- アイコンの挿入。CSSへの記述が必要。公式サイト要確認。 -->
<nav class="navbar navbar-light bg-light" ></nav>   <!-- ナビゲーションバーの設定。idやdata-bs-toggleでレスポンシブ対応等が可能。 -->

以下Bootstrapの公式ページURL
layoutについて（container等）
colorについて（bg-等)
displayについて(d-等）
borderついて(border等）
textについて（行揃え）
spacingについて（margin等)
typographyについて(display等)
list-groupについて(list-group等)
tablesについて（table等)
flexについて（d-flex等)
アイコンについて
navberについて