欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入學(xué)習(xí)Bootstrap表單

 更新時間：2016年12月13日 11:39:21   作者：Tiramisu_C  
這篇文章主要為大家詳細介紹了Bootstrap表單的基礎(chǔ)知識，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文知識點借鑒來自http://www.runoob.com/bootstrap/bootstrap-forms.html，里面寫的比較詳細還給出了例子，這里總結(jié)一下重點方便記憶。

一、表單布局

1.垂直表單（默認(rèn)）

        向父 <form> 元素添加 role="form"。
        把標(biāo)簽和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
        向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

<form action="#" role="form"> 
  <div class="form-group"> 
   <lable>姓名：<input class="form-control" type="text"/></lable> 
   <lable>性別：<input class="form-control" type="text"/></lable> 
  </div> 
 </form>

2.內(nèi)聯(lián)表單

向 <form> 標(biāo)簽添加 class .form-inline；       
默認(rèn)情況下，Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內(nèi)聯(lián)表單時，您需要在表單控件上設(shè)置一個寬度。
使用 class .sr-only，您可以隱藏內(nèi)聯(lián)表單的標(biāo)簽。

 3.水平表單        

    向父 <form> 元素添加 class .form-horizontal。       
    把標(biāo)簽和控件放在一個帶有 class .form-group 的 <div> 中。       
    向標(biāo)簽添加 class .control-label。

<form action="#" role="form" class="form-horizontal"> 
  <div class="form-group"> 
   <lable class="control-label col-lg-2">姓名：</lable> 
   <div class=" col-lg-10"><input class="form-control" type="text"/></div> 
 
   <lable class="control-label col-lg-2">性別：</lable> 
   <div class="col-lg-10"><input class="form-control " type="text"/></div> 
  </div> 
 </form>

 二、支持的表單控件

1.輸入框（Input）

<lable>姓名：<input class="form-control" type="text"/></lable> 

2.文本框（Textarea）  可改變 rows 屬性

<div class="form-group"> 
  <textarea rows="8" class="form-control"> 
 
   </textarea> 
 
 </div>

3.復(fù)選框（Checkbox）和單選框（Radio）        
    當(dāng)創(chuàng)建表單時，如果您想讓用戶從列表中選擇若干個選項時，請使用 checkbox。如果您限制用戶只能選擇一個選項，請使用 radio。       
    對一系列復(fù)選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上。

<div class="checkbox-inline"> 
    <lable class="control-label"><input type="checkbox"/>籃球</lable> 
   </div> 
   <div class="checkbox-inline"> 
    <lable class="control-label"><input type="checkbox"/>音樂</lable> 
   </div> 
   <div class="checkbox-inline"> 
    <lable class="control-label"><input type="checkbox"/>繪畫</lable> 
   </div> 
   <div class="radio"> 
    <lable><input type="radio"/>男</lable> 
   </div> 
   <div class="radio"> 
    <lable><input type="radio"/>女</lable> 
   </div>

 4.選擇框（Select）        

    使用 <select> 展示列表選項，通常是那些用戶很熟悉的選擇列表，比如州或者數(shù)字。       
    使用 multiple="multiple" 允許用戶選擇多個選項。

<div class="form-group"> 
     <select name="" id="" class="form-control" multiple> 
      <option value="">1</option> 
      <option value="">1</option> 
      <option value="">1</option> 
      <option value="">1</option> 
      <option value="">1</option> 
     </select> 
    </div>

 5.靜態(tài)控件        

當(dāng)您需要在一個水平表單內(nèi)的表單標(biāo)簽后放置純文本時，請在 <p> 上使用 class .form-control-static。

<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>

三、表單控件狀態(tài)

1.輸入框焦點        

當(dāng)輸入框 input 接收到 :focus 時，輸入框的輪廓會被移除，同時應(yīng)用 box-shadow。   

2.禁用的輸入框 input        

如果您想要禁用一個輸入框 input，只需要簡單地添加 disabled 屬性，這不僅會禁用輸入框還，會改變輸入框的樣式以及當(dāng)鼠標(biāo)的指針懸停在元素上時鼠標(biāo)指針的樣式。

<div> 
  <lable>姓名：<input type="text" disabled class="form-control"/></lable> 
 </div>

3.禁用的字段集 fieldset        

對 <fieldset> 添加 disabled 屬性來禁用 <fieldset> 內(nèi)的所有控件。

4.驗證狀態(tài)        

Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。只需要對父元素簡單地添加適當(dāng)?shù)腸lass（.has-warning、 .has-error 或 .has-success）即可使用驗證狀態(tài)。

<div class="has-error"> 
  <lable class="control-label"> 
   姓名：<input type="text" class="form-control" placeholder="has-error"/> 
  </lable> 
</div> 
<div class="has-warning"> 
  <lable class="control-label"> 
   姓名：<input type="text" class="form-control" placeholder="has-warning"/> 
  </lable> 
</div>

 5.表單控件大小    

分別使用 class .input-lg(或.input-sm) 和 .col-lg-* 來設(shè)置表單的高度和寬度

<div class="form-group"> 
  姓名：<input type="text" class="form-control input-lg" placeholder="input-lg"/> 
  姓名：<input type="text" class="form-control input-sm" placeholder="input-sm"/> 
  姓名：<input type="text" class="form-control " placeholder="normal"/> 
</div>

 6.表單幫助文本

Bootstrap 表單控件可以在輸入框 input 上有一個塊級幫助文本。    為了添加一個占用整個寬度的內(nèi)容塊，請在 <input> 后使用 .help-block。

<div class="form-grounp"> 
  <input type="text"/> 
  <span class="help-block"> 
   Bootstrap 表單控件可以在輸入框 input 上有一個塊級幫助文本。 
  </span> 
</div>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論