前回に続き、bulmaフレームワークのCSSのformがらみに関して。
ソースはこちら
メモ的に。
- controlはinput,select,textareaなどをwrappingする要素。通常だとあまりその効果は見えないが、後述する横並びの時に均等なmarginをとったりするなど他のクラスとの合わせ技で効果を発揮する。自動的につけてしまってもいいかも。
- field通常はlabel,inpuの外側からつける場合、下にmarginを自動的に取る。field is-groupedで内部要素を一気にflexにできる。この時controlがあれば同一のmarginを取る
- field-label,field-bodyは横に並び、なおかつflex-growを1:5で割り合てる。
- field is-groupedにした場合、並べる要素に文字列などのインラインがある場合は、controlとinline-iconをspanなどに付与してあげると、綺麗に並び(marginが均等)、なおかつ縦中央も決まる(align-item:center)。
- ボタンなども.control>.buttonを使うとやはり均等に並べることができる
- selectは.control>.select>selectという並びで配置。文字列はcontrol+inline-iconを使うと綺麗に並ぶ。
- class=labelは太字+display:block。
