詳解了解Bootstrap中的表單控件

本篇文章帶大家詳解了解一下Bootstrap中的表單控制項。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

基本實例

---

#單獨的表單控制項會自動被賦予一些全域樣式。所有設定了.form-control 類別的、 和 元素都會被預設設定寬度屬性為width: 100%;。將 label 元素和前面提到的控制項包裹在 .form-group 中可以獲得最好的排列。

不要將表單組和輸入框組混合使用不要將表單組直接和輸入框組混合使用。建議將輸入框組嵌套到表單組中使用。

相關推薦：《bootstrap教學》

#內嵌表單

---

##為

元素新增.form-inline 類別可使其內容左對齊並且表現為inline-block 層級的控制項。 只適用於視窗（viewport）至少在 768px 寬度時（視窗寬度再小的話就會使表單折疊）。

可能需要手動設定寬度

在Bootstrap 中，輸入框和單選/多選框控制項預設為width: 100%; 寬度。在內聯表單，我們將這些

元素的寬度設為 width: auto;，因此，多個控制項可以排列在同一行。根據你的佈局需求，可能需要一些

額外的客製化元件。

一定要新增 label 標籤

如果你沒有為每個輸入控制設定 label 標籤，螢幕閱讀器將無法正確辨識。對於這些內聯表單，你可以透過為

label 設定 .sr-only 類別將其隱藏。還有一些輔助技術提供label標籤的替代方案，

例如 aria-label、aria-labelledby 或 title 屬性。如果這些都不存在，螢幕閱讀器可能會採取使用

placeholder 屬性，如果存在的話，使用佔位符來替代其他的標記，但要注意，這種方法是不妥當的。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

水平排列的表單

---

透過為表單添加

.form-horizo​​ntal 類，並聯合使用Bootstrap 預置的柵格類，可以將label 標籤和控件組水平並排佈局。這樣做將改變 .form-group 的行為，使其表現為柵格系統中的行（row），因此就無需再額外添加 .row 了。

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

#被支援的控制項

---

表單佈局實例中展示了其所支持的標準表單控制項。

輸入框

#包含大部分錶單控制項、文字輸入域控件，也支援所有HTML5 類型的輸入控制項：

text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、 tel 和color。

必須新增類型宣告

只有正確設定了 type 屬性的輸入控制項才能被賦予正確的樣式。

輸入控制項群組

如需在文字輸入網域 前面或後面加入文字內容或按鈕控制項，請參考輸入控制項組。

文字網域

支援多行文字的表單控制項。可依需要改變

rows 屬性。

多选和单选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent <label></label>, you'll need to add the .disabled class to the parent .radio, .radio-inline, .checkbox, or .checkbox-inline.

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it&#39;s great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it&#39;s great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

内联单选和多选框

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

不带label文本的Checkbox 和 radio

如果需要 <label></label> 内没有文字，输入框（input）正是你所期望的。 目前只适用于非内联的 checkbox 和 radio。 请记住，仍然需要为使用辅助技术的用户提供某种形式的 label（例如，使用 aria-label)

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

更多编程相关知识，请访问：编程视频！！

以上是詳解了解Bootstrap中的表單控件的詳細內容。更多資訊請關注PHP中文網其他相關文章！