More than 3 years have passed since last update.

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

Last updated at 2021-07-02Posted at 2021-06-27

はじめに

今回は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)