Bootstrap输入框组件使用详解

2019-11-19 16:23:17

字体：大中小

来源：转载

供稿：网友

Bootstrap输入框组件的使用方法，具体内容如下

.input-group――设置div为输入框组；

.input-group-lg、.input-group-sm、.input-group-xs――改变输入框组的尺寸；

.input-group-addon――在输入框前或后加入额外内容；

.input-group-btn――在输入框前或后加入button或button式下拉菜单组件。

代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>组件_输入框组</title> <link rel="stylesheet" href="bootstrap.min.css" type="text/css"> <!--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">--> <script src="jquery-1.11.1.min.js"></script> <script src="bootstrap.min.js"></script></head><body><div class="container"> <p>  <div class="input-group">   <span class="input-group-addon">$</span>   <input type="number" class="form-control"/>   <span class="input-group-addon">.00</span>  </div> </p> <p> <div class="input-group input-group-lg">  <span class="input-group-addon">$</span>  <input type="number" class="form-control"/>  <span class="input-group-addon">.00</span> </div> </p> <p>  <div class="row">   <div class="col-md-4">    <div class="input-group">     <span class="input-group-addon">      <input class="checkbox" type="checkbox"/>     </span>     <input type="text" class="form-control"/>    </div>   </div>   <div class="col-md-4">    <div class="input-group">     <input type="text" class="form-control" placeholder="马上查询"/>     <span class="input-group-btn">      <button class="btn btn-primary" type="button" >Go!</button>     </span>    </div>   </div>   <div class="col-md-4">    <div class="input-group">     <div class="input-group-btn">      <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">       产品分类       <span class="caret"></span>      </button>      <ul class="dropdown-menu" role="menu">       <li><a href="#" role="menuitem">男装</a></li>       <li><a href="#" role="menuitem">女装</a></li>       <li><a href="#" role="menuitem">童装</a></li>      </ul>     </div>     <input type="text" class="form-control" placeholder="清凉一夏">    </div>   </div>  </div> </p></div></body></html>

效果：