Bootstrap 简明教程
Bootstrap - Input Groups
本章将讨论引导输入组组件。引导输入组组件是一个极其通用且有效的表单控件，用于构建具有吸引力和视觉吸引力的表单控件，但它只与文本输入、选择框和文本区域兼容。
This chapter will discuss about bootstrap input groups component. A bootstrap input group component is a an extremely versatile and effective form controls for building appealing and visually appealing form controls, however it is only compatible with text input, select, and textarea.
用户可以快速向文本输入，自定义选择和自定义文件输入的侧面添加文本、按钮或按钮组以扩展表单控件。
Users may quickly add text, buttons, or button groups to the sides of text inputs, custom selections, and custom file inputs to extend form controls.
Input groups
-
The sections that follow will show users how to add text, icons, and buttons before, after, or on either side of form controls to make the form appear more professional.
-
An icon, sampletext, or a button can be added in front of or behind the input field using the .input-group class, which is a container to enhance inputs.
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Input Groups </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
</head>
<body>
<div class="container mt-3">
<form action="/contact.php">
<div class="input-group mb-3">
<span class="input-group-text">@ </span>
<input type="text" class="form-control" placeholder="Username" name="usrname">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Your Email" name="email">
<span class="input-group-text">@tutorialspoint.com </span>
</div>
<button type="submit" class="btn btn-success">Submit </button>
</form>
</div>
</body>
</html>Wrapping
默认情况下，输入组包裹使用 flex-wrap: wrap 类，以允许在输入组内进行自定义表单字段验证。用户可以使用 *.flex-nowrap *类来禁用它。
By default, input groups wrap uses the flex-wrap: wrap class to allow for custom form field validation inside the input group. Users can disable this using *.flex-nowrap *class.
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Input Groups </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
</head>
<body>
<div class="container mt-3">
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">Email address</span>
<input type="email" class="form-control" placeholder="name@tutorialspoint.com" aria-label="email id" aria-describedby="addon-wrapping">
</div>
</div>
</body>
</html>Sizing
对于小型和大型输入组，分别使用 .input-group-sm *and *.input-group-lg 类。
For small and large input groups, respectively, use the .input-group-sm *and *.input-group-lg classes.
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Input Groups</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="input-group input-group-sm mb-3">
<span class="input-group-text">@small</span>
<input type="text" class="form-control" aria-label="Input for sizing" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="input-group mb-3">
<span class="input-group-text">@default</span>
<input type="text" class="form-control" aria-label="Input for sizing" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group input-group-lg mb-3">
<span class="input-group-text">@large</span>
<input type="text" class="form-control" aria-label="Input for sizing" aria-describedby="inputGroup-sizing-lg">
</div>
</div>
</body>
</html>Checkboxes and radios
可以使用任意复选框或单选按钮将文本插入输入组的附加组件中。如果输入旁边没有文本，我们建议添加 .mt-0 *to the *.form-check-input 。
Insert the text inside the input group’s addon using any checkbox or radio button. If there is no text next to the input, we suggest to add .mt-0 *to the *.form-check-input.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Input Groups </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
</head>
<body>
<div class="container mt-3">
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox">
</div>
<input type="text" class="form-control" placeholder="Item 1">
</div>
<div class="input-group">
<div class="input-group-text">
<input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button">
</div>
<input type="text" class="form-control" placeholder="Item 2">
</div>
</div>
</body>
</html>Multiple inputs
尽管一个 <input> 标签可以以可视方式显示，但是仅对带有单个 <input> 的输入组提供验证样式。
Although more than one <input> tags can be displayed visually, validation styles are only offered for input groups with a single <input> tag.
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Input Groups </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
</head>
<body>
<div class="container mt-3">
<div class="input-group">
<span class="input-group-text">Student email id and password </span>
<input type="text" aria-label=" email id " class="form-control">
<input type="text" aria-label="password" class="form-control">
</div>
</div>
</body>
</html>Multiple addons
用户可以选择将多个 addons 组合到一个输入组中。此外，还可以组合复选框和单选按钮，如下面的示例所示。
Users have the option to combine multiple addons into a single input group. Additionally, you can mix both the checkbox and radio inputs, as demonstrated in the example below.
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Input Groups </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
</head>
<body>
<div class="container mt-3">
<div class="input-group mb-3">
<span class="input-group-text">
<input type="checkbox" class="form-check-input mt-0">
</span>
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
</div>
</body>
</html>Button addons
用户可以添加或删除表单控件上的按钮（如文本）。用户可以根据需要轻松地向 .input-group 添加任意数量的按钮，如下面的示例所示。
Users can add or remove buttons from form controls like text. Easily add any number of buttons that you want to the .input-group, as shown in the example below.
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Input Groups </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
</head>
<body>
<div class="container mt-4">
<div class="row">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search">
<button type="button" class="btn btn-primary">
<i class="bi-search"></i>
</button>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Type text">
<button type="submit" class="btn btn-success">Submit</button>
<button type="clear" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</body>
</html>Buttons with dropdowns
用户可以选择将多个 addons 组合到一个输入组中。此外，还可以组合复选框和单选按钮，如下面的示例所示。
Users have the option to combine multiple addons into a single input group. Additionally, you can mix both the checkbox and radio inputs, as demonstrated in the example below.
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Input Groups </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
</head>
<body>
<div class="container mt-4">
<div class="input-group mb-3">
<button class="btn btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Home</a></li>
<li><a class="dropdown-item" href="#">About Us</a></li>
<li><a class="dropdown-item" href="#">Services</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Others</a></li>
</ul>
<input type="text" class="form-control" aria-label="Dropdown button">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" aria-label="Dropdown button">
<button class="btn btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Home</a></li>
<li><a class="dropdown-item" href="#">About Us</a></li>
<li><a class="dropdown-item" href="#">Services</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Others</a></li>
</ul>>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Home</a></li>
<li><a class="dropdown-item" href="#">About Us</a></li>
<li><a class="dropdown-item" href="#">Services</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Others</a></li>
</ul>
<input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Home</a></li>
<li><a class="dropdown-item" href="#">About Us</a></li>
<li><a class="dropdown-item" href="#">Services</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Others</a></li>
</ul>
</div>
</div>
</body>
</html>Segmented buttons
分段按钮使用定义下拉按钮的相同公共样式，以对输入组中的下拉列表进行分段。.btn *类用于创建按钮，.dropdown-menu *类用于创建下拉菜单。
The same common style that defines a dropdown button is used by segmented buttons to segment dropdowns in input groups. The *.btn *class is used to create buttons, and the *.dropdown-menu *class is used to create dropdown menus.
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Input Groups </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
</head>
<body>
<div class="container mt-4">
<div class="input-group mb-3">
<button type="button" class="btn btn-outline-dark">Home</button>
<button type="button" class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Home</a></li>
<li><a class="dropdown-item" href="#">About Us</a></li>
<li><a class="dropdown-item" href="#">Services</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
<input type="text" class="form-control" aria-label="Segmented dropdown button">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Segmented dropdown button">
<button type="button" class="btn btn-outline-dark">Home</button>
<button type="button" class="btn btn-outline-dark dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Home</a></li>
<li><a class="dropdown-item" href="#">About Us</a></li>
<li><a class="dropdown-item" href="#">Services</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
</body>
</html>Custom forms
自定义表单是一种展开的表单控件，用于从网站访客那里收集某些数据。使用自定义表单创建的不同表单数量受到限制。自定义表单有两种类型：
Custom forms are expanded form controls used to gather certain data from website visitors. There are restrictions on the number of different forms you can create using custom forms. There are two types of custom forms:
-
Custom select
-
Custom file input
用户可以使用 custom select 菜单（一个下拉菜单）从预定义选项中进行选择。
Users can select or pick from a predefined option using the custom select menu, which is a dropdown menu.
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Input Groups </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
</head>
<body>
<div class="container mt-4">
<div class="input-group mb-3">
<label class="input-group-text" for="customSelect1">Options</label>
<select class="form-select" id="customSelect1">
<option selected>Select the Subject</option>
<option value="1">English</option>
<option value="2">Mathematics</option>
<option value="3">Science</option>
</select>
</div>
<div class="input-group mb-3">
<select class="form-select" id="customSelect2">
<option selected>Select the Subject</option>
<option value="1">English</option>
<option value="2">Mathematics</option>
<option value="3">Science</option>
</select>
<label class="input-group-text" for="customSelect2">Options</label>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-dark" type="button">Button</button>
<select class="form-select" id="customSelect3" aria-label="Button addon">
<option selected>Select the Subject</option>
<option value="1">English</option>
<option value="2">Mathematics</option>
<option value="3">Science</option>
</select>
</div>
<div class="input-group">
<select class="form-select" id="customSelect4" aria-label="Button addon">
<option selected>Select the Subject</option>
<option value="1">English</option>
<option value="2">Mathematics</option>
<option value="3">Science</option>
</select>
<button class="btn btn-outline-dark" type="button">Button</button>
</div>
</div>
</body>
</html>Custom file input
在 custom file input 用户可以通过单击按钮从您的个人电脑或服务器中选择文件并进行选择。
In custom file input users can choose a file by clicking a button that opens a file to select from your personal computer or server.
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!DOCTYPE html >
<html lang="en" >
<head >
<title >Bootstrap - Input Groups </title >
<meta charset="UTF-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body >
<div class="container mt-4" >
<div class="input-group mb-3" >
<label class="input-group-text" for="customFileInput1" >Upload </label >
<input type="file" class="form-control" id="customFileInput1" >
</div >
<div class="input-group mb-3" >
<input type="file" class="form-control" id="customFileInput2" >
<label class="input-group-text" for="customFileInput2" >Upload </label >
</div >
<div class="input-group mb-3" >
<button class="btn btn-outline-primary" type="button" id="customFileInput3" >Option Button </button >
<input type="file" class="form-control" id="inputGroupFile03" aria-describedby="customFileInput3" aria-label="Upload" >
</div >
<div class="input-group" >
<input type="file" class="form-control" id="inputGroupFile04" aria-describedby="customFileInput4" aria-label="Upload" >
<button class="btn btn-outline-primary" type="button" id="customFileInput4" >Option Button </button >
</div >
</div >
</body >
</html >