第二十四谈：输入框

本节课我们来开始学习 Bootstrap 的提供输入框组件样式功能。

一．输入框

1. 输入框就是<input>标签元素的强化版组件样式，提供更加丰富的样式；
2. 输入框组件的核心就是.input-group 内部包含的表单样式；

      <form action="" class="form-row">
          <div class="form-group col-sm-6">
              <label for="user">用户名：</label>
              <div class="input-group">
                  <div class="input-group-prepend">
                      <span class="input-group-text">@</span>
                  </div>
                  <input type="text" id="user" class="form-control" placeholder="请输入用户名">
              </div>
          </div>
          <div class="form-group col-sm-6">
              <label for="email">邮箱：</label>
              <div class="input-group">
                  <input type="text" id="email" class="form-control" placeholder="请输入邮箱">
                  <div class="input-group-append">
                      <span class="input-group-text">@163.com</span>
                  </div>
              </div>
          </div>
          <div class="form-group col-sm-6">
              <label for="check">复选框：</label>
              <div class="input-group">
                  <div class="input-group-prepend">
                      <span class="input-group-text">
                          <input type="checkbox">
                      </span>
                  </div>
                  <input type="input" id="check" class="form-control" placeholder="复选框">
              </div>
          </div>
          <div class="form-group col-sm-6">
              <label for="radio">单选框：</label>
              <div class="input-group">
                  <div class="input-group-prepend">
                      <span class="input-group-text">
                          <input type="radio">
                      </span>
                  </div>
                  <input type="input" id="radio" class="form-control" placeholder="单选框">
              </div>
          </div>
      </form>

3. .input-group-lg(sm)等可以设置输入框组件大小；
4. 支持多控件输入模式，也支持多提示模式和按钮模式；

      <div class="form-group col-sm-12">
          <label for="email">多空间输入模式：</label>
          <div class="input-group">
              <div class="input-group-prepend">
                  <span class="input-group-text">姓</span>
                  <span class="input-group-text">名</span>
              </div>
              <input type="text" class="form-control" placeholder="姓">
              <input type="text" class="form-control" placeholder="名">
          </div>
      </div>
      <button class="btn btn-outline-secondary">button</button>
      <button class="btn btn-outline-secondary">button</button> 

5. 支持按钮的下拉菜单模式；

      <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
          button
      </button>
      <div class="dropdown-menu">
          <a class="dropdown-item" href="#">菜单 1</a>
          <a class="dropdown-item" href="#">菜单 2</a>
          <a class="dropdown-item" href="#">菜单 3</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">菜单 4</a>
      </div>

6. 支持 select 下拉菜单模式；

      <div class="form-group col-sm-12">
          <label for="email">选择下拉菜单：</label>
          <div class="input-group">
              <div class="input-group-prepend">
                  <span class="input-group-text">选择城市</span>
              </div>
              <select class="custom-select" name="" id="">
                  <option selected>请选择：</option>
                  <option value="1">北京</option>
                  <option value="2">上海</option>
              </select>
          </div>
      </div>

7. 支持 file 上传文件的组件样式；

      <div class="form-group col-sm-12">
          <label>选择上传文件：</label>
          <div class="input-group">
              <div class="input-group-prepend">
                  <span class="input-group-text">URL</span>
              </div>
              <div class="custom-file">
                  <input type="file" class="custom-file-input" id="file">
                  <label class="custom-file-label" for="file">选择文件</label>
              </div>
          </div>
      </div>

      $('#file').change(function(e) {
          $('.custom-file-label').html(e.target.files[0].name);
      });