Bootstrap输入框组

最新推荐文章于 2022-03-29 20:29:14 发布

原创最新推荐文章于 2022-03-29 20:29:14 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #输入框组

Bootstrap 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何使用HTML和特定的类来构建不同类型的输入框组，包括基本输入框组、带有复选框和单选框的输入框组、带有按钮的输入框组以及带有下拉菜单的按钮插件。

向.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><!-- /input-group -->

//单选框
 <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><!-- /input-group -->

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><!-- /btn-group -->
 <input type="text" class="form-control">//输入框
 </div><!-- /input-group -->