说明

本文每个bootstra4的class用法和HTML结构相关
结构和样式的表明用css选择器简单表示
其中[]代表可选，||代表或者
data-是H5中数据存储的方式，
在bootstrap4中不能缺省，用[]进行表示，会和class分开

表单

默认垂直排列，表单控件占满一行,
form添加.form-inline水平排列

<form>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

bootstrap4支持以下表单控件
input,textarea,checkbox,radio,select
Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。

textarea

<div class="form-group">
  <label for="comment">评论:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

checkbox

div.from-check[.form-check-inline]
    label.form-check-label{Option1}
        input.form-check-input[checkbox][value=""]
    label.form-check-label{Option2}
        input.form-check-input[checkbox][value="" type="checkbox"][disabled]

注：默认垂直排列，添加.form-check-inline水平显示,在input上添加disable标签属性可实现禁用多选框

<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check form-check-inline disabled">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>Option 3
  </label>
</div>

radio

div.radio
    label{Option1}[.radio-inine]
        input[type="radio" name="optradio"]
div.radio
    label{Option2}[.radio-inine]
        input[type="radio" name="optradio"][disabled]

注：.radio-inline用于单选框水平显示

<div class="radio">
  <label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>Option 3</label>
</div>

select

<div class="form-group">
  <label for="sel1">下拉菜单:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>