Bootstrap CSS组件之输入框组_代码知识_七洗推广网
17370845950

Bootstrap CSS组件之输入框组

#代码知识 发布时间： 2026-01-11

本文实例为大家分享了Bootstrap输入框组的具体代码，供大家参考，具体内容如下

了解table-cell的表格width设置为1%的原因。

http://www.tuicool.com/articles/VzUVfyi

通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。

input-group(input-group-xs,input-group-sm,input-group-lg)、input-group-addon、form-control

//源码
//各元素设置为等高显示，input-group输入框组display:table，input-group-addon和form-control设置display:table-cell
.input-group {
 position: relative;
 display: table;
 border-collapse: separate;
}
//input-group如果同时应用了col样式，则取消浮动和左右padding
.input-group[class*="col-"] {
 float: none;
 padding-right: 0;
 padding-left: 0;
}
.input-group .form-control {
 position: relative;
 z-index: 2;
 float: left;
 width: 100%;
 margin-bottom: 0;
}
.input-group-addon,
.input-group-btn {
//设置最小值，以便表格模式进行近似等分
 width: 1%;
 white-space: nowrap;
 vertical-align: middle;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
 display: table-cell;
}

1.基本用法
有时需要将文本输入框(input-group)和文字或者小icon组合在一起进行显示
2.复选框与单选框作为addon .input-group-addon(可以放置label，icon，checkbox，radio)
3.按钮作为addon
4.下拉菜单按钮作为addon
5.分段按钮作为addon

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Bootstrap从3.0版本开始全面支持移动平台，贯彻移动先行宗旨 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

 </head>
 <body>

  <!-- 将文本输入框(input-group)和文字或者小icon组合在一起进行显示：
      input-group/input-group-addon/form-control-->
  <div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
  </div>
  <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">0.0</span>
  </div>

  <!-- 复选框与单选框作为addon .input-group-addon(可以放置label，icon，checkbox，radio)
     源码中如果对margin-top值进行了消除，方便对齐
     input-group/input-group-addon/form-control-->
  <div class="input-group">
    <span class="input-group-addon"><input type="checkbox"></span>
    <input type="text" class="form-control">
  </div>
  <div class="input-group">
    <span class="input-group-addon"><input type="radio"></span>
    <input type="text" class="form-control">
  </div>

  <!-- 按钮作为addon
     input-group/input-group-addon/form-control-->
  <div class="input-group">
    <span class="input-group-addon">
      <button class="btn btn-default">Go!</button>
    </span>
    <input type="text" class="form-control">
  </div>

  <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">
      <button class="btn btn-default">Go!</button>
    </span>
  </div>

  <!-- 下拉菜单按钮作为addon:
     input-group/input-group-btn/dropdown-menu/form-control-->
  <div class="input-group">
    <input type="text" class="form-control">

    <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="#">HTML</a></li>
        <li><a href="#">JS</a></li>
        <li><a href="#">CSS</a></li>
      </ul>
    </div>
  </div>

  <!-- 分段按钮作为addon：
     在input-group-btn里有多个btn-->

  <div class="input-group">
    <input type="text" class="form-control">
    <div class="input-group-btn">
      <button class="btn btn-default" type="button">按钮A</button>
      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <button class="btn btn-default" type="button">按钮B</button>
      <button class="btn btn-default" type="button">按钮C</button>

      <ul class="dropdown-menu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
  </div>
  <!-- bootstrap是基于jQuery-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

代码知识SEO

上一篇 : C# MVC 微信支付教程系列之扫码支付代码实例

下一篇 : 深入理解JS继承和原型链的问题

推荐阅读

电话：17370845950
QQ：915688610
邮箱：915688610@qq.com
友情链接：
百度
腾讯
新浪
淘宝
微博
品牌营销
客服微信
搜索营销
公众号
©  七洗推广网 版权所有 赣ICP备2024031099号
南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 南昌市七洗清洁服务有限公司 七洗清洁网 七洗清洁网 南昌七洗清洁网 南昌七洗清洁网 南昌七洗清洁网 南昌七洗清洁网 南昌七洗清洁网 南昌七洗清洁网 南昌七洗清洁网 南昌七洗清洁网 七洗清洁网 七洗清洁网 七洗清洁网 七洗清洁网 七洗清洁网 七洗清洁网
友情链接：
品牌营销
专业SEO优化
添加左侧专家微信
获取产品详细报价方案
品牌网络推广
搜索营销实战者
专注企业品牌搜索营销