6g下載網
當前位置: 主頁 > 軟件教程 > 編程開發 >

Bootstrap如何控制表單控件大小?Bootstrap控制表單控件大小方法

時間: 2016-09-07 13:28 來源: 6g下載網

分享到:

今天小編整理一篇Bootstrap如何控制表單控件大小?Bootstrap控制表單控件大小方法的文章和大家分享,希望能給大家提供幫助。

問題分析:

可以通過設置控件的height,line-height,padding和font-size等屬性來實現控件的高度設置。不過Bootstrap框架還提供了兩個不同的類名,用來控制表單控件的高度。這兩個類名是:

1、input-sm:讓控件比正常大小更小

2、input-lg:讓控件比正常大小更大

這兩個類適用于表單中的input,textarea和select控件。

Bootstrap控制表單控件大小方法源代碼:

  1. <form role="form"> 
  2.   <div class="form-group"> 
  3.     <label class="control-label">控件變大</label> 
  4.     <input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件變大"> 
  5.   </div> 
  6.   <div class="form-group"> 
  7.     <label class="control-label">正常大小</label> 
  8.     <input class="form-control" type="text" placeholder="正常大小"> 
  9.   </div>    
  10.   <div class="form-group"> 
  11.     <label class="control-label">控件變小</label> 
  12.     <input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件變小"> 
  13.   </div>   
  14. </form>  

Bootstrap控制表單控件大小方法效果圖:

Bootstrap如何控制表單控件大小?Bootstrap控制表單控件大小方法

Bootstrap如何控制表單控件大小?Bootstrap控制表單控件大小方法的文章和大家分享結束,感謝閱讀!

(責任編輯:6g下載網)
標簽:Bootstrap 表單

分享到:

------分隔線----------------------------
? 35选7福利彩票