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

換行

預設情況下，輸入分組換行使用 `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/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>

大小

對於小型和大型輸入組，分別使用 `.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/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>

複選框和單選按鈕

使用任何複選框或單選按鈕將文字插入輸入組的附加元件中。如果輸入旁邊沒有文字，我們建議將 `.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/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>

多個輸入

儘管可以視覺上顯示多個 `<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/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>

多個附加元件

使用者可以選擇將多個 `附加元件` 組合到一個輸入組中。此外，您可以混合複選框和單選按鈕輸入，如下面的示例所示。

示例

您可以使用 `編輯並執行` 選項編輯並嘗試執行此程式碼。

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

按鈕附加元件

使用者可以像文字一樣從表單控制元件中新增或刪除按鈕。輕鬆地將任意數量的按鈕新增到 `.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/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>

帶有下拉選單的按鈕

使用者可以選擇將多個 `附加元件` 組合到一個輸入組中。此外，您可以混合複選框和單選按鈕輸入，如下面的示例所示。

示例

您可以使用 `編輯並執行` 選項編輯並嘗試執行此程式碼。

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

分段按鈕

分段按鈕使用定義下拉按鈕的相同通用樣式來分割輸入組中的下拉選單。`.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/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>

自定義表單

自定義表單是擴充套件的表單控制元件，用於從網站訪問者收集特定資料。使用自定義表單可以建立的不同表單數量有限制。自定義表單有兩種型別：

  • 自定義選擇

  • 自定義檔案輸入

使用者可以使用 `自定義選擇` 選單（一個下拉選單）從預定義的選項中進行選擇或挑選。

示例

您可以使用 `編輯並執行` 選項編輯並嘗試執行此程式碼。

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

自定義檔案輸入

在 `自定義檔案輸入` 中，使用者可以透過單擊一個按鈕來選擇檔案，該按鈕會開啟一個檔案供您從個人電腦或伺服器中選擇。

示例

您可以使用 `編輯並執行` 選項編輯並嘗試執行此程式碼。

  <!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 >
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.