bootstrap输入框组有哪些
1、Bootstrap4 输入框组
我们可以使用 .input-group
类来向表单输入框中添加更多的样式,如图标、文本或者按钮。使用 .input-group-prepend
类可以在输入框的的前面添加文本信息, .input-group-append
类添加在输入框的后面。最后,我们还需要使用 .input-group-text
类来设置文本的样式。
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" placeholder="Username">
</div>
<div class="input-group mb-3">
<input type="text" placeholder="Your Email">
<div class="input-group-append">
<span class="input-group-text">@runoob.com</span>
</div>
</div></form>
效果图:
2、输入框大小
使用 .input-group-sm
类来设置小的输入框, .input-group-lg
类设置大的输入框:
<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>
3、多个输入框和文本
<!-- 多个输入框 --><form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Person</span>
</div>
<input type="text" placeholder="First Name">
<input type="text" 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>
4、复选框与单选框
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox">
</div>
</div>
<input type="text" placeholder="RUNOOB"></div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio">
</div>
</div>
<input type="text" placeholder="GOOGLE"></div>
效果图:
5、输入框加按钮组
<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="button">Basic Button</button>
</div>
<input type="text" placeholder="Some text"></div>
<div class="input-group mb-3">
<input type="text" placeholder="Search">
<div class="input-group-append">
<button type="submit">Go</button>
</div></div>
<div class="input-group mb-3">
<input type="text" placeholder="Something clever..">
<div class="input-group-append">
<button type="button">OK</button>
<button type="button">Cancel</button>
</div></div>
6、设置下拉菜单
<div class="input-group mt-3 mb-3">
<div class="input-group-prepend">
<button type="button" data-toggle="dropdown">
选择网站 </button>
<div class="dropdown-menu">
<a href="https://www.谷歌.com">GOOGLE</a>
<a href="https://www.runoob.com">RUNOOB</a>
<a href="https://www.taobao.com">TAOBAO</a>
</div>
</div>
<input type="text" placeholder="网站地址"></div>
效果图:
7、输入框组标签
在输入框组通过在输入框组外围的 label 来设置标签,标签的 for 属性需要与输入框组的 id 对应,点击标签后可以聚焦输入框:
<label for="demo">Write your email here:</label><div class="input-group mb-3">
<input type="text" placeholder="Email" name="email">
<div class="input-group-append">
<span class="input-group-text">@runoob.com</span>
</div></div>
效果图:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbiggb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01