這篇文章將為大家詳細講解有關Bootstrap表單控件怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創新互聯歡迎聯系：18982081108，為您提供成都網站建設網頁設計及定制高端網站建設服務，創新互聯網頁制作領域10余年，包括木托盤等多個方面擁有豐富的網站設計經驗，選擇創新互聯，為企業保駕護航！

具體內容如下

輸入框（Input）

最常見的表單文本字段是輸入框 input。用戶可以在其中輸入大多數必要的表單數據。
Bootstrap 提供了對所有原生的 HTML5 的 input 類型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

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

文本框（Textarea）

當您需要進行多行輸入的時，則可以使用文本框 textarea。
必要時可以改變 rows 屬性（較少的行 = 較小的盒子，較多的行 = 較大的盒子）。（超過這個值就會產生滾動條）

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

復選框（Checkbox）和單選框（Radio）

（1）復選框和單選按鈕用于讓用戶從一系列預設置的選項中進行選擇。
（2）當創建表單時，如果您想讓用戶從列表中選擇若干個選項時，請使用 checkbox。如果您限制用戶只能選擇一個選項，請使用 radio。
（3）對一系列復選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上。

<label for="name">默認的復選框和單選按鈕的實例</label>
<div class="checkbox">
 <label>
  <input type="checkbox" value="">選項1
 </label>
</div>

<div class="checkbox">
 <label>
  <input type="checkbox" value="">選項2
 </label>
</div>

<div class="checkbox">
 <label>
  <input type="checkbox" value="">選項3
 </label>
</div>

<div class="radio">
 <label>
  <input type="radio" name="optionsRadios" id="optionsRadio1" value="options1" checked>選項1
 </label>
</div>

<div class="radio">
 <label>
  <input type="radio" name="optionsRadios" id="optionsRadio2" value="options2" checked>選項2- 選擇它將會取消選擇選項 1
 </label>
</div>

<label for="name">內聯的復選框和單選按鈕的實例</label>
<div>
 <label class="checkbox-inline">
  <input type="checkbox" value="">選項1
 </label>

 <label class="checkbox-inline">
  <input type="checkbox" value="">選項2
 </label>

 <label class="checkbox-inline">
  <input type="checkbox" value="">選項3
 </label>

 <label class="radio-inline">
  <input type="radio" name="optionsRadios" id="optionsRadio1" value="options1" checked>選項1
 </label class="radio-inline">

 <label>
  <input type="radio" name="optionsRadios" id="optionsRadio2" value="options2" checked>選項2
 </label>
</div>

選擇框（Select）
（1）當您想讓用戶從多個選項中進行選擇，但是默認情況下只能選擇一個選項時，則使用選擇框。
（2）使用 <select> 展示列表選項，通常是那些用戶很熟悉的選擇列表，比如州或者數字。
（3）使用 multiple=”multiple” 允許用戶選擇多個選項。

<form role="form">
 <div class="form-group>
  <label for="name">選擇列表</label>
  <select class="form-control">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
  </select>

  <label for="name">可多選的選擇列表</label>
  <select class="form-control" multiple>
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
  </select>
 </div>
</form>

靜態控件

需要在一個水平表單內的表單標簽后放置純文本時，請在<p>上使用 class .form-control-static。

<form class="form-horizontal" role="form">
 <div class="form-group">
  <label class="col-sm-2 control-label">Email</label>
  <div class="col-sm-10">
   <p class="form-control-static">email@example.com</p>
  </div>
 </div>

 <div class="form-group">
  <label for="inputPassword" class="col-sm-2 control-label">密碼</label>
  <div class="col-sm-10">
   <input type="password" class="form-control" id="inputPassword" placeholder="請輸入密碼">
  </div>
 </div>
</form>

表單控件狀態

（1）除了 :focus 狀態（即，用戶點擊 input 或使用 tab 鍵聚焦到 input 上），Bootstrap 還為禁用的輸入框定義了樣式，并提供了表單驗證的 class。
（2）輸入框焦點：當輸入框 input 接收到 :focus 時，輸入框的輪廓會被移除，同時應用 box-shadow。
（3）禁用的輸入框 input：如果您想要禁用一個輸入框 input，只需要簡單地添加 disabled 屬性，這不僅會禁用輸入框，還會改變輸入框的樣式以及當鼠標的指針懸停在元素上時鼠標指針的樣式。
（4）禁用的字段集 fieldset：對 <fieldset> 添加 disabled 屬性來禁用 <fieldset> 內的所有控件。
（5）驗證狀態：Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。只需要對父元素簡單地添加適當的 class（.has-warning、 .has-error 或 .has-success）即可使用驗證狀態。

<form class="form-horizontal" role="form">
 <div class="form-group">
  <label class="col-sm-2 control-label">聚焦</label>
  <div class="col-sm-10">
   <input class="form-control" id="focusedInput" type="text" value="該輸入框獲得焦點...">
  </div>
 </div>

 <div class="form-group">
  <label for="inputPassword" class="col-sm-2 control-label">禁用</label>
  <div class="col-sm-10">
   <input class="form-control" id="disabledInput" type="text" placeholder="該輸入框禁止輸入..." disabled>
  </div>
 </div>

 <fieldset disabled>
  <div class="form-group">
   <label for="disabledTextInput" class="col-sm-2 control-label">禁用輸入（Fieldset disabled）</label>
   <div class="col-sm-10">
    <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入">
   </div>
  </div>

  <div class="form-group">
   <label for="disabledSelect" class="col-sm-2 control-label">禁用選擇菜單（Fieldset disabled）</label>
   <div class="col-sm-10">
    <select id="disabledSelect" class="form-control">
     <option>禁止選擇</option>
    </select>
   </div>
  </div>
 </fieldset>

 <div class="form-group has-success">
  <label class="col-sm-2 control-label" for="inputSuccess">輸入成功</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" id="inputSuccess">
  </div>
 </div>

 <div class="form-group has-warning">
  <label class="col-sm-2 control-label" for="inputWarning">輸入警告</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" id="inputWarning">
  </div>
 </div>

 <div class="form-group has-error">
  <label class="col-sm-2 control-label" for="inputError">輸入錯誤</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" id="inputError">
  </div>
 </div>
</form>

表單控件大小

可以分別使用 class .input-lg 和 .col-lg-* (<input>)來設置表單的高度和寬度。

關于“Bootstrap表單控件怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務器可以了解下創新互聯建站vcdvsql.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章名稱：Bootstrap表單控件怎么用-創新互聯
本文路徑：http://vcdvsql.cn/article14/epcge.html

成都網站建設公司_創新互聯，為您提供微信公眾號、面包屑導航、ChatGPT、品牌網站制作、關鍵詞優化、網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