1. 程式人生 > >bootstrap表單(6)

bootstrap表單(6)

垂直或基本表單
基本的表單結構是 Bootstrap 自帶的,個別的表單控制元件自動接收一些全域性樣式。下面列出了建立基本表單的步驟:

向父 元素新增 role=“form”。
把標籤和控制元件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
向所有的文字元素 <input>、<textarea> 和 <select> 新增 class =“form-control” 。

<form role="form">
  <div class="form-group">
    <label for="name">名稱</label>
    <input type="text" class="form-control" id="name" placeholder="請輸入名稱">
  </div>
  <div class="form-group">
    <label for="inputfile">檔案輸入</label>
    <input type="file" id="inputfile">
    <p class="help-block">這裡是塊級幫助文字的例項。</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">請打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>
內聯表單
如果需要建立一個表單,它的所有元素是內聯的,向左對齊的
,標籤是並排的,請向 <form> 標籤新增 class .form-inline。
<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="name">名稱</label>
    <input type="text" class="form-control" id="name" placeholder="請輸入名稱">
  </div>
  <div class="form-group">
    <label class="sr-only" for="inputfile">檔案輸入</label>
    <input type="file" id="inputfile">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">請打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

水平表單
水平表單與其他表單不僅標記的數量上不同,而且表單的呈現形式也不同。如需建立一個水平佈局的表單,請按下面的幾個步驟進行:

向父 <form> 元素新增 class .form-horizontal。
把標籤和控制元件放在一個帶有 class .form-group 的 <div>中。
向標籤新增 class .control-label。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">名字</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstname" placeholder="請輸入名字">
    </div>
  </div>
  <div class="form-group">
    <label for="lastname" class="col-sm-2 control-label">姓</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="lastname" placeholder="請輸入姓">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox">請記住我
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">登入</button>
    </div>
  </div>
</form>

輸入框(Input)
文字框(Textarea)
複選框(Checkbox)和單選框(Radio)
複選框和單選按鈕用於讓使用者從一系列預設定的選項中進行選擇。

當建立表單時,如果您想讓使用者從列表中選擇若干個選項時,請使用 checkbox。如果您限制使用者只能選擇一個選項,請使用 radio。
對一系列複選框和單選框使用 .checkbox-inline 或 .radio-inline class,控制它們顯示在同一行上。
選擇框(Select)
當您想讓使用者從多個選項中進行選擇,但是預設情況下只能選擇一個選項時,則使用選擇框。

使用 <select>展示列表選項,通常是那些使用者很熟悉的選擇列表,比如州或者數字。
使用 multiple=“multiple” 允許使用者選擇多個選項。
靜態控制元件
當您需要在一個水平表單內的表單標籤後放置純文字時,請在 <p>

上使用 class .form-control-static。
表單控制元件狀態
除了 :focus 狀態(即,使用者點選 input 或使用 tab 鍵聚焦到 input 上),Bootstrap 還為禁用的輸入框定義了樣式,並提供了表單驗證的 class。

輸入框焦點
當輸入框 input 接收到 :focus 時,輸入框的輪廓會被移除,同時應用 box-shadow。

禁用的輸入框 input
如果您想要禁用一個輸入框 input,只需要簡單地新增 disabled 屬性,這不僅會禁用輸入框,還會改變輸入框的樣式以及當滑鼠的指標懸停在元素上時滑鼠指標的樣式。

禁用的欄位集 fieldset
<fieldset> 新增 disabled 屬性來禁用 <fieldset> 內的所有控制元件。

驗證狀態
Bootstrap 包含了錯誤、警告和成功訊息的驗證樣式。
只需要對父元素簡單地新增適當的 class(.has-warning、
.has-error 或 .has-success)即可使用驗證狀態。

表單控制元件大小
您可以分別使用 class .input-lg 和 .col-lg-* 來設定表單的高度和寬度。