5.form.html(その2)
(2)form-horizontal
form.htmlの最初のタグは<div class="form-horizontal">
と記載します。
これにより、実際のプラグインの中央パーツ部分 plugin-form-body
内部に余白が上・左右余白20px,下余白5pxの描画領域が生成される。
(プラグインの各パーツは余白内に配置される)
上の画像では開発者ツールでの当該領域を選択した際の画面のハイライトを表示しています。緑外枠部分は "padding" という余白領域になります。
(3)form-group
form-horizontal 内部に後述のグリッドレイアウトでサイズを指定したパーツを配置する場合、まずは<div class="form-group">
と指定したパーツを配置する。
本パーツはスタイルとして次のパーツとの下余白:15px、左右余白:-15px設定されており、
各パーツ間の下余白を設けることで見た目のバランスを整え、左右余白を-15px切り詰めすることで、後述のグリッドレイアウトの場合の最左・最右の余白をキャンセルする効果もある。
なお、 h* ・p・pre タグなどで直接説明やタイトルを記載する場合はform-groupで囲まなくとも良い(逆にform-groupで囲むとform-horizontalで指定した左右余白が15ピクセル足りなくなる)。
<h4>Store tag_cache and playlists in the NAS</h4>