Bootstrap输入框组

雨点打透心脏的1/2处 2022-08-23 08:23 174阅读 0赞

向.form-control添加前缀或后缀元素的步骤如下：

（1）把前缀或后缀元素放在一个带有class.input-group的<div>中
    （2）在相同的<div>内，在class为.input-group-addon的<span>内放置额外的内容
    （3）把<span>放置在<input>元素的前面或者后面

1.基本输入框组

//邮箱输入框组，不用输入@ 和 .com
    <div class="input-group">
             <input type="text" class="form-control">//一个基本的输入框
             <span class="input-group-addon">@</span>//添加的@
             <input type="text" class="form-control">//一个基本的输入框
             <span class="input-group-addon">.com</span>//添加后缀.com
    </div>

可以通过 input-group-lg ,input-group-sm来控制输入框的大小  
2.复选框和单选框

<div class="input-group">
                   <span class="input-group-addon">
                      <input type="checkbox">
                   </span>//设置一个选项的按钮
                   <input type="text" class="form-control">
     </div>

//单选框
     <span class="input-group-addon">
                      <input type="radio">
     </span>

3.按钮插件  
把按钮作为输入框的前缀或者后缀元素，不是添加.input-group-addon而是需要class .input-group-btn

<div class="input-group">
                   <input type="text" class="form-control">
                   <span class="input-group-btn">
                      <button class="btn btn-default" type="button">//增加一个按钮，显示为Go!
                         Go!
                      </button>
                   </span>
     </div>

4.带有下拉菜单的按钮

<div class="input-group"> //输入的为一组
         <div class="input-group-btn">//增加一个按钮
     <button type="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>
            <li class="divider"></li>
            <li><a href="#">分离的链接</a></li>
         </ul>
     </div>
     <input type="text" class="form-control">//输入框
     </div>