Bootstrap4 输入框组

最新推荐文章于 2024-01-23 10:18:17 发布
最新推荐文章于 2024-01-23 10:18:17 发布
阅读量558 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45116096/article/details/107291823
版权

我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。

使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append
类添加在输入框的后面。

最后，我们还需要使用 .input-group-text 类来设置文本的样式

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>输入框组</h3>
  <p> .input-group .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮，.input-group-prepend 类添加在前面，.input-group-append 添加在后面。</p>
  <p>使用 .input-group-text 类来设置文本的样式。</p>
  
  <form action="/action_page.php">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" id="usr" name="username">
    </div>

    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Your Email" id="mail" name="email">
      <div class="input-group-append">
        <span class="input-group-text">@runoob.com</span>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>


</body>
</html>

在这里插入图片描述

输入框大小 使用 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>输入框大小</h1>
  <p>使用 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框：</p>
  <form>
    <div class="input-group mb-3 input-group-sm">
      <div class="input-group-prepend">
        <span class="input-group-text">Small</span>
      </div>
      <input type="text" class="form-control">
    </div>
  </form>
  <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Default</span>
      </div>
      <input type="text" class="form-control">
    </div>
  </form>
  <form>
    <div class="input-group mb-3 input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text">Large</span>
      </div>
      <input type="text" class="form-control">
    </div>
  </form>
</div>

</body>
</html>

在这里插入图片描述

多个输入框和文本

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>多个输入框和文本</h3>
  
  <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Person</span>
      </div>
      <input type="text" class="form-control" placeholder="First Name">
      <input type="text" class="form-control" placeholder="Last Name">
    </div>  
  </form>
  
  <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">One</span>
        <span class="input-group-text">Two</span>
        <span class="input-group-text">Three</span>
      </div>
      <input type="text" class="form-control">
    </div>
  </form>
</div>

</body>
</html>

在这里插入图片描述

复选框与单选框 文本信息可以使用复选框与单选框替代：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>复选框与单选框</h3>
  <p>文本信息可以使用复选框与单选框替代：</p>
  <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <input type="checkbox"> 
        </div>
      </div>
      <input type="text" class="form-control" placeholder="RUNOOB">
    </div>
  </form>
  
  <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <input type="radio"> 
        </div>
      </div>
      <input type="text" class="form-control" placeholder="GOOGLE">
    </div>
  </form>
</div>

</body>
</html>

在这里插入图片描述

输入框添加按钮组

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>输入框添加按钮组</h1>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <button class="btn btn-outline-secondary" type="button">Basic Button</button>  
    </div>
    <input type="text" class="form-control" placeholder="Some text">
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Search">
    <div class="input-group-append">
      <button class="btn btn-success" type="submit">Go</button>  
     </div>
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Something clever..">
    <div class="input-group-append">
      <button class="btn btn-primary" type="button">OK</button>  
      <button class="btn btn-danger" type="button">Cancel</button>  
     </div>
  </div>
</div>

</body>
</html>

在这里插入图片描述

设置下拉菜单 输入框中添加下拉菜单不需要使用 .dropdown 类。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>设置下拉菜单</h3>
  <p>输入框中添加下拉菜单不需要使用 .dropdown 类。</p>
  <form>
    <div class="input-group mt-3 mb-3">
      <div class="input-group-prepend">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
          选择网站
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="https://www.google.com">GOOGLE</a>
          <a class="dropdown-item" href="https://www.runoob.com">RUNOOB</a>
          <a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a>
        </div>
      </div>
      <input type="text" class="form-control" placeholder="网站地址">
    </div>
  </form>
</div>

</body>
</html>

在这里插入图片描述

输入框组标签 在输入框组通过在输入框组外围的 label 来设置标签，标签的 for 属性需要与输入框组的 id
对应，点击标签后可以聚焦输入框：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>输入框组标签</h2>
  <p>在输入框组通过在输入框组外围的 label 来设置标签，标签的 for 属性需要与输入框组的 id 对应。</p>
  <p>点击标签后可以聚焦输入框：</p>
  <form>
    <label for="demo">这里输入您的邮箱:</label>
    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
      <div class="input-group-append">
        <span class="input-group-text">@runoob.com</span>
      </div>
    </div>
  </form>
</div>

</body>
</html>

在这里插入图片描述

