2019年10月12日及び13日の学習メモを以下に残す。
ーーーーーーーーーーBootstrapーーーーーーーーーーーーーー
CSSでクラス指定して書いていたデザインもbootstrapを使うことで
class＝””の中に書くだけで簡単に指定できる。
ただし、bootstrapにはimportantという指定がされていて他のクラスで上書きできない。
CSSで指定してもbootstrapが優先される。
【文字色指定】
【背景色指定】
【width,height】
width:25%;→w-25
height:25%;→h-25
25,50,75に使える。
【余白】
[p|m][location]-[size]
p:padding /:margin
location t:top r:right b:bottom l:left x y
size 0~5 marginのみautoも
1:0.25rem
2:0.5rem
3:1rem
4:1.5rem
5:3rem
【ボタン】
btn-primaryで青いボタン
btn-sm:小さいボタン
btn-lg:大きいボタン
divタグやaタグにも使える
【グリッドレイアウト】
グリッドレイアウトを使うには全体をある程度の幅を持たせて中央ぞろえにするocntainerクラスの中に書く
row（列）
col（行）
row-4など指定するお12分割で割合を指定できる
12より小さい指定は足りない部分が空白に。
12より大きい指定は次の行へ。
【レスポンシブ】
Bootstrapでは４つのブレークポイントを用意。
576px以上:sm(small)
768px以上:md(midium)
992px以上lg(large)
1200px以上:xl(extralarge)
col-md-2と書くことでmd以上のときに2に指定できる。
d-noneで非表示。col-2 のあとにd-md-noneなど。
d-none のあとに d-md-blockとすることで閾値以上のとき表示
【画像切り抜き】
rounded-circleで画像を丸く切り抜く
【順序指定】
order-sm-1
order-sm-2
などと書くことで順序を指定できる。sm以上のとき1が先に来る。
≪おまけ：VSCodeで使えるショートカットキー≫
ctrl+c→ctrl+v1行下にコピー
ctrl+k→ctrl+cコメントアウト
ctrl+Alt+Enter→上に空白行追加
ctrl+Enter→下に空白行追加