Bootstrap组件_输入框组

最新推荐文章于 2025-07-03 13:05:02 发布
原创 最新推荐文章于 2025-07-03 13:05:02 发布 · 499 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍如何使用Bootstrap创建各种尺寸的输入框组，包括如何添加多选框、单选框、按钮及分裂式按钮下拉菜单作为额外元素，实现丰富的交互效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>输入框组</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>

  <div class="container">
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" placeholder="email">
    </div>
  </div>
  
</body>
</html>
尺寸

为 .input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个
元素重复地添加控制尺寸的类。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>输入框组</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>

  <div class="container">
      <div class="input-group input-group-lg">
        <span class="input-group-addon" id="sizing-addon1">@</span>
        <input type="text" class="form-control" placeholder="Username" 
aria-describedby="sizing-addon1">
      </div>
      <div class="input-group">
        <span class="input-group-addon" id="sizing-addon2">@</span>
        <input type="text" class="form-control" placeholder="Username" 
aria-describedby="sizing-addon2">
      </div>
      <div class="input-group input-group-sm">
        <span class="input-group-addon" id="sizing-addon3">@</span>
        <input type="text" class="form-control" placeholder="Username" 
aria-describedby="sizing-addon3">
      </div>
  </div>
  
</body>
</html>
作为额外元素的多选框和单选框

可以将多选框或单选框作为额外元素添加到输入框组中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>输入框组</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>

  <div class="container">
      <div class="row">
        <div class="col-lg-6">
          <div class="input-group">
            <span class="input-group-addon">
              <input type="checkbox" aria-label="true">
            </span>
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="col-lg-6">
          <div class="input-group">
            <span class="input-group-addon">
              <input type="radio">
            </span>
            <input type="text" class="form-control">
          </div>
        </div>
      </div>
  </div>
  
</body>
</html>
作为额外元素的按钮

为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn 来

包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>输入框组</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>

  <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="请输入要查找的内容">
            <span class="input-group-btn">
              <button type="button" class="btn btn-default">
                go!
              </button>
            </span>
          </div>
        </div>
        <div class="col-md-6"></div>
      </div>
  </div>
  
</body>
</html>
作为额外元素的分裂式按钮下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>输入框组</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="jquery-1.12.1.js"></script>
  <script src="bootstrap.min.js"></script>
</head>
<body>

  <div class="container">
      <div class="col-md-6">
        <div class="input-group">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle"
            data-toggle="dropdown" aria-haspopup="true">
              Action
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
            </ul>
          </div>
          <input type="text" class="form-control">
        </div>
      </div>
  </div>
  
</body>
</html>

 

Bootstrap 输入框组
shengyin714959的博客
08-14 317
本章将讲解 Bootstrap 支持的另一个特性，输入框组。输入框组扩展自。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。向。
bootstrap输入框组件
m0_51281306的博客
03-29 926
<div class="container"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div> <div ...
BootStrap入门到实战：BootStrap组件（二）- 输入框组、导航、导航条、路径导航（面包屑效果）
林林一928的博客
06-04 1299
导航标签用于在网页上创建各种风格的导航栏，包括水平标签页、胶囊式标签页、垂直堆叠的胶囊式标签页、两端对齐的胶囊式标签页、禁用的链接以及带下拉菜单的标签页。bootstrap的导航条是一个高度可定制的界面组件，它不仅支持丰富的界面元素配置，还提供了灵活的空间布局策略。在实际运用场景中，输入组（Input Group）在Bootstrap框架中主要用于提高表单的可读性和用户友好性，通过将相关控件组合在一起，为用户提供更直观、更易于操作的表单体验。添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。
Bootstrap 5学习教程，从入门到精通，Bootstrap 5 输入框组（Input Group）知识点及案例代码（32）
最新发布
qq_45746668的博客
07-03 1153
Bootstrap 5 输入框组（Input Group）是在表单控件前后添加文本、按钮等元素的实用组件。其核心结构由.input-group容器、.input-group-prepend/append前后缀区域以及.input-group-text文本样式组成。支持多种功能扩展：1）可添加按钮实现交互；2）可整合下拉菜单；3）通过.input-group-sm/lg调整尺寸；4）允许组合多个输入框。
bootstrap框架登陆框样式
04-12
用bootstrap制作的一个简单的登陆界面样式，js初学者
Bootstrap输入框组件使用详解
08-30
主要为大家详细介绍了Bootstrap输入框组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap 组件-输入框组
litengbin的博客
01-20 735
1 : 基本组合     2 : 尺寸     3 : 复选框和单选框     4 : 整合按钮     5 : 整合下拉菜单     6 : 整合分裂式下拉菜单     基本组合 div{ margin:5px; } @ @12306.com $ .00 尺寸 div{ marg
Bootstrap CSS组件之输入框组
08-31
Bootstrap CSS组件中的输入框组（input-group）是一个强大的工具，用于构建复杂的表单布局和界面。这个组件允许您将输入字段、前缀、后缀、按钮或其他元素组合在一起，以提供更加直观和用户友好的交互体验。下面我们...
bootstrap输入框组使用方法
08-31
在本文中，我们将深入探讨Bootstrap框架中的输入框组（Input Groups）的使用方法。Bootstrap是一个流行的前端开发框架，它提供了一套美观、响应式的UI组件，使得构建网站变得更加容易。输入框组是其中的一个关键组件...
bootstrap下拉列表与输入框组结合的样式调整
09-01
若要在输入框组中加入下拉列表，我们可以使用Bootstrap的下拉菜单组件。通常，下拉菜单是通过`<button>`元素触发的，内部包含一个`<div class="dropdown-menu">`，里面是`<li>`元素，每个`<li>`元素内有一个链接`<a>...
bootstrap4_for_axure8_9
06-04
5. **更强大的表单控件**：Bootstrap 4改进了表单控件的样式，如输入框、开关、选择器等，同时也引入了新的表单验证功能。 6. **过渡和动画**：Bootstrap 4增强了过渡和动画效果，使得组件状态切换更加平滑，提升了...
Bootstrap组件之输入框组
bboyjoe的博客
07-29 1307
.input-group——设置div为输入框组； .input-group-lg、.input-group-sm、.input-group-xs——改变输入框组的尺寸； .input-group-addon——在输入框前或后添加额外内容； .input-group-btn——在输入框前或后添加按钮或按钮式下拉菜单组件； 组件_输入框组
BootStrap输入框组
qq_39529315的博客
05-31 914
  input-group(输入框组)，输入框必须由input-group包裹，如果想做个图标加输入框的效果，根据顺序排版，图标所在span标签赋予input-group-addon样式，输入框input赋予form-control样式，让他填充整行+换行。代码：&lt;style&gt;div{  margin:5px;}&lt;/style&gt;&lt;div class="input-gr...
bootstrap输入框组
weixin_43293451的博客
06-17 178
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap</title> <style type="text/css"> div{ width:500px; position:relat...
Bootstrap组件——输入框
xun__xing的博客
07-30 2796
输入框一、输入框1.基本2.尺寸3.多选框和单选框4.多个输入框与多个额外组件5.按钮组合6.带下拉列表的按钮组合7.分离式按钮8.自定义表单组合9.自定义文件 一、输入框 1.基本 <div class="form-row"> <div class="col"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="in
WEB前端网页设计-Bootstrap 输入框组
君逍遥o
03-16 2260
输入框组扩展自 表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值