bootstrap输入框组使用方法

2019-11-19 17:41:50

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了bootstrap输入框组的使用方法，供大家参考，具体内容如下

<!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">学院课程<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>

效果图：