Bootstrap学习3

一、表单控件

水平表单：

<form  class="form-horizontal" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">邮箱</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
  </div>
  </form>

内联表单：

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">邮箱</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
  </div>
  </form>

输入框：

<form role="form">
  <div class="form-group">
    <input type="email" class="form-control" placeholder="Enter email">
    <input type="text" class="form-control" placeholder="Enter username">
    </div>
</form>

选择框：两种样式：下拉选择框或多行选择

<form role="form">
  <div class="form-group">
    <select class="form-control"> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
      <option>5</option> 
      </select>
  </div>
  <div class="form-group">
      <select multiple class="form-control"> 
        <option>踢足球</option> 
        <option>游泳</option> 
        <option>慢跑</option> 
        <option>跳舞</option> 
      </select>
  </div>
</form>

复选框和单选按钮：能够设置水平排列

<form role="form">
  <h3>案例1</h3>
  <div class="checkbox">
    <label> <input type="checkbox" value=""> 记住密码 </label>
  </div>
  <div class="radio">
    <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>喜欢 </label>
  </div>
    <div class="radio">
    <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">不喜欢</label>
  </div> 
</form>