首页 > 代码库 > （四）输入框组

（四）输入框组

2024-10-24 23:16:02   208人阅读

一、输入框组

  • 通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素。
  • 不支持在输入框的单独一侧添加多个额外元素。
  • 不支持在单个输入框组中添加多个表单控件。

 

二、案例

<head>
<meta charset="utf-8">
<link href="<%=path%>/bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript"
    src="<%=path%>/bootstrap/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
    src="<%=path%>/bootstrap/js/bootstrap.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
    
</script>
</head>
<body>
    <div style="width: 500px; height: 500px;">
        <div class="input-group">
            <span class="input-group-addon">@</span> <input type="text"
                name="username" class="form-control" placeholder="UserName">
        </div>

        <div class="input-group">
            <input type="text" name="email" class="form-control"
                placeholder="enter email"> <span class="input-group-addon">@qq.com</span>
        </div>

        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" name="money" class="form-control" placeholder="enter money">
            <span class="input-group-addon">0.00</span>
        
        </div>
    </div>
</body>

效果：

技术分享

三、设置尺寸

  • 　　为 .input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。

 

<body>
    <div style="width: 500px; height: 500px;">
        <div class="input-group">
            <span class="input-group-addon">@</span> <input type="text"
                name="username" class="form-control" placeholder="UserName">
        </div>

        <div class="input-group input-group-lg">
            <input type="text" name="email" class="form-control"
                placeholder="enter email"> <span class="input-group-addon">@qq.com</span>
        </div>

        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" name="money" class="form-control" placeholder="enter money">
            <span class="input-group-addon">0.00</span>
        
        </div>
    </div>
</body>

效果：

技术分享

  • 对比上例的效果图，第二个输入框的尺寸明显比较大， class=“input-group-lg”的作用仅限于该输入框组，其他组无效。

 

 

四、输入组中包含按钮式下拉菜单

<head>
<meta charset="utf-8">
<link href="<%=path%>/bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript"
    src="<%=path%>/bootstrap/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
    src="<%=path%>/bootstrap/js/bootstrap.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
    
</script>
</head>
<body>
     <div class="input-group">
         <div class="input-group-btn">
             <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">按钮一
                 <span class="caret"></span>
             </button>
             <ul class="dropdown-menu">
                 <li><a href="#">按钮二</a></li>
                 <li><a href="#">按钮三</a></li>
                 <li><a href="#">按钮四</a></li>
             </ul>
         </div>
    <input type="text" placeholder="UserName" class="form-control">
     </div>
</body>

效果：

技术分享

 

  •  输入框组中如果包含的是按钮，则必须添加 .input-group-btn 来包裹按钮元素 ，而不是.input-group-addon 。
  •  要实现下拉框菜单功能并不一定要在外围嵌套<div class="dorpdown"></div> 也可以用<div class="btn-group"></div> 或者本例中的<div class="input-group-btn">

 等等。

 

 

（四）输入框组


联系
我们