Bootstrap 简明教程

Bootstrap - Input Groups

本章将讨论引导输入组组件。引导输入组组件是一个极其通用且有效的表单控件，用于构建具有吸引力和视觉吸引力的表单控件，但它只与文本输入、选择框和文本区域兼容。

用户可以快速向文本输入，自定义选择和自定义文件输入的侧面添加文本、按钮或按钮组以扩展表单控件。

Input groups

以下部分将向用户展示如何在表单控件的前后或两侧添加文本、图标和按钮以使表单显得更为专业。
一个图标、文本或一个按钮可以利用 .input-group 类添加到输入字段の前面或后面，这个类是一个用于增强输入的容器。

Example

您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。

  <!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 *类来禁用它。

Example

您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。

  <!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 类。

Example

您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。

  <!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 。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

  <!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> 的输入组提供验证样式。

Example

您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。

  <!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 组合到一个输入组中。此外，还可以组合复选框和单选按钮，如下面的示例所示。

Example

您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。

  <!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 添加任意数量的按钮，如下面的示例所示。

Example

您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。

  <!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 组合到一个输入组中。此外，还可以组合复选框和单选按钮，如下面的示例所示。

Example

您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。

  <!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 *类用于创建下拉菜单。

Example

您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。

  <!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 select
Custom file input

用户可以使用 custom select 菜单（一个下拉菜单）从预定义选项中进行选择。

Example

您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。

  <!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 用户可以通过单击按钮从您的个人电脑或服务器中选择文件并进行选择。

Example

您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。

  <!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 >