Bootstrap 表單控件一(單行輸入框input,下拉選擇框select ,文本域textarea)


 

單行輸入框,常見的文本輸入框,也就是inputtype屬性值為text。在Bootstrap中使用input時也必須添加type類型,如果沒有指定type類型,將無法得到正確的樣式,因為Bootstrap框架都是通過input[type=“?”](其中?號代表type類型,比如說text類型,對應的是input[type=“text”])的形式來定義樣式的。

為了讓控件在各種表單風格中樣式不出錯,需要添加類名“form-control”,如:

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>
運行的結果

表單控件(下拉選擇框select)

Bootstrap框架中的下拉選擇框使用和原始的一致,多行選擇設置multiple屬性的值為multiple。Bootstrap框架會為這些元素提供統一的樣式風格。

 

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

文本域和原始使用方法一樣,設置rows可定義其高度,設置cols可以設置其寬度。但如果textarea元素中添加了類名“form-control”類名,則無需設置cols屬性。因為Bootstrap框架中的“form-control”樣式的表單控件寬度為100%auto

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

 

 

 
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM