bootstrap带有下拉按钮的输入框_Bootstrap的输入框组样式

在input的任何一侧放置一个附加组件或按钮，您也可以在Input输入框的两面各放置一个组件（或按钮），我们不支持单个输入组合中有多个表单控制项，同时<label>必须在输入框组之外。

<div class="col"><div class="form-group input-group"><div class="input-group-prepend"><span class="input-group-text">@</span></div><input type="text" class="form-control" placeholder="用户名"></div><div class="form-group input-group"><input type="text" class="form-control" placeholder="邮箱名"><div class="input-group-append"><span class="input-group-text">@example.com</span></div></div><div class="form-group input-group"><div class="input-group-prepend"><span class="input-group-text">$</span></div><input type="text" class="form-control"><div class="input-group-append"><span class="input-group-text">.00</span></div></div><!-- 左边，是网址 --><div class="form-group input-group"><div class="input-group-prepend"><span class="input-group-text">https://example.com/users/</span></div><input type="text" class="form-control"></div><!-- textarea --><div class="form-group input-group"><div class="input-group-prepend"><span class="input-group-text">文本输入框</span></div><textarea class="form-control"></textarea></div>
</div>

输入组尺寸

将相对表单大小的class样式加到.input-group中，其内容会自动调整大小，如.input-group-lg、.input-group-sm，不需要在每个元素上重重使用样式控制其大小。

<div class="col"><!-- 尺寸 --><div class="form-group input-group mt-5 input-group-lg"><div class="input-group-prepend"><span class="input-group-text">大尺寸</span></div><input type="text" class="form-control"></div><div class="form-group input-group"><div class="input-group-prepend"><span class="input-group-text">正常尺寸</span></div><input type="text" class="form-control"></div><div class="form-group input-group  input-group-sm"><div class="input-group-prepend"><span class="input-group-text">小尺寸</span></div><input type="text" class="form-control"></div>
</div>

多选框和单选框

<div class="col"><!-- 多选框和单选框 --><div class="form-group input-group mt-5"><div class="input-group-prepend"><span class="input-group-text"><input type="radio"></span></div><input type="text" class="form-control"></div><div class="form-group input-group"><div class="input-group-prepend"><span class="input-group-text"><input type="checkbox"></span></div><input type="text" class="form-control"></div>
</div>

多个输入框与多个额外组件

<div class="col"><!-- 多个输入框与多个额外组件 --><div class="form-group input-group mt-5"><div class="input-group-prepend"><span class="input-group-text">多个输入框</span></div><input type="text" class="form-control" placeholder="请输入姓"><input type="text" class="form-control" placeholder="请输入名"><input type="text" class="form-control"></div><div class="form-group input-group"><input type="text" class="form-control"><div class="input-group-append"><span class="input-group-text">$</span><span class="input-group-text">0.00</span></div></div>
</div>

按钮组合

<!-- 按钮组合 --><div class="form-group input-group mt-5"><div class="input-group-prepend"><button class="btn btn-outline-secondary">左按钮</button></div><input type="text" class="form-control"></div><div class="form-group input-group"><input type="text" class="form-control"><div class="input-group-append"><button class="btn btn-outline-secondary">右按钮</button></div></div><div class="form-group input-group"><div class="input-group-prepend"><button class="btn btn-outline-secondary">左按钮</button><button class="btn btn-outline-secondary">左按钮</button></div><input type="text" class="form-control"></div><div class="form-group input-group"><input type="text" class="form-control"><div class="input-group-append"><button class="btn btn-outline-secondary">右按钮</button><button class="btn btn-outline-secondary">右按钮</button></div></div>
</div>

带下拉列表的按钮组合

<div class="col"><!-- 带下拉列表的按钮组合 --><div class="form-group input-group mt-5"><div class="input-group-prepend"><button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">左侧下拉菜单</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">深圳</a></div></div><input type="text" class="form-control"></div><div class="form-group input-group"><input type="text" class="form-control"><div class="input-group-append"><button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">右侧下拉菜单</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">深圳</a></div></div></div>
</div>

分离式按钮与input组合

<div class="col"><!-- 分离式按钮与input组合 --><div class="form-group input-group mt-5"><div class="input-group-prepend"><button class="btn btn-outline-success">分离式左侧下拉菜单</button><button class="btn btn-outline-success dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"></button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">深圳</a></div></div><input type="text" class="form-control"></div><div class="form-group input-group"><input type="text" class="form-control"><div class="input-group-append"><button class="btn btn-outline-success">分离式左侧下拉菜单</button><button class="btn btn-outline-success dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"></button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">深圳</a></div></div></div>
</div>

自定义表单组合-自定义选择（下拉框）

<div class="col"><!-- 自定义表单组合-自定义选择（下拉框） --><div class="form-group input-group mt-5"><div class="input-group-prepend"><label for="select1" class="input-group-text">label标签在左边</label></div><select class="custom-select" id="select1"><option value="">城市</option><option value="">北京</option><option value="">上海</option><option value="">广州</option></select></div><div class="form-group input-group"><select class="custom-select" id="select2"><option value="">城市</option><option value="">北京</option><option value="">上海</option><option value="">广州</option></select><div class="input-group-append"><label for="select2" class="input-group-text">label标签在右边</label></div></div><div class="form-group input-group"><div class="input-group-prepend"><button class="btn btn-outline-danger">button标签在左边</label></div><select class="custom-select"><option value="">城市</option><option value="">北京</option><option value="">上海</option><option value="">广州</option></select></div><div class="form-group input-group"><select class="custom-select"><option value="">城市</option><option value="">北京</option><option value="">上海</option><option value="">广州</option></select><div class="input-group-append"><button class="btn btn-outline-danger">button标签在右边</label></div></div>
</div>

自定义表单组合-自定义文件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><title>Bootstrap的输入框组样式</title>
</head><body><div class="container"><div class="form-row mt-5"><div class="col"><!-- 自定义表单组合-自定义文件 --><div class="form-group input-group mt-5"><div class="input-group-prepend"><span class="input-group-text">上传在左边</span></div><div class="custom-file"><input type="file" class="custom-file-input" id="file1"><label for="file1" class="custom-file-label"></label></div></div><div class="form-group input-group"><div class="custom-file"><input type="file" class="custom-file-input" id="file2"><label for="file2" class="custom-file-label"></label></div><div class="input-group-append"><span class="input-group-text">上传在右边</span></div></div><div class="form-group input-group"><div class="input-group-prepend"><button class="btn btn-outline-secondary">按钮在左边</span></div><div class="custom-file"><input type="file" class="custom-file-input" id="file1"><label for="file1" class="custom-file-label"></label></div></div><div class="form-group input-group"><div class="custom-file"><input type="file" class="custom-file-input" id="file2"><label for="file2" class="custom-file-label"></label></div><div class="input-group-append"><button class="btn btn-outline-secondary">按钮在右边</span></div></div></div></div></div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body></html>

bootstrap带有下拉按钮的输入框_Bootstrap的输入框组样式相关推荐

bootstrap带有下拉按钮的输入框_关于bootstrap--表单（下拉select、输入框input、文本域textare复选框checkbox和单选按钮radio）...
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...
BootDo框架中使用bootstrap设置多个按钮的下拉按钮
直接进入对应的列表页面的js: 这里面我利用bootdo设置了权限,根据权限显示不同的按钮,同时我需要在外面显示一个按钮,倒三角内显示下拉按钮: {title: '操作',field: 'id',al ...
Bootstrap 带下拉的导航
下拉菜单(dropdown)是一个独立的组件,它可以与页面上任何元素(如,按钮.导航等)捆绑使用.可以为导航捆绑下拉菜单,来制作带下拉的导航. 如果要给导航的某个列表项添加下拉菜单,只需给相应的列表项 ...
JComboBox 的下拉按钮添加监听
JComboBox 的下拉按钮添加监听 1.问题描述 2.需求分析 3.代码示例 4.结果演示系统:Win10 JDK:1.8.0_333 IDEA:2020.3.4 1.问题描述在使用一个 JC ...
h5 加载更多下拉按钮_更好的按钮设计的5个技巧
h5 加载更多下拉按钮重点 (Top highlight) 第6部分 (Part 6) After we went through all the very basics of UI design ...
bootstrap悬停下拉导航的实现
为了减轻用户操作行为,提升用户体验,往往会将点击下拉导航改为悬停下拉的效果. 本文就讲述一下,bootstrap悬停下拉导航的实现先不说那么详细,围观先: 1. css代码设置如下: /*悬停下拉导 ...
Bootstrap mouseover 下拉菜单 Enable Hover for Bootstrap Nav Dropdowns
Bootstrap v3′s navigation has menus toggle enabled by default - you have to click to have them open/ ...
Bootstrap 多级下拉菜单
在很多时候,我们可能需要多级下拉菜单.在一个下拉菜单的某个菜单项中,再创建另一个下拉菜单,即可实现多级下拉菜单. 只需为下拉菜单的任意 <li> 元素添加 .dropdown-submen ...
解决bootstrap dropdown 下拉菜单有时候不能显示的问题
解决bootstrap dropdown 下拉菜单有时候不能显示的问题参考文章: (1)解决bootstrap dropdown 下拉菜单有时候不能显示的问题 (2)https://www.cnbl ...