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
class
="
form-control
"
placeholder
="
Username
"
type
="
text
">
</
div
>
<
div
class
="
input-group mb-3
">
<
input
class
="
form-control
"
placeholder
="
Your Email
"
type
="
text
">
<
div
class
="
input-group-append
">
<
span
class
="
input-group-text
">
@js51.top
</
span
>
</
div
>
</
div
>
</
form
>
效果：
.input-group .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮，.input-group-prepend 类添加在前面，.input-group-append 添加在后面。
使用 .input-group-text 类来设置文本的样式。
输入框大小
使用 .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
class
="
form-control
"
type
="
text
">
</
div
>
</
form
>
<
form
>
<
div
class
="
input-group mb-3
">
<
div
class
="
input-group-prepend
"><
span
class
="
input-group-text
">
Default
</
span
></
div
>
<
input
class
="
form-control
"
type
="
text
">
</
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
class
="
form-control
"
type
="
text
">
</
div
>
</
form
>
效果：
使用 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框：
多个输入框和文本
<!-- 多个输入框 -->
<
form
>
<
div
class
="
input-group mb-3
">
<
div
class
="
input-group-prepend
"><
span
class
="
input-group-text
">
Person
</
span
></
div
>
<
input
class
="
form-control
"
placeholder
="
First Name
"
type
="
text
">
<
input
class
="
form-control
"
placeholder
="
Last Name
"
type
="
text
">
</
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
class
="
form-control
"
type
="
text
">
</
div
>
</
form
>
效果：
复选框与单选框
文本信息可以使用复选框与单选框替代：
<
div
class
="
input-group mb-3
">
<
div
class
="
input-group-prepend
">
<
div
class
="
input-group-text
">
<
input
type
="
checkbox
">
</
div
>
</
div
>
<
input
class
="
form-control
"
placeholder
="
APPLE
"
type
="
text
">
</
div
>
<
div
class
="
input-group mb-3
">
<
div
class
="
input-group-prepend
">
<
div
class
="
input-group-text
">
<
input
type
="
radio
">
</
div
>
</
div
>
<
input
class
="
form-control
"
placeholder
="
ANDROID
"
type
="
text
">
</
div
>
效果：
文本信息可以使用复选框与单选框替代：
输入框添加按钮组
<
div
class
="
input-group mb-3
">
<
div
class
="
input-group-prepend
">
<
button
class
="
btn btn-outline-secondary
"
type
="
button
">
Basic Button
</
button
>
</
div
>
<
input
class
="
form-control
"
placeholder
="
Some text
"
type
="
text
">
</
div
>
<
div
class
="
input-group mb-3
">
<
input
class
="
form-control
"
placeholder
="
Search
"
type
="
text
">
<
div
class
="
input-group-append
">
<
button
class
="
btn btn-success
"
type
="
submit
">
Go
</
button
>
</
div
>
</
div
>
<
div
class
="
input-group mb-3
">
<
input
class
="
form-control
"
placeholder
="
More...
"
type
="
text
">
<
div
class
="
input-group-append
">
<
button
class
="
btn btn-primary
"
type
="
button
">
OK
</
button
>
<
button
class
="
btn btn-danger
"
type
="
button
">
Cancel
</
button
>
</
div
>
</
div
>
效果：
设置下拉菜单
输入框中添加下拉菜单不需要使用 .dropdown 类。
<
div
class
="
input-group mt-3 mb-3
">
<
div
class
="
input-group-prepend
">
<
button
class
="
btn btn-outline-secondary dropdown-toggle
"
data-toggle
="
dropdown
"
type
="
button
">
选择网站
</
button
>
<
div
class
="
dropdown-menu
">
<
a
class
="
dropdown-item
"
href
="
https://www.google.com
">
GOOGLE
</
a
>
<
a
class
="
dropdown-item
"
href
="
https://www.baidu.com
">
BAIDU
</
a
>
<
a
class
="
dropdown-item
"
href
="
https://www.taobao.com
">
TAOBAO
</
a
>
</
div
>
</
div
>
<
input
class
="
form-control
"
placeholder
="
网站地址
"
type
="
text
">
</
div
>
效果：
输入框中添加下拉菜单不需要使用 .dropdown 类。
输入框组标签
在输入框组通过在输入框组外围的 label 来设置标签，标签的 for 属性需要与输入框组的 id 对应，点击标签后可以聚焦输入框：
<
label
for
="
demo
">
Write your email here:
</
label
">
<
div
class
="
input-group mb-3
">
<
input
class
="
form-control
"
id
="
demo
"
placeholder
="
Email
"
name
="
email
"
type
="
text
">
<
div
class
="
input-group-append
">
<
span
class
="
input-group-text
">
@js51.top
</
span
>
</
div
>
</
div
>
效果：
在输入框组通过在输入框组外围的 label 来设置标签，标签的 for 属性需要与输入框组的 id 对应。
点击标签后可以聚焦输入框：