亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

Bootstrap4 表單

HTML表單是web頁(yè)面和應(yīng)用程序不可分割的一部分，但是使用CSS一個(gè)接一個(gè)地手動(dòng)創(chuàng)建表單布局或設(shè)置表單控件的樣式通常是枯燥乏味的。Bootstrap通過(guò)預(yù)定義的一組類(lèi)大大簡(jiǎn)化了表單控件（如標(biāo)簽、輸入字段、選擇框、文本區(qū)域、按鈕等）的樣式和對(duì)齊過(guò)程。

在本章中，我們將學(xué)習(xí)如何使用 Bootstrap 創(chuàng)建表單。Bootstrap 通過(guò)一些簡(jiǎn)單的 HTML 標(biāo)簽和擴(kuò)展的類(lèi)即可創(chuàng)建出不同樣式的表單。

表單元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 類(lèi)的情況下，寬度都是設(shè)置為 100%。

Bootstrap4 表單布局

  • 堆疊表單 (全屏寬度)：垂直方向

  • 內(nèi)聯(lián)表單：水平方向

Bootstrap 提供了兩種類(lèi)型的表單布局:

堆疊表單

以下示例使用兩個(gè)輸入框，一個(gè)復(fù)選框，一個(gè)提交按鈕來(lái)創(chuàng)建堆疊表單：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>堆疊表單</h2>
  <form>
    <div class="form-group">
      <label for="email">電子郵件:</label>
      <input type="email" class="form-control" id="email" placeholder="輸入email">
    </div>
    <div class="form-group">
      <label for="pwd">密碼:</label>
      <input type="password" class="form-control" id="pwd" placeholder="輸入密碼">
    </div>
    <div class="form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox"> 記住我
      </label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>
</body>
</html>
測(cè)試看看 ?/?

運(yùn)行后效果如下：

圖片.png

內(nèi)聯(lián)表單

所有內(nèi)聯(lián)表單中的元素都是左對(duì)齊的。

注意：在屏幕寬度小于 576px 時(shí)為垂直堆疊，如果屏幕寬度大于等于576px時(shí)表單元素才會(huì)顯示在同一個(gè)水平線上。

內(nèi)聯(lián)表單需要在 <form> 元素上添加  .form-inline類(lèi)。

以下示例使用兩個(gè)輸入框，一個(gè)復(fù)選框，一個(gè)提交按鈕來(lái)創(chuàng)建內(nèi)聯(lián)表單：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>內(nèi)聯(lián)表單</h2>
  <p>屏幕寬度在大于等于 576px 時(shí)才會(huì)水平顯示。如果小于 576px 則會(huì)生成堆疊表單。</p>
  <form class="form-inline">
    <label for="email">電子郵件:</label>
    <input type="email" class="form-control" id="email" placeholder="輸入email">
    <label for="pwd">輸入密碼:</label>
    <input type="password" class="form-control" id="pwd" placeholder="輸入密碼">
    <div class="form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox"> 記住我
      </label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>
</body>
</html>
測(cè)試看看 ?/?

運(yùn)行后效果如下：

圖片.png