bootstrap 第十四章 输入框组

最新推荐文章于 2023-07-16 22:44:29 发布
最新推荐文章于 2023-07-16 22:44:29 发布
阅读量370 收藏
点赞数
分类专栏： Boostrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/t5555666/article/details/108908301
版权

第十四章 输入框组

			类								作用
			.input-group					输入框分组
			.input-group-addon				输入框外添加额外的内容
			.input-group-btn				输入框外添加额外的内容(主要是添加btn按钮用)
			.form-control					让input框的宽百分百显示，自适应
			.input-group-lg					大
			.input-group-sm					小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
		<script src="../bs/js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../bs/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<form action="">
				<p class="h1 page-header">基本的输入框组</p>
				<div class="input-group">
					<span class="input-group-addon">+</span>
					<input type="text" class='form-control'/>
					<span class="input-group-addon">-</span>
				</div>
				<p class="h1 page-header">输入框组的大小</p>
				<div class=
最低0.47元/天 解锁文章
小涛涛啊！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap—输入框组input-group
生如夏花 炫至茶靡
12-14 4万+
相信你在很多的网站页面上都看见过这样的输入框： 这样的输入框我们通过原生的手写css也能实现，但是使用Bootstrap的输入框组会让你实现起来更加简便。 实现在输入框前后添加元素的代码如下： 输入框组 @
bootstrap框架之输入框组
青菜白玉堂的博客
02-23 308
基础用法 <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control"> </div> addon元素 addon元素不仅可以是label和icon，还可以是复选框、单选框和按钮。 ...
Bootstrap系列之输入组（Input group）
老__L的博客
06-14 3286
在input的任意一边放置一个附加组件或按钮。你也可以在input的两边都放一个。记住将放在输入组之外。 默认情况下，输入组通过来适应输入组中自定义的表单字段验证。你可以用来禁用它。 将相对表单大小类添加到本身，其中的内容将自动调整大小，而不需要在每个元素上重复表单控件大小类。 在输入组的插件中放置任何复选框或单选选项，代替文本。 虽然可支持多个，但验证样式仅用于具有单个的输入组。 支持多个插件，可以与复选框和单选输入版本混合使用。 输入组包括支持自定义选择和自定义文件输入。不支持这些浏览器的默认版本
bootstrap组件组input-group
huangbaokang的博客
04-24 397
示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="bootstrap.css"> <script type=...
bootstrap总结与例子
08-02
15. **自定义字体和图标** (`glyphicons`): Bootstrap早期版本包含 Glyphicons 图标库，但现在推荐使用第三方图标库如 Font Awesome 或 Material Icons。 16. **媒体对象** (`media object`): `.media` 类用于创建...
李炎恢bootstrap3.pdf合并版带目录
09-15
第一章 bootstrap介绍 第二章 排版样式 第三章 表格和按钮 第四章 表单和图片 第五章 栅格系统 第六章 辅助类和响应式工具 第七章 图标菜单按钮组件 第八章 输入框和导航组件 .............共二十章，后面带开发...
bootstrap教程
03-02
9. **第14章 下拉菜单和滚动监听插件**：下拉菜单常用于导航，提供了多层次的链接选项。滚动监听插件则允许开发者在用户滚动页面时执行特定操作，如固定头部或加载更多内容。 10. **第15章 标签页和工具提示插件**...
BootStrap后台管理模版
12-25
此外，由于其广泛的社区支持和丰富的第三方扩展，Bootstrap也是持续更新和优化的，能够适应不断变化的Web开发需求。总的来说，这个“BootStrap后台管理模版”是高效开发后台界面的强大工具，能帮助开发者快速实现...
JQ JS javascript 多选 多选下拉框 select bootstrap-select
04-18
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> ...
input group html,基于Bootstrap使用jQuery实现输入框组input-group的添加
weixin_36443823的博客
07-01 398
本文实例为大家分享使用jQuery实现输入框组input-group的添加与删除操作，供大家参考，具体内容如下注意这里要求使用到Bootstrap框架的输入框组，如：Demo案例的效果图：这里提供自制的 插件 inputGroup.js参数为可以设置 输入框组中中间的控件是文本域还是输入框；以及设置在输入框组右侧的操作的内容。使用inputGroup.js只要在对应的容器，如p中添加选择器，然后使...
3.5 Bootstrap 输入框组
梁辰兴的博客
07-16 1340
注意：为了保持跨浏览器的兼容性，请避免使用 元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class，输入框组是一个孤立的组件。通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。您也可以把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加。
Bootstrap 输入框组
snowstorm的博客
03-16 2953
有些时候，我们需要将文本输入框（Input group）和文字或者小icon组合在一起进行显示（我们称之为addon），只需要在容器上应用.inputgroup样式，然后对需要在input前后显示的个性元素上应用.input-groupaddon样式即可。 一、基本用法 代码如下; $ .00 ￥ .00 效果入下： 注意：请尽量避免在sele
Bootstrap 组件：输入框组组件的使用
WangMin@汪末末
09-06 2082
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 通过在文本输入框 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素。 注意： 1. 只支持文本输入框<input> 这里请避免使用<select>元素和<textarea>元
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版
梦空间
06-04 8129
上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ，初始状态下只有一个输入框组，可以通过点击输入框组的右侧“+”（或自定义的文字）可以在原输入框组的下面产生一个新的输入框组，通过点击输入框组的右侧“-”（或自定义的文字）可以删除当前输入框组。         但是这样的输入框组还存在的许多不足之处，如问题一：我们在form表单中添加了这样一个输入框
BootStrap输入框组
qq_39529315的博客
05-31 835
  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中的输入框组如何制作？
LuckXinXin的博客
07-12 745
（1）把前缀或者后缀元素放在一个带有class="input-group"中的<div>中 （2）在该<div>内，在class="input-group-addon"的<span>里面放置额外的内容； （3）把<span>放在<input>元素的前面或后面。 ...
bootstrap - input addon
weixin_33978044的博客
09-06 581
朴实无华的input默认是这样的： <input type="text" placeholder="US Dollar"> 可以为它加上前缀增补和后缀增补： <div class="input-group"> <span class="input-group-addon">$</span&...
input group html,html - bootstrap 3 input-group 100% width - Stack Overflow
weixin_34404199的博客
07-01 85
input-group has display: table css property, while the .00 According to HERE, under "Important Style Rules for Tables",Width works on table cells just about how you would think it does, except when t...
bootstrap输入框
最新发布
10-20
Bootstrap输入框是一种常用的前端UI组件，可以用于表单输入等场景。Bootstrap提供了多种输入框组件，包括基本输入框、带前缀或后缀的输入框、带按钮的输入框、带复选框或单选框的输入框等。可以通过添加不同的class来实现不同的样式和功能。例如，使用class="form-control"可以将一个文本框设置为Bootstrap的标准样式，使用class="input-group"可以将多个输入框组合在一起，使用class="input-group-addon"可以在输入框前或后添加额外的内容，使用class="input-group-btn"可以将按钮作为输入框的前缀或后缀元素。此外，Bootstrap还提供了多种尺寸和状态的输入框样式，可以根据具体需求进行选择和使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值