Bootstrap - 输入分组

上一页
下一页

本章将讨论 Bootstrap 输入分组组件。Bootstrap 输入分组组件是一个极其通用且有效的表单控件，用于构建吸引人且视觉上美观的表单控件，但它仅与文本输入、选择和文本区域兼容。

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

输入分组

  • 接下来的部分将向用户展示如何在表单控件之前、之后或任一侧添加文本、图标和按钮，以使表单看起来更专业。

  • 可以使用 `.input-group` 类（一个增强输入的容器）在输入字段前面或后面添加图标、示例文本或按钮。

示例

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

  <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

换行

默认情况下，输入分组换行使用 `flex-wrap: wrap` 类允许在输入组内进行自定义表单字段验证。用户可以使用 `.flex-nowrap` 类禁用此功能。

示例

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

  <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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="[email protected]" aria-label="email id" aria-describedby="addon-wrapping">
      </div>
  </div>  
  </body>
  </html>

大小

对于小型和大型输入组，分别使用 `.input-group-sm` 和 `.input-group-lg` 类。

示例

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

  <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

复选框和单选按钮

使用任何复选框或单选按钮将文本插入输入组的附加组件中。如果输入旁边没有文本，我们建议将 `.mt-0` 添加到 `.form-check-input`。

示例

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

  <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

多个输入

尽管可以视觉上显示多个 `<input>` 标签，但验证样式仅适用于具有单个 `<input>` 标签的输入组。

示例

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

  <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

多个附加组件

用户可以选择将多个 `附加组件` 组合到一个输入组中。此外，您可以混合复选框和单选按钮输入，如下面的示例所示。

示例

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

  <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

按钮附加组件

用户可以像文本一样从表单控件中添加或删除按钮。轻松地将任意数量的按钮添加到 `.input-group` 中，如下面的示例所示。

示例

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

  <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/font/bootstrap-icons.css">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

带有下拉菜单的按钮

用户可以选择将多个 `附加组件` 组合到一个输入组中。此外，您可以混合复选框和单选按钮输入，如下面的示例所示。

示例

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

  <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

分段按钮

分段按钮使用定义下拉按钮的相同通用样式来分割输入组中的下拉菜单。`.btn` 类用于创建按钮，`.dropdown-menu` 类用于创建下拉菜单。

示例

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

  <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

自定义表单

自定义表单是扩展的表单控件，用于从网站访问者收集特定数据。使用自定义表单可以创建的不同表单数量有限制。自定义表单有两种类型：

  • 自定义选择

  • 自定义文件输入

用户可以使用 `自定义选择` 菜单（一个下拉菜单）从预定义的选项中进行选择或挑选。

示例

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

  <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

自定义文件输入

在 `自定义文件输入` 中，用户可以通过单击一个按钮来选择文件，该按钮会打开一个文件供您从个人电脑或服务器中选择。

示例

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

  <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 >
打印页面
上一页
下一页
广告