Bootstrapのコンポーネント一覧

BootstrapのComponent一覧です。

コンポーネントは公式サイトの情報を引用しています。

https://getbootstrap.jp/docs/5.0/

## Accordion(アコーディオン)
垂直に折りたたむアコーディオンUI
https://getbootstrap.jp/docs/5.0/components/accordion/
![スクリーンショット 2023-01-14 18.27.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/f5912b7a-f639-1b8a-7125-d5a98119f03b.png)

## Alerts (アラート)
典型的なユーザーアクションに対して文脈に沿ったフィードバックメッセージ。
https://getbootstrap.jp/docs/5.0/components/alerts/
![スクリーンショット 2023-01-14 18.28.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/2863ae63-e7d8-e900-1c17-d537c355158c.png)

## Badges (バッジ)
シンボルを使用して他のインターフェイス要素や通知を表示するために注意を促すUI
https://getbootstrap.jp/docs/5.0/components/badge/
![スクリーンショット 2023-01-14 18.28.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/9782067f-e1e9-5a9c-b5b7-46f40feeae2f.png)

## Breadcrumb (パンくずリスト)
ページを階層化して、現在のページの位置を示すUI
https://getbootstrap.jp/docs/5.0/components/breadcrumb/
![スクリーンショット 2023-01-14 18.31.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/91a6f166-4599-2546-3b80-b67a9c70ace0.png)

## Buttons (ボタン)
ボタンのUI
https://getbootstrap.jp/docs/5.0/components/buttons/
![スクリーンショット 2023-01-14 18.32.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/9cb7f543-c1a0-500c-f044-8c29ba108044.png)

## Button group (ボタングループ)
ボタングループは複数のボタンを1行にまとめる
https://getbootstrap.jp/docs/5.0/components/button-group/
![スクリーンショット 2023-01-14 18.33.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/724fd5f9-1a59-3529-f22b-62508b88988b.png)

## Cards (カード)
複数のバリエーションとオプションで柔軟で拡張可能なコンテナを提供する
https://getbootstrap.jp/docs/5.0/components/card/
![スクリーンショット 2023-01-14 18.34.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/9c96e9d4-3221-37c7-3343-f0bb17b1053b.png)

## Carousel (カルーセル)
画像やスライドをよこにスライドさせて複数表示させるコンポーネント
https://getbootstrap.jp/docs/5.0/components/carousel/
![スクリーンショット 2023-01-14 18.35.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/03e2c968-b73c-66ed-01ea-ec99ff84a423.png)

## Close button (クローズボタン)
モーダルやアラートなどのコンテンツを閉じるための汎用的なクローズボタン
https://getbootstrap.jp/docs/5.0/components/close-button/
![スクリーンショット 2023-01-14 18.36.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/3c3e60f3-af9c-bd0e-f62d-9a9ce848ee9c.png)

## Collapse (コラプス)
いくつかのクラスと JavaScript プラグインを使用して、プロジェクト全体のコンテンツの表示を切り替える
https://getbootstrap.jp/docs/5.0/components/collapse/
![スクリーンショット 2023-01-14 18.37.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/d0bbd101-a76a-db5c-8762-7bf7e0621f32.png)

## Dropdowns (ドロップダウン)
リンクのリストなどを表示するためのコンテキストオーバーレイをトグルする
https://getbootstrap.jp/docs/5.0/components/dropdowns/
![スクリーンショット 2023-01-14 18.38.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/581aad15-0f37-58d4-bfd1-3a398dd0cd2a.png)

## List group (リストグループ)
リストグループは、一連のコンテンツを表示するための柔軟で強力なコンポーネント
https://getbootstrap.jp/docs/5.0/components/list-group/
![スクリーンショット 2023-01-17 16.18.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/31ae7b29-ec36-fddd-c51f-5913a91784f4.png)

## Modal (モーダル)
ライトボックス, 通知, カスタムダイアログを作成できる
https://getbootstrap.jp/docs/5.0/components/modal/
![スクリーンショット 2023-01-17 16.19.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/e0b04c1e-aa1a-0758-a39d-746504be1b7f.png)

## Navs and tabs(ナブとタブ)
ナビゲーションコンポーネント
https://getbootstrap.jp/docs/5.0/components/navs-tabs/
![スクリーンショット 2023-01-17 16.20.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/a43ac97f-3deb-80f6-cfbf-a6eb9e55b8bf.png)

## Navbar (ナビゲーションバー)
レスポンシブなヘッダー
https://getbootstrap.jp/docs/5.0/components/navbar/
![スクリーンショット 2023-01-17 16.21.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/ebc5151a-af44-b660-878f-e1484939fe5b.png)

## Offcanvas
ナビゲーションやショッピングカートなどのための隠しサイドバー
https://getbootstrap.jp/docs/5.0/components/offcanvas/
![スクリーンショット 2023-01-17 16.23.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/87a5ac7f-e133-83e7-52a2-4343da9de669.png)

## Pagination (ページネーション)
検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置するもの
https://getbootstrap.jp/docs/5.0/components/pagination/
![スクリーンショット 2023-01-17 16.23.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/2441fb9a-b013-7fe0-ccb9-0fac44a07b09.png)

## Popovers (ポップオーバー)
対象の要素をクリックしたときに小さな領域を表示するウインドウ
https://getbootstrap.jp/docs/5.0/components/popovers/
![スクリーンショット 2023-01-17 16.24.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/9591e76a-2aba-2e46-4fcf-c390d701081d.png)

## Progress (プログレス)
処理や作業の進捗状況を棒状の領域の内部の色の変化によって表示する
https://getbootstrap.jp/docs/5.0/components/progress/
![スクリーンショット 2023-01-17 16.26.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/67f166ca-845e-094d-d4f6-92ff599ac27b.png)

## Scrollspy (スクロールスパイ)
https://getbootstrap.jp/docs/5.0/components/scrollspy/
スクロール位置に基づいてBootstrapナビゲーションまたはリストグループコンポーネントを自動的に更新し、ビューポート内で現在どのリンクがアクティブであるかを示す
![スクリーンショット 2023-01-17 16.27.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/6798bdde-a11c-aec7-e417-3b0f913b1c42.png)

## Spinners (スピナー)
ロード中などで描画されるクルクル画像
https://getbootstrap.jp/docs/5.0/components/spinners/
![スクリーンショット 2023-01-17 16.28.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/d3712d05-fc4e-3c77-ce70-a04574f5b4c5.png)

## Toasts (トースト)
軽量で簡単にカスタマイズできるアラートメッセージのプッシュ通知
https://getbootstrap.jp/docs/5.0/components/toasts/
![スクリーンショット 2023-01-17 16.29.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/0a242330-d190-ea90-67bb-a41a8a1291a0.png)

## Tooltips (ツールチップ)
カーソルを合わせると、注釈や補足説明などが表示されるもの
https://getbootstrap.jp/docs/5.0/components/tooltips/
![スクリーンショット 2023-01-17 16.30.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840684/e29d14fb-5ab1-eff4-b125-cd3acdaac454.png)