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>