bootstrap输入框组有哪些
文章标签
输入框
推荐教程:Bootstrap教程
1、Bootstrap4 输入框组
我们可以使用 .input-group 类来向表单输入框中添加更多的样式,如图标、文本或者按钮。使用 .input-group-prepend 类可以在输入框的的前面添加文本信息, .input-group-append 类添加在输入框的后面。最后,我们还需要使用 .input-group-text 类来设置文本的样式。
@
@runoob.com
效果图:
2、输入框大小
使用 .input-group-sm 类来设置小的输入框, .input-group-lg 类设置大的输入框:
Small
Default
Large
3、多个输入框和文本
<!-- 多个输入框 -->
Person
One Two Three
4、复选框与单选框
<div> <div> <div> <input> </div> </div> <input></div> <div> <div> <div> <input> </div> </div> <input></div>
效果图:
5、输入框加按钮组
<div> <div> <button>Basic Button</button> </div> <input></div> <div> <input> <div> <button>Go</button> </div></div> <div> <input> <div> <button>OK</button> <button>Cancel</button> </div></div>
6、设置下拉菜单
<div> <div> <button> 选择网站 </button> <div> <a>GOOGLE</a> <a>RUNOOB</a> <a>TAOBAO</a> </div> </div> <input></div>
效果图:
7、输入框组标签
在输入框组通过在输入框组外围的 label 来设置标签,标签的 for 属性需要与输入框组的 id 对应,点击标签后可以聚焦输入框:
<label>Write your email here:</label><div> <input> <div> <span>@runoob.com</span> </div></div>
效果图: