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

最新推荐文章于 2023-07-16 22:44:29 发布

kikay

最新推荐文章于 2023-07-16 22:44:29 发布

阅读量908

点赞数

分类专栏： Bootstrap 文章标签： bootstrap input输入框组

本文链接：https://blog.csdn.net/kikaylee/article/details/53498336

版权

Bootstrap 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

使用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>

效果如下：

kikay

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习总结笔记（9）-- 基本组件之input输入框组

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

扫一扫

专栏目录

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

“相关推荐”对你有帮助么？