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

全面解析Bootstrap表單使用方法(表單控件)

 更新時間:2015年11月24日 09:27:22   作者:傻籽  
這篇文章全面解析了Bootstrap表單的使用方法,本文重點介紹Bootstrap表單控件,感興趣的小伙伴們可以參考一下

一、輸入框input

  單行輸入框,常見的文本輸入框,也就是input的type屬性值為text。

  在Bootstrap中使用input時也必須添加type類型,如果沒有指定type類型,將無法得到正確的樣式,因為Bootstrap框架都是通過input[type=“?”]

(其中?號代表type類型,比如說text類型,對應(yīng)的是input[type=“text”])的形式來定義樣式的。

  為了讓控件在各種表單風(fēng)格中樣式不出錯,需要添加類名“.form-control”。

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>

 

二、下拉選擇框select

  Bootstrap框架中的下拉選擇框使用和原始的一致,多行選擇設(shè)置multiple屬性的值為multiple。

<form role="form">
<div class="form-group">
 <select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
 </div>
 <div class="form-group">
 <select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
</div>
</form>


三、文本域textarea

  文本域和原始使用方法一樣,設(shè)置rows可定義其高度,設(shè)置cols可以設(shè)置其寬度。

  但如果textarea元素中添加了類名“.form-control”類名,則無需設(shè)置cols屬性。

  因為Bootstrap框架中的“form-control”樣式的表單控件寬度為100%或auto。

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

四、復(fù)選框checkbox和單選擇按鈕radio

  1、不管是checkbox還是radio都使用label包起來了
  2、checkbox連同label標(biāo)簽放置在一個名為“.checkbox”的容器內(nèi)
  3、radio連同label標(biāo)簽放置在一個名為“.radio”的容器內(nèi)

<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
記住密碼
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜歡
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜歡
</label>
</div>
</form>

五、復(fù)選框和單選按鈕水平排列
  1、如果checkbox需要水平排列,只需要在label標(biāo)簽上添加類名“.checkbox-inline”
  2、如果radio需要水平排列,只需要在label標(biāo)簽上添加類名“.radio-inline”

<form role="form">
 <div class="form-group">
 <label class="checkbox-inline">
 <input type="checkbox" value="option1">游戲
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" value="option2">攝影
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" value="option3">旅游
 </label>
 </div>
 <div class="form-group">
 <label class="radio-inline">
 <input type="radio" value="option1" name="sex">男性
 </label>
 <label class="radio-inline">
 <input type="radio" value="option2" name="sex">女性
 </label>
 <label class="radio-inline">
 <input type="radio" value="option3" name="sex">中性
 </label>
 </div>
</form>

六、表單控件大小
Bootstrap框架還提供了兩個不同的類名,用來控制表單控件的高度。這兩個類名是:
  1、input-sm:讓控件比正常大小更小
  2、input-lg:讓控件比正常大小更大
這兩個類適用于表單中的input,textarea和select控件。

<input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件變大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件變小">

如果大家還想深入學(xué)習(xí),可以點擊這里進行學(xué)習(xí),再為大家附兩個精彩的專題:Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程

以上就是Bootstrap表單控件的使用方法,之后還有更多內(nèi)容會不斷更新,希望大家繼續(xù)關(guān)注。

相關(guān)文章

最新評論