はじめに

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

英語ができないせいか、こちらの図の左側の目次だけでは全然目的にものにたどり着けなかったです💦

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

開発環境

Bootstamp バージョン５
Ruby on Rails バージョン2.6.5

Layput(カテゴリー)

●Grid system (グリッドシステム)

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)

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

Layout > Colimns

Content (カテゴリー)

●本文や見出し、リストを作る

Content > Typography

●画像の差し込み

Content > Images

●テーブルの作成

Content > tables ![Thornton.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/fcf3d12c-181c-af28-8b48-d4502780deb4.png)

Forms(カテゴリー)

●フォームの基礎となる部分

Forms > overview

●フォームのスタイルやサイズなどの調整

Forms > form-control

●フォームのセレクトメニューを作成

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)

●チェックやラジオボタンの作成

Forms > checks-radios ![Default checkbox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1623096/996bdddd-b85d-c7a4-034a-bacdf9254de9.png)

●範囲を選択できるレンジの実装

Forms > range

●フォームに事前に用意した文字をはめ込む

Forms > input-group

●写真のようにフォームの中に文字を残す

Forms > floating-labels

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

Forms > layout

●バリデーションの設定

Forms > validation

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

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