jhfsdhsgfsdggreqZa
关注
开心档之Bootstrap4 输入框组
m0_74760716的博客
02-21 350
使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。最后，我们还需要使用 .input-group-text 类来设置文本的样式。输入框中添加下拉菜单不需要使用 .dropdown 类。
Bootstrap4数值输入插件
12-11
这是一款Bootstrap4数值输入插件。通过该插件可以非常轻松的将input元素转换为数值输入spinner。
Bootstrap-04-常用样式——表单控件(输入框)
Void的博客
03-01 818
bootstrap 表单控件 输入框 类名 .form-control 文本输入框 input-lg 大 input-sm 小 <div class="col-md-3" > <input type="text" class="form-control"> <input type="text" class="form-control input-lg"> <input type="text" class="for
Bootstrap4输入框标签生成插件
ICode联盟
04-11 178
下载地址 基于Bootstrap4的标签输入框插件。该插件使用Bootstrap4组件来制作标签输入和移除的效果。 dd:
bootstrap——css样式（四、表单）
zaichuanguanshui的专栏
01-18 2474
1、表单基本用法 class 描述 .form-control input、textarea 和 select 元素都将被默认设置宽度属性为 width: 100%; .form-group 将 label 元素和控件包裹在一起，实现很好的排列 <form role="form"> <div class="form-group"> <label for="examp
Bootstrap4 加载效果
最新发布
v165sdfgasd的博客
01-23 435
要创建加载中效果可以使用 .spinner-border 类:<div class="spinner-border"></div>
bootstrap输入框组使用方法
08-31
通过以上代码示例，我们可以看出Bootstrap输入框组的灵活性和实用性。它可以轻松地创建带有附加元素的输入字段，提高了用户界面的交互性和美观度。无论是在表单提交、搜索栏还是其他数据输入场景中，输入框组都是一...
bootstrap下拉列表与输入框组结合的样式调整
09-01
在Bootstrap中，输入框组（Input Groups）和下拉列表（Dropdowns）是两个常用的功能，它们可以组合使用，以创建更复杂的用户界面。下面我们将深入探讨如何在Bootstrap中调整下拉列表与输入框组结合的样式。 首先，...
Bootstrap系列之输入组（Input group）
老__L的博客
06-14 3420
在input的任意一边放置一个附加组件或按钮。你也可以在input的两边都放一个。记住将放在输入组之外。 默认情况下，输入组通过来适应输入组中自定义的表单字段验证。你可以用来禁用它。 将相对表单大小类添加到本身，其中的内容将自动调整大小，而不需要在每个元素上重复表单控件大小类。 在输入组的插件中放置任何复选框或单选选项，代替文本。 虽然可支持多个，但验证样式仅用于具有单个的输入组。 支持多个插件，可以与复选框和单选输入版本混合使用。 输入组包括支持自定义选择和自定义文件输入。不支持这些浏览器的默认版本
Bootstrap4 弹出框
12-13
Bootstrap4 弹出框 弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。 如何创建弹出框 通过向元素添加 data-toggle=”popover” 来来创建弹出框。 title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容： 多次点我 注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。 以下实例可以在文档的任何地方使用弹出框： 实例 $(document).ready(function(){ $('[data-toggle="popover"]'
bootstrap布局中input输入框右侧图标点击功能
09-02
主要为大家详细介绍了bootstrap布局中input输入框右侧图标点击功能实现的相关代码，感兴趣的小伙伴们可以参考一下
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
10-22
主要介绍了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除的相关资料,需要的朋友可以参考下
bootstrap的输入框组
I hava a dream
02-11 2201
通过在文本输入框 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。 只支持文本输入框 这里请避免使用 元素，因为 WebKit 浏览器不能完全绘制它的样式。 避免使用 元素，由于它们的 rows 属性在某些情况下不被支持。 输入框
bootstrap组件组input-group
huangbaokang的博客
04-24 412
示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="bootstrap.css"> <script type=...
Bootstrap CSS——输入框组
Tark——且行且珍惜
10-07 836
http://v3.bootcss.com/components/#input-groups mark<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>BootStrap CSS组件</title> <link rel="stylesheet" href="bootstrap.min.
html4 form日期,bootstrap4日期时间选择器插件
weixin_32495691的博客
07-22 691
这是一款bootstrap4日期时间选择器插件。该bootstrap4日期时间选择器插件提供大量配置参数，可以基于bootstrap4制作出简单实用的日期选择器效果。它的特点还有：支持语言国际化和timezone。支持日期选择模式和时间选择模式。支持最大和最小日期选择。可自定义触发日期选择器的图标。支持禁用指定的日期。支持年/星期预览模式。支持某个星期中禁用某些天。可自定义日期格式。提供大量的配置...
input-group(Bootstrap)
海涛高软
01-05 1688
之前讲过一篇文章： http://blog.csdn.net/qq_15267341/article/details/54016811 <div class="input-group"> <input type="text" placeholder="查找客户" class="input form-control"> <span class="input-gr
Day-12 bootstrap 输入框组、自定义表单
May21☀️
10-21 595
输入框组、自定义表单输入框组1. 基础输入框2. 输入框的大小（.input-group-lg / .input-group-sm）3. 多个输入框和文本4. 复选框与单选框5. 输入框添加按钮组6. 设置下拉菜单7. 输入框组标签自定义表单1. 自定义复选框2. 自定义单选框3. 自定义控件显示在同一行（ .custom-control-inline ）4. 自定义选择菜单5. 自定义滑块控件6. 自定义文件上传控件 输入框组 1. 基础输入框   我们可以使用 .input-group 类来向表单输入框
bootstrap输入框
10-20
Bootstrap输入框是一种常用的前端UI组件，可以用于表单输入等场景。Bootstrap提供了多种输入框组件，包括基本输入框、带前缀或后缀的输入框、带按钮的输入框、带复选框或单选框的输入框等。可以通过添加不同的class...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值