トップページ画像

Bootstrapを学ぶ

作成日時:2025年3月19日

Bootstrapについて、後学のためにメモしていこうと思う。

Bootstrapの基本的な使い方は以下記事を参考に。

https://zenn.dev/yamap_web/articles/a2d4d213d4eb48

基本的なクラスはチートシートを参照するとよさそう。

https://bootstrap-cheatsheet.themeselection.com/


Bootstrapで使用できるユーティリティクラス一覧

width, height, margin, padding, text-align, font-size など

Bootstrapで提供されるUIコンポーネント一覧

ボタン、モーダル、入力フィールド

Bootstrapは便利なアイコンも提供しているようです。

https://icons.getbootstrap.com/
・CDNのリンクをhtmlのheadにコピペ
・使用したいアイコンを選び、Icon Fontをhtml内にコピペ

ブレイクポイント、グリッドシステム、コンテナクラスもBootstrapとして用意されています。

ブレイクポイント(各クラスの接頭辞としてつけることで適用される)
例 md:768以上、xl:1200以上
グリッドシステム(画面幅を12分割して計算される)
例 col-6 col-md-3(小さな画面では幅6/12、768px以上では幅3/12のカラム)