bootstrap輸入框組使用方法

2019-11-19 17:41:50

字體：大中小

供稿：網(wǎng)友

本文實(shí)例為大家分享了bootstrap輸入框組的使用方法，供大家參考，具體內(nèi)容如下

<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" /></head><body> <div class="container">  <div class="row">   <div class="input-group"><!--輸入框組-->    <span class="input-group-addon">@</span>    <!--input-group-addon給輸入框前后添加輔助的額外元素-->    <input type="text" class="form-control"/>   </div>  </div>  <!--輸入框組的大小-->  <div class="row" style="margin-top:10px;">   <div class="input-group input-group-lg">   <!--input-group-lg為輸入框組尺寸還有md,sm-->    <span class="input-group-addon">@</span>    <!--給輸入框前后添加輔助的額外元素-->    <input type="text" class="form-control"/>   </div>  </div>  <div class="row" style="margin-top:10px;">   <div class="input-group">    <span class="input-group-addon">     <input type="checkbox"/>     <!--輸入框組添加額外元素為checkbox，還可以是radio-->    </span>    <input type="text" class="form-control"/>   </div>  </div>  <div class="row" style="margin-top:10px;">   <div class="input-group">    <input type="text" class="form-control"/>    <span class="input-group-btn">     <button class="btn btn-default">搜索</button>    </span>   </div>  </div>  <div class="row" style="margin-top:10px;">   <div class="input-group">    <div class="input-group-btn">     <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">學(xué)院課程<span class="caret"></span></button>     <ul class="dropdown-menu">      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >html</a></li>      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >css</a></li>      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >javascript</a></li>      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >less</a></li>      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >bootstrap</a></li>     </ul>    </div>    <input type="text" class="form-control"/>   </div>  </div> </div> <script src="js/jquery-2.1.0.js"></script> <script src="js/bootstrap.js"></script></body></html>

效果圖：