Bootstrap学习总结笔记（9）-- 基本组件之input输入框组

来源：互联网发布：linux如何安装mysql 编辑：程序博客网时间：2024/05/16 01:09

使用input输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

看下面的例子：

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link href="../../css/bootstrap.min.css" rel="stylesheet">    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>    <script src="../../js/bootstrap.min.js"></script>    <title>input控件组</title></head><body><div class="container">    <div class="col-lg-3"></div>    <div class="col-lg-6">        <div class="page-header">            <h1>样式1</h1>        </div>        <div class="input-group">            <input type="text" class="form-control">            <div class="input-group-btn">                <button type="button" class="btn btn-primary">搜索</button>            </div>        </div>        <div class="page-header">            <h1>样式2</h1>        </div>        <div class="input-group">            <input type="text" class="form-control">            <div class="input-group-btn">                <div class="dropdown">                    <button type="button" class="btn btn-primary" data-toggle="dropdown">                        下拉菜单                        <span class="caret"></span>                    </button>                    <ul class="dropdown-menu">                        <li class="active"><a href="#">菜单1</a></li>                        <li><a href="#">菜单2</a></li>                        <li class="divider"></li>                        <li><a href="#">菜单3</a></li>                        <li><a href="#">菜单4</a></li>                    </ul>                </div>            </div>        </div>    </div>    <div class="col-lg-3"></div></div></body></html>

效果如下：

如果和input配合使用的按钮是不可单击的，只是用于文字的说明，修改如下：

<div class="input-group">    <input type="text" class="form-control">    <div class="input-group-addon">用来搜索</div></div>

效果如下：

0 0