Bootstrap CSS——输入框组

来源：互联网发布：淘宝刷手是什么意思编辑：程序博客网时间：2024/04/20 04:40
http://v3.bootcss.com/components/#input-groups
mark
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>BootStrap CSS组件</title>    <link rel="stylesheet" href="bootstrap.min.css"></head><body>    <div class="container">        <!--        我们不支持在输入框的单独一侧添加多个额外元素。        我们不支持在单个输入框组中添加多个表单控件。        -->        <!--输入框，框前添加icon-->        <div class="input-group">            <span class="input-group-addon">@</span>            <input type="text" class="form-control" placeholder="UserName">        </div>        <!--输入框，框后添加icon-->        <div class="input-group">            <input type="text" class="form-control" placeholder="UserName">            <span class="input-group-addon">.00</span>        </div>        <!--输入框，框前后都添加icon-->        <div class="input-group">            <span class="input-group-addon">$</span>            <input type="text" class="form-control" placeholder="UserName">            <span class="input-group-addon">.00</span>        </div>        <hr>        <!--作为额外元素的多选框和单选框        多选为checkbox，单选为radio-->        <div class="row">            <div class="col-lg-6">                <div class="input-group">                    <span class="input-group-addon">                        <input type="checkbox">                    </span>                    <input type="text" class="form-control">                </div>            </div>        </div>        <hr>        <!--作为额外元素的按钮-->        <div class="row">            <div class="col-lg-6">                <div class="input-group">                    <span class="input-group-btn">                        <button class="btn btn-default" type="button">Go</button>                    </span>                    <input type="text" class="form-control">                </div>            </div>        </div>        <hr>        <!--作为额外元素的按钮式下拉菜单-->        <div class="row">            <div class="col-lg-6">                <div class="input-group">                    <div class="input-group-btn">                        <button type="button" class="btn btn-default dropdown" data-toggle="dropdown">                            Action                            <span class="caret"></span>                        </button>                        <ul class="dropdown-menu" role="menu">                            <li><a href="#">Hello</a> </li>                            <li><a href="#">Hello</a> </li>                            <li><a href="#">Hello</a> </li>                            <li><a href="#">Hello</a> </li>                        </ul>                    </div>                    <input type="text" class="form-control">                </div>            </div>        </div>        <hr>        <!--作为额外元素的分裂式按钮式下拉菜单-->        <div class="row">            <div class="col-lg-6">                <div class="input-group">                    <div class="input-group-btn">                        <button type="button" class="btn btn-default">                            Action                        </button>                        <button type="button" class="btn btn-default dropdown" data-toggle="dropdown">                            <span class="caret"></span>                        </button>                        <ul class="dropdown-menu" role="menu">                            <li><a href="#">Hello</a> </li>                            <li><a href="#">Hello</a> </li>                            <li><a href="#">Hello</a> </li>                            <li><a href="#">Hello</a> </li>                        </ul>                    </div>                    <input type="text" class="form-control">                </div>            </div>        </div>        <hr>    </div>    <script src="jquery-2.1.4.min.js"></script>    <script src="bootstrap.min.js"></script></body></html>
0 0