Bootstrap搜索框

一、Bootstrap搜索框代碼

Bootstrap是一款強大的前端框架，可以輕鬆構建響應式網站和Web應用程序。通過使用Bootstrap框架，您可以快速構建自定義搜索框。Bootstrap搜索框使用的HTML代碼和樣式表在以下鏈接中提供：

<form action="#" method="post" class="form-inline my-2 my-lg-0">
   <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
   <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

此代碼使用form標記創建搜索框和按鈕。搜索框由class為form-control的表單元素創建，Button由class屬性為btn和btn-outline-success的按鈕元素創建。您可以使用樣式表對搜索框進行自定義設計。

二、Bootstrap搜索下拉框

除了基本的搜索框外，Bootstrap還提供了一個搜索下拉框的選項。此內容可以使用與基本搜索框相同的HTML代碼創建。但是，您需要將下拉菜單包含在組件中，並使用標記class為dropdown等。此外，您還需要添加一個輸入框來允許用戶在下拉菜單中選擇值。以下是一個示例代碼：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <form class="px-4 py-3">
      <div class="form-group">
        <label for="exampleDropdownFormEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
      </div>
      <div class="form-group">
        <label for="exampleDropdownFormPassword1">Password</label>
        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
      </div>
      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="dropdownCheck">
          <label class="form-check-label" for="dropdownCheck">
            Remember me
          </label>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Sign in</button>
    </form>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">New around here? Sign up</a>
    <a class="dropdown-item" href="#">Forgot password?</a>
  </div>
</div>

三、Bootstrap搜索框模板

Bootstrap還提供了現成的搜索框模板。這個模板可以通過使用簡單的HTML代碼和CSS樣式表從頭開始構建。以下是Bootstrap搜索框模板的示例代碼：

<form class="example" action="/action_page.php">
  <input type="text" placeholder="Search.." name="search">
  <button type="submit"><i class="fa fa-search"></i></button>
</form>

四、Bootstrap搜索框居中

要將Bootstrap搜索框居中，請使用居中類名。以下是居中搜索框的示例代碼：

<div class="container">
  <h2>Centered Search Bar</h2>
  <div class="d-flex justify-content-center">
    <form class="form-inline">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-success" type="submit">Search</button>
    </form>
  </div>
</div>

五、Bootstrap搜索框改長度

Bootstrap搜索框的長度可以通過CSS樣式表進行更改。要更改搜索框的長度，請在樣式表中使用自定義CSS類並分配給表單元素。以下是更改搜索框長度的示例代碼：

<style>
  .search-bar{
    width: 700px;
  }
</style>
<form>
  <input type="text" class="form-control search-bar">
</form>

六、Bootstrap搜索框和登錄按鈕

如果您需要在同一表單中包含搜索框和登錄按鈕，請使用Bootstrap的網格系統。以下是組合搜索框和登錄按鈕的示例代碼：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
    <div class="col-md-6">
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Username">
        <input class="form-control mr-sm-2" type="password" placeholder="Password">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Login</button>
      </form>
    </div>
  </div>
</div>

七、Bootstrap框架

Bootstrap是一種流行的開源框架，用於Web開發。它允許開發人員以簡單而快速的方式創建漂亮的響應式Web應用程序。Bootstrap是基於HTML，CSS和JavaScript構建的，提供了一些強大的組件和工具，這些組件和工具可以幫助您快速輕鬆地構建Web頁面。

八、Bootstrap框架特點

Bootstrap是一個流行的CSS框架，擁有許多獨特的特點。以下是Bootstrap框架的一些主要特點：

1. 響應式設計： Bootstrap框架提供了針對各種設備（包括移動設備）的響應式設計，因此您可以輕鬆地創建流暢的Web應用程序和網站。

2. 內置組件： 您可以使用內置的Bootstrap組件，例如導航欄，表格，表單等等，以更快速地構建頁面。

3. 整潔簡單的設計語言：Bootstrap採用清晰，簡單的設計語言，具有被廣泛接受的美學標準。

4. 容易定製： 您可以使用自定義CSS來輕鬆擴展和修改Bootstrap的默認外觀。

九、Bootstrap保存搜索結果

要將搜索結果保存在資料庫中，您需要使用伺服器端編程語言，例如PHP。以下是搜索表單和PHP代碼的示例代碼：

<form action="search.php" method="POST">
  <input type="text" name="search" placeholder="Enter Search Term">
  <button type="submit" name="submit">Search</button>
</form>

以下是PHP代碼的示例代碼來處理搜索表單並將結果保存到資料庫中：

<?php
  // Connect to database
  $conn = mysqli_connect("localhost", "root", "", "mydatabase");
  
  // Collect search term from form
  $search_term = mysqli_real_escape_string($_POST['search']);
  
  // Search the database
  $query = "SELECT * FROM mytable WHERE column LIKE '%{$search_term}%' ";
  $result = mysqli_query($conn, $query);
  
  // Loop through results and display them
  while ($row = mysqli_fetch_array($result)) {
      echo "<p>{$row['column']} </p>";
  }
?>

十、Bootstrap框架官網

Bootstrap框架的官方網站為：https://getbootstrap.com/。在官網上，您可以下載Bootstrap框架，查看示例代碼和文檔，以及獲取社區支持和討論。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/188405.html