【Bootstrap】Bootstrap 早見リスト No.1

# はじめに
今回はBootstrapで目的のものがどこのページにあるのか
すぐにわかるような早見リストを作成いたします。
個人的にBootstrapを使用する際、全て英語で記載されており
一つ一つの単語に何が書かれているのか、いまいち管理できていなかったため
わかりやすく管理できるものを作成することにしました！

英語ができないせいか、こちらの図の左側の目次だけでは全然目的にものにたどり着けなかったです💦
![スクリーンショット 2021-06-27 20.15.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/f833f047-4162-8707-f869-ff8f69c51b0b.png)

今回はカテゴリ毎に分けて数回にわたり記事を書かせていただきます！
※個人的によく使っているものをまとめているので、
　ご希望のものがない場合は申し訳ございません。

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

<!-- 各チャプター -->
# Layput(カテゴリー)
<h4>●Grid system (グリッドシステム)</h4>
Layout > Grid
このように仕分けができます
![スクリーンショット 2021-06-09 9.22.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/04b14bf0-a074-f154-1a9a-a91ee6d1612f.png)

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

<hr>

<h4>●グリッドシステムを活用して縦の位置などアレンジを加える</h4>
Layout > Colimns

![One of three columns One of three columns.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/621ba9a2-f524-09d1-883b-6fddc0f918af.png)

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


#  Content (カテゴリー)

<h4>●本文や見出し、リストを作る</h4>
Content > Typography

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

<hr>

<h4>●画像の差し込み</h4>
Content > Images 

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

<hr>

<h4>●テーブルの作成</h4>
Content > tables
![Thornton.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/fcf3d12c-181c-af28-8b48-d4502780deb4.png)

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



# Forms(カテゴリー)
<h4>●フォームの基礎となる部分</h4>
Forms > overview

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

<hr>

<h4>●フォームのスタイルやサイズなどの調整</h4>
Forms > form-control

https://getbootstrap.jp/docs/5.0/forms/form-control/

<hr>

<h4>●フォームのセレクトメニューを作成</h4>
Forms > select
![• Open this select menu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/48b256b4-b7f1-bfb4-3150-0357ebe0536f.png)

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

<hr>

<h4>●チェックやラジオボタンの作成</h4>
Forms > checks-radios
![Default checkbox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/996bdddd-b85d-c7a4-034a-bacdf9254de9.png)

https://getbootstrap.jp/docs/5.0/forms/checks-radios/

<hr>

<h4>●範囲を選択できるレンジの実装</h4>
Forms > range

![Example range.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/2a1f675c-80e9-e31c-81d6-a852b1eff326.png)

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

<hr>

<h4>●フォームに事前に用意した文字をはめ込む</h4>
Forms > input-group

![Username.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/0926a38e-d7d1-005c-61bb-101379052dba.png)

https://getbootstrap.jp/docs/5.0/forms/input-group/

<hr>

<h4>●写真のようにフォームの中に文字を残す</h4>
Forms > floating-labels

![Email address.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/9ea45209-0912-b342-d4f8-28519b96d374.png)

https://getbootstrap.jp/docs/5.0/forms/floating-labels/

<hr>

<h4>●グリッドシステムを活用し、フォームの横並びなどが可能</h4>
Forms > layout

![Password.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/94dd27ed-0363-fd13-ba17-5b552a9a9b3e.png)

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

<hr>

<h4>●バリデーションの設定</h4>
Forms > validation

![First name.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/4afd70d9-bb23-dd71-0581-505e29fb9fd5.png)

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



# 他のカテゴリーの早見表はこちらです！

Compomentsカテゴリー : https://qiita.com/kenta-nishimoto-1111/items/8c5e89e082ecdbd0e505