bootstrapについて(簡易)

bootstrapはcssのフレームワークのことで、htmlでクラスを追加することでcssを設定できるので設定しやすいのと、保守性がある
また、レスポンシブシステムにも対応していて、デザイン性もある
導入も簡単で、公式サイトの CDNをコピーして貼るだけ

グリッドシステム

クラスにcol-{breakpoint}-数値(12分のなんぼか)
ex)  containerの中のrowのクラスに入れると一行の中で同じ兄弟要素の中で合計12個までなら埋まっていき、溢れた分は下の行へ移る
また、breakpointはsm,md,lg,xlから選んでそのサイズのレスポンシブに対応
breakpointの数字までは横の数値で、それ以下はcol-12になる

marginとpaddingもm(下の)-数値,p(下の)-数値で設定
数値は1から5まで
t : top
b : bottom
l : left
r : right
x : left と right
y : top と bottom
指定なし : top と bottom と left と right

他にも便利なシステムがあり、公式サイトのDocumentationのcontentとかに書いてあるので公式サイトを見ながら書くのがいいかな、
あとはお金が貯まったらまた本とか買って勉強してここに注ぎ足す予定

bootstrap はモバイルファースト

この記事が気に入ったらサポートをしてみませんか?