閱讀(7.5k) 書簽贊(1) 我要糾錯(cuò)

Bootstrap4 表單控件

2018-05-31 15:09 更新

Bootstrap4 支持以下表單控件：input、textarea、checkbox、radio以及select，使用這些類可以優(yōu)化自定義顯示，以實(shí)現(xiàn)一個(gè)更一致的跨瀏覽器跨設(shè)備渲染。

Bootstrap Input

Bootstrap 支持所有的 HTML5 輸入類型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。

注意：: 如果 input 的 type 屬性未正確聲明，輸入框的樣式將不會(huì)顯示。

以下實(shí)例使用兩個(gè) input 元素，一個(gè)是 text，一個(gè)是 password ：

實(shí)例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>表單控件: input</h2>
  <p>以下實(shí)例使用兩個(gè) input 元素，一個(gè)是 text，一個(gè)是 password ：</p>
  <form>
    <div class="form-group">
      <label for="usr">用戶名:</label>
      <input type="text" class="form-control" id="usr">
    </div>
    <div class="form-group">
      <label for="pwd">密碼:</label>
      <input type="password" class="form-control" id="pwd">
    </div>
  </form>
</div>
</body>
</html>

Bootstrap textarea

以下實(shí)例演示了 textarea 的樣式。

實(shí)例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>表單控件: textarea</h2>
  <p>以下實(shí)例演示了 textarea 的樣式。</p>
  <form>
    <div class="form-group">
      <label for="comment">評(píng)論:</label>
      <textarea class="form-control" rows="5" id="comment"></textarea>
    </div>
  </form>
</div>
</body>
</html>

Bootstrap 復(fù)選框(checkbox)

復(fù)選框用于讓用戶從一系列預(yù)設(shè)置的選項(xiàng)中進(jìn)行選擇，可以選一個(gè)或多個(gè)。

以下實(shí)例包含了三個(gè)選項(xiàng)。最后一個(gè)是禁用的：

實(shí)例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>表單控件: checkbox</h2>
  <p>以下實(shí)例包含了三個(gè)選項(xiàng)。最后一個(gè)是禁用的：</p>
  <form>
    <div class="form-check">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="">Option 1
      </label>
    </div>
    <div class="form-check">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="">Option 2
      </label>
    </div>
    <div class="form-check disabled">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="" disabled>Option 3
      </label>
    </div>
  </form>
</div>
</body>
</html>

使用 .form-check-inline 類可以讓選項(xiàng)顯示在同一行上：

實(shí)例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>表單控件: checkbox</h2>
  <p>以下實(shí)例包含了三個(gè)選項(xiàng)。最后一個(gè)是禁用的，使用 .form-check-inline 類可以讓選項(xiàng)顯示在同一行上：</p>
  <form>
    <div class="form-check form-check-inline">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="">Option 1
      </label>
    </div>
    <div class="form-check form-check-inline">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="">Option 2
      </label>
    </div>
    <div class="form-check form-check-inline disabled">
      <label class="form-check-label">
        <input type="checkbox" class="form-check-input" value="" disabled>Option 3
      </label>
    </div>
  </form>
</div>
</body>
</html>

Bootstrap 單選框(Radio)

復(fù)選框用于讓用戶從一系列預(yù)設(shè)置的選項(xiàng)中進(jìn)行選擇，只能選一個(gè)。

以下實(shí)例包含了三個(gè)選項(xiàng)。最后一個(gè)是禁用的：

實(shí)例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>表單控件: radio</h2>
  <p>以下實(shí)例包含了三個(gè)選項(xiàng)。最后一個(gè)是禁用的：</p>
  <form>
    <div class="radio">
      <label><input type="radio" name="optradio">Option 1</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio">Option 2</label>
    </div>
    <div class="radio disabled">
      <label><input type="radio" name="optradio" disabled>Option 3</label>
    </div>
  </form>
</div>
</body>
</html>

Bootstrap select 下拉菜單

當(dāng)您想讓用戶從多個(gè)選項(xiàng)中進(jìn)行選擇，但是默認(rèn)情況下只能選擇一個(gè)選項(xiàng)時(shí)，則使用選擇框。

以下實(shí)例包含了兩個(gè)下拉菜單：

實(shí)例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>表單控件: select</h2>
  <p>以下表單包含了兩個(gè)下拉菜單 (select 列表):</p>
  <form>
    <div class="form-group">
      <label for="sel1">單選下拉菜單:</label>
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <br>
      <label for="sel2">多選下拉菜單(按住 shift 鍵，可以選取多個(gè)選項(xiàng)):</label>
      <select multiple class="form-control" id="sel2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
  </form>
</div>
</body>
</html>

以上內(nèi)容是否對(duì)您有幫助：

← Bootstrap4 表單

Bootstrap4 輪播 →

寫筆記

我要補(bǔ)充