bootstrap输入框组代码分享

发布网友 发布时间：2022-05-07 01:25

我来回答

共2个回答

懂视网 时间：2022-05-12 02:19

推荐教程：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" class="form-control" placeholder="Username">
 </div>
 <div class="input-group mb-3">
 <input type="text" class="form-control" 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" class="form-control" placeholder="First Name">
 <input type="text" class="form-control" 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" class="form-control" 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" class="form-control" placeholder="GOOGLE"></div>

　　效果图：

5、输入框加按钮组

<div class="input-group mb-3">
 <div class="input-group-prepend">
 <button class="btn btn-outline-secondary" type="button">Basic Button</button> 
 </div>
 <input type="text" class="form-control" placeholder="Some text"></div>
 <div class="input-group mb-3">
 <input type="text" class="form-control" placeholder="Search">
 <div class="input-group-append">
 <button class="btn btn-success" type="submit">Go</button> 
 </div></div>
 <div class="input-group mb-3">
 <input type="text" class="form-control" placeholder="Something clever..">
 <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>

6、设置下拉菜单

<div class="input-group mt-3 mb-3">
 <div class="input-group-prepend">
 <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
 选择网站 </button>
 <div class="dropdown-menu">
 <a class="dropdown-item" href="https://www.google.com">GOOGLE</a>
 <a class="dropdown-item" href="https://www.runoob.com">RUNOOB</a>
 <a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a>
 </div>
 </div>
 <input type="text" class="form-control" placeholder="网站地址"></div>

　　效果图：

7、输入框组标签

　　在输入框组通过在输入框组外围的 label 来设置标签，标签的 for 属性需要与输入框组的 id 对应，点击标签后可以聚焦输入框：

<label for="demo">Write your email here:</label><div class="input-group mb-3">
 <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
 <div class="input-group-append">
 <span class="input-group-text">@runoob.com</span>
 </div></div>

　　效果图：

热心网友 时间：2022-05-11 23:27

Bootstrap
支持的另一个特性，输入框组。输入框组扩展自
表单控件。使用输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。
向输入域添加前缀和后缀的内容
<div
style="padding:
100px
100px
10px;">
<form
class="bs-example
bs-example-form"
role="form">
<div
class="input-group
input-group-lg">
<span
class="input-group-addon">@</span>
<input
type="text"
class="form-control"
placeholder="*handle">
</div>
<br>
<div
class="input-group">
<input
type="text"
class="form-control">
<span
class="input-group-addon">.00</span>
</div>
<br>
<div
class="input-group">
<span
class="input-group-addon">$</span>
<input
type="text"
class="form-control">
<span
class="input-group-addon">.00</span>
</div>
</form>
</div>
复选框和单选插件作为输入框组的前缀或者后缀元素
<div
style="padding:
100px
100px
10px;">
<form
class="bs-example
bs-example-form"
role="form">
<div
class="row">
<div
class="col-lg-6">
<div
class="input-group">
<span
class="input-group-addon">
<input
type="checkbox">
</span>
<input
type="text"
class="form-control">
</div><!--
/input-group
-->
</div><!--
/.col-lg-6
--><br>
<div
class="col-lg-6">
<div
class="input-group">
<span
class="input-group-addon">
<input
type="radio">
</span>
<input
type="text"
class="form-control">
</div><!--
/input-group
-->
</div><!--
/.col-lg-6
-->
</div><!--
/.row
-->
</form>
</div>
按钮作为输入框组的前缀或者后缀元素
<div
style="padding:
100px
100px
10px;">
<form
class="bs-example
bs-example-form"
role="form">
<div
class="row">
<div
class="col-lg-6">
<div
class="input-group">
<span
class="input-group-btn">
<button
class="btn
btn-default"
type="button">
Go!
</button>
</span>
<input
type="text"
class="form-control">
</div><!--
/input-group
-->
</div><!--
/.col-lg-6
--><br>
<div
class="col-lg-6">
<div
class="input-group">
<input
type="text"
class="form-control">
<span
class="input-group-btn">
<button
class="btn
btn-default"
type="button">
Go!
</button>
</span>
</div><!--
/input-group
-->
</div><!--
/.col-lg-6
-->
</div><!--
/.row
-->
</form>
</div>
class="input-group-btn"
<div
class="input-group">
<div
class="input-group-btn">
<button
type="button"
class="btn
btn-default
dropdown-toggle"
data-toggle="dropdown">
下拉菜单
<span
class="caret"></span>
</button>
<ul
class="dropdown-menu">
<li><a
href="#">功能</a></li>
<li><a
href="#">另一个功能</a></li>
<li><a
href="#">其他</a></li>
<li
class="divider"></li>
<li><a
href="#">分离的链接</a></li>
</ul>
</div><!--
/btn-group
-->
<input
type="text"
class="form-control">
</div><!--
/input-group
-->
<div
class="input-group">
<div
class="input-group-btn">
<button
type="button"
class="btn
btn-primary
dropdown-toggle"
data-toggle="dropdown">
<span
class="glyphicon
glyphicon-music"></span>
GO
<span
class="caret"></span>
</button>
<ul
class="dropdown-menu">
<li
class="dropdown-header">下拉菜单标题</li>
<li><a
href="#">A</a></li>
<li
class="divider"><</li>
<li><a
href="#">B</a></li>
</ul>
</div>
<input
type="text"
class="form-control">
</div>
<br>
<div
class="input-group">
<div
class="input-group-btn">
<button
type="button"
class="btn
btn-primary">
<span
class="glyphicon
glyphicon-music"></span>
GO
</button>
<button
type="button"
class="btn
btn-primary
dropdown-toggle"
data-toggle="dropdown">
<span
class="caret"></span>
</button>
<ul
class="dropdown-menu">
<li
class="dropdown-header">下拉菜单标题</li>
<li><a
href="#">A</a></li>
<li
class="divider"><</li>
<li><a
href="#">B</a></li>
</ul>
</div>
<input
type="text"
class="form-control">
</div>
<br>
以上所述是小编给大家介绍的bootstrap输入框组代码分享，希望对大家有所帮助！