bootstrap输入框组有哪些

百变鹏仔 2个月前 (11-14) #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>

效果图：

文章推荐

bootstrap输入框组有哪些

学习bootstrap需要什么基础

bootstrap模态框有什么用

bootstrap是什么意思啊

bootstrap是什么时间开源的

bootstrap怎么实现响应式