【Bootstrap】Bootstrap 早見表　No.2

# はじめに
前回に引き続きBootstrapの早見表を作成いたしました！
作った背景、早見表とは？などは前回に記述しておりますのでこちらをご覧いただけたらと思います！
https://qiita.com/kenta-nishimoto-1111/items/e622e6a9327131613f5f

※今回も個人的によく使っているものをまとめているので、
　ご希望のものがない場合は申し訳ございません。

# 開発環境
Bootstamp バージョン５
Ruby on Rails バージョン2.6.5

<!-- 各チャプター -->
# Compoments（カテゴリー）

<h4>●アコーディオンの作成</h4>
Compoments > accordion

![Accordion Item #1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/96415416-06bd-60f9-5030-39dc042faed7.png)

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


<hr>

<h4>●アラートを表示させる</h4>
Compoments > alerts

![A simple secondary alert-check it out!.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/02c1f112-a9ab-7141-447d-fb5d3cc9c8d0.png)


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


<hr>



<h4>●色つきや数字、newなどのバッジを付けれる</h4>
Compoments > badge

![Primary Secondary Success Danger Warning Info Light Dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/0096e85c-05b7-cc04-d619-f5d049533db6.png)


![Example heading.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/cf1268f4-9204-f5d5-abcf-fe4e93ad2039.png)

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


<hr>


<h4>●目次のようなパンくずリストを出す</h4>
Compoments > breadcrumb

![スクリーンショット 2021-06-09 10.03.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/883ea21e-1ae9-004b-8269-85667410e3f3.png)

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


<hr>

<h4>●様々なボタンを表示させる</h4>
Compoments > buttons

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



<hr>


<h4>●複数のボタンを一つにまとめる</h4>
Compoments > button-group

![Radio 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/8be88ce6-7507-49bb-7ebb-27e02fd7fa26.png)

https://getbootstrap.jp/docs/5.0/components/button-group/


<hr>


<h4>●下記画像のように様々なカードを作れる</h4>
Compoments > card

![Card title.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/b1183dda-e195-d53c-eee4-033b43157eff.png)
![Image cap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/2e99fbd5-e4f5-0402-b57a-3b8de79cc6ee.png)


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


<hr>


<h4>●画像を横にスライドさせてスライドショーを作る</h4>
Compoments > carousel


![Second slide.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/3fb13bd6-95ce-17cd-6097-8568a20c78e3.png)

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


<hr>


<h4>●クローズボタンを作る</h4>
Compoments > close-button

![スクリーンショット 2021-06-09 10.11.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/558050b4-af8e-1eb8-e701-98386b04c18e.png)

https://getbootstrap.jp/docs/5.0/components/close-button/


<hr>


<h4>●リンクやリストをドロップダウンで表示させる</h4>
Compoments > dropdowns

![Dropdown button.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/9059213c-1b2e-9231-4ab3-257e330fd71e.png)

![Navbar Dropdown.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/fa1aa422-9c67-8867-b84a-6574c631155e.png)


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



<hr>


<h4>●複数のリストをまとめたり、選択によって左側の文字を変えることもできる</h4>
Compoments > list-group

![Some placeholder content in a paragraph relating.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/1302ad74-0b5b-9063-baee-02d8c29f319d.png)

![First checkbox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/0dd6aa06-1271-52ac-d89e-666dae67a7d9.png)

https://getbootstrap.jp/docs/5.0/components/list-group/


<hr>


<h4>●ボタンタッチすることで、下記画像のようなポップを表示させる</h4>
Compoments > modal

![Modal title.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/b9fa8683-7bbb-b829-5b99-93abcaba375c.png)

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




<hr>


<h4>●ナブバーを作成する</h4>
Compoments > navs-tabs

![Home Profile Contact.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/66fe8823-4e25-9b65-cb27-17ab13295458.png)

![Active Link Link Disabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/2bbf5487-8c9e-2fa8-1778-8f427226483a.png)

https://getbootstrap.jp/docs/5.0/components/navs-tabs/



<hr>


<h4>●ナビゲーションバーを作る</h4>
Compoments > navbar

![Navbar Home Link Dropdown - Disabled Searc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/794c8183-ce55-8c6a-d905-4593527c0706.png)


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



<hr>




<h4>●現在何ページ目かを教えてくれるもの</h4>
Compoments > pagination

![スクリーンショット 2021-06-09 10.29.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/d62e3ac2-3a18-8e2b-6622-b8d97ac343cd.png)

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


<hr>


<h4>●ボタンを押すとポップを出すようにする</h4>
Compoments > popovers

![Popover title.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/97e02b87-3510-085d-2cc4-2cff3d6afc04.png)

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


<hr>


<h4>●現在の進行具合などを表すものを作る</h4>
Compoments > progress

![スクリーンショット 2021-06-09 10.32.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/0a3cb892-9166-e198-bb3c-21f5e824595c.png)

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


<hr>


<h4>●スクロールに合わせて横のナブが移動するものを作る</h4>
Compoments > scrollspy

![earned my stripes.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/883ffa87-89c8-b68b-35b1-528b259ed57a.png)

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



<hr>


<h4>●ロードなどでクルクル回るもの</h4>
Compoments > spinners

![スクリーンショット 2021-06-09 10.36.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/e8f1b448-95d4-2a30-88fe-e5b1a302a9ee.png)

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


<hr>

<h4>●カーソルを合わせただけでポップを出す</h4>
Compoments >  tooltips

![Disabled tooltip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/1e9747a4-6acf-c581-f7b1-16ddae1eb336.png)


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


# 他の早見表はこちらです！

Layputカテゴリー ＆　Formsカテゴリー : https://qiita.com/kenta-nishimoto-1111/items/e622e6a9327131613f5f