Bootstrap初級學習(一)表單

  • 垂直表單(默認)
  • 內聯表單
  • 水平表單(常用 以此爲例)

<form class="form-horizontal" role="form"> 
在父form中必須添加from-horizontal類
  <div class="form-group">
  (((((將所有標籤和空間放在form-group的div裏

  <label for="firstName" class="control-label col-sm-2">名字</label>
  (((((對於label內容,必須加入class="control-label",for表示這個label綁定哪個控件,與對應控件的id相同

     <div class="col-sm-10">
     <input type="text" class="form-control" id="firstName" placeholder="請輸入名字">
     ((((將控件再放在一個div中,該div加入class="col-sm-xxx"
     ((((對於控件內容,必須加入class="form-control",控件id要與對應labelfor相同,placeholder表示控件內提示內容
     </div>
    ((((再另起一行寫 性別 的時候又重複<div class="form-group"></div>內容
  </div>
</form>


  • 其他屬性
    • class=”input-group-addon”
      爲 .input-group 賦予 .input-group-addon 類,可以給 .form-control 的前面或後面添加額外的元素。
    • class=”checkbox-inline ”
      將 .checkbox-inline 或 .radio-inline 類應用到一系列的多選框(checkbox)或單選框(radio)控件上,可以使這些控件排列在一行。
    • class=”col-sm-offset-2”
      向右偏移col-sm-2
    • class=”btn”
      button類,包括btn-default 默認樣式/ btn-danger 紅色樣式/ btn-info 藍色樣式 等
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章