bootstrap基本整理2

目錄

• bootstrap基本整理<2>
  • bootstrap表單
    • 基本表單
  • 支持的表單控件
    • 輸入框（input）
    • 文本框（textarea）
    • 複選框(checkbox)和單選框（radio）
  • bootstrap輔助類

bootstrap基本整理<2>

@[基本實例|基於bootstrap框架]

---

bootstrap表單

基本表單

Bootstrap 提供了下列類型的表單佈局：

• 垂直表單（默認）
• 內聯表單
• 水平表單

<!--基本實例-->
<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">
    </div>
    <div class="checkbox">
    <label>
      <input type="checkbox">請打勾
    </label>
    </div>
  <button type="submit" class="btn btn-default">提交</button>

基本的表單結構是 Bootstrap 自帶的，個別的表單控件自動接收一些全局樣式。下面列出了建立基本表單的步驟：

• 向父 <form> 元素添加 role="form"(標誌是一個form，爲了適應低版本瀏覽器)。
• 把標籤和控件放在一個帶有 class .form-group 的<div> 中。這是獲取最佳間距所必需的。
• 向全部的文本元素 <input>、<textarea> 和<select> 添加 class ="form-control" 。

• label的for屬性是爲了綁定相應的input

  內聯表單

  若是須要建立一個表單，它的全部元素是內聯的，向左對齊的，標籤是並排的，請向 <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>

• 默認狀況下，Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內聯表單時，您須要在表單控件上設置一個寬度。

• 使用 class .sr-only，您能夠隱藏內聯表單的標籤。

  水平表單

  水平表單與其餘表單不只標記的數量上不一樣，並且表單的呈現形式也不一樣。如需建立一個水平佈局的表單，請按下面的幾個步驟進行：

• 向父<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 和 select。

輸入框（input）

Bootstrap 提供了對全部原生的 HTML5 的 input 類型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。適當的 type 聲明是必需的，這樣才能讓 input 得到完整的樣式。

<form role="form">
  <div class="form-group">
    <label for="name">標籤</label>
    <input type="text" class="form-control" placeholder="文本輸入">
  </div>
 </form>

文本框（textarea）

當您須要進行多行輸入的時，則可使用文本框 textarea。必要時能夠改變 rows 屬性（較少的行 = 較小的盒子，較多的行 = 較大的盒子）

<form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

複選框(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-* 來設置表單的高度和寬度。

  bootstrap按鈕

  按鈕控件

  bootstrap圖片

  Bootstrap 提供了三個可對圖片應用簡單樣式的 class：

• .img-rounded：添加 border-radius:6px 來得到圖片圓角。
• .img-circle：添加 border-radius:50% 來讓整個圖片變成圓形。

• .img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。

經過在 <img> 標籤添加 .img-responsive 類來讓圖片支持響應式設計。 圖片將很好地擴展到父元素。
.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應用在圖片上

bootstrap輔助類

查看輔助類