Bootstrap组件之输入框组

来源：互联网发布：最优化理论课程推荐编辑：程序博客网时间：2024/06/05 14:24

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

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

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

.input-group-btn——在输入框前或后添加按钮或按钮式下拉菜单组件；

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

0 0