JS读书笔记30天 - Day26 Bootstrap的Class设定3

表单

一般input、textarea、select（包含多重选择）

结构

1. 最外层：Class中加上form-group，作用为调整间距。
2. <label>上：不加BS4的Class
3. <input>本身：Class中加上form-control
4. <small>上：加form-text，作用为调整间距。

ex：

<div class="form-group">
  <label for="test">LABEL</label>
  <input type="email" id="test">
  <small>测试</small>
</div>

注意事项

1. 可以自由选择是否要加<small>，不一定需要使用<small>
2. input中的type要写清楚
3. 多重选择时，<select>中加入属性multiple

checkbox、radio

结构

1. 最外层：Class中加上form-check，作用为调整间距。
2. <input>本身：Class中加上form-check-input
3. <label>上：Class中加上form-check-label

ex：

<div class="form-group">
  <input type="checkbox" id="test">
  <label for="test">LABEL</label>
</div>

注意事项

1. 注意<input>和<label>顺序不要出错
2. 当多个选项想排在同一行时，在form-check後加form-check-inline来实现