Bootstrap 输入框组
Bootstrap是一个流行的前端框架,提供了若干组件,其中输入框组(Input Group)是一种常见组件,在输入框左右可以添加预定义的文本、按钮等元素。这份文档将详细介绍Bootstrap输入框组的用法和示例。
基本使用
使用Bootstrap的输入框组需要先引入相应的CSS和JavaScript文件,可以从官方网站下载或使用在线CDN。比如以下代码可以引入Bootstrap 5的CSS和JavaScript:
<!-- 引入CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<!-- 引入JavaScript文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
然后就可以开始使用输入框组。输入框组通常由一个带有类名input-group
的父元素包裹住输入框、添加的元素等。以下是一个简单的输入框组示例:
<div class="input-group">
<input type="text" class="form-control" placeholder="输入文字...">
<button class="btn btn-outline-secondary" type="button">搜索</button>
</div>
这个输入框组包含一个文本框和一个按钮,可以用于搜索。其中,form-control
类用于设置输入框的样式,btn
类用于设置按钮的样式。btn-outline-secondary
类表示一个带边框的次要按钮。
输入框组样式
输入框组支持多种样式,包括大小、颜色、形状等。可以通过给父元素添加不同的类名来设置样式。以下是常用的样式类和效果示例:
大小
输入框组可以设置为小、中等、大等多种尺寸。使用input-group-sm
、input-group
(中等尺寸,可以省略)和input-group-lg
类来设置大小。
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="小尺寸">
<button class="btn btn-outline-secondary" type="button">按钮</button>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="中等尺寸">
<button class="btn btn-outline-secondary" type="button">按钮</button>
</div>
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="大尺寸">
<button class="btn btn-outline-secondary" type="button">按钮</button>
</div>
颜色
输入框组可以根据不同的主题颜色设置为不同的颜色。可以使用bg-*
、text-*
等类来设置颜色。其中,bg-*
类用于设置背景颜色,text-*
类用于设置文本颜色。以下是一些示例:
<div class="input-group bg-primary">
<input type="text" class="form-control" placeholder="背景颜色">
<button class="btn btn-light" type="button">按钮</button>
</div>
<div class="input-group">
<span class="input-group-text bg-danger text-light">@</span>
<input type="text" class="form-control" placeholder="图标和文本颜色">
</div>
这个示例演示了如何添加圆角边框,可以设置rounded-start
和rounded-end
类来分别设置左右的圆角。
嵌套输入框组
输入框组还支持嵌套,可以在一个输入框组中添加另一个输入框组。以下是一个示例:
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">提交</button>
</div>
</div>
这个示例中,输入框组的左边是个带美元符号的文本元素,右边是个提交按钮。
总结
本文介绍了Bootstrap输入框组的用法和示例。通过添加父元素的类名,可以设置输入框组的大小、颜色、形状等样式,使其更加灵活多样。同时,输入框组还支持添加预定义的元素,支持嵌套,能够满足各种输入框需求。