表單

堆疊表單

所有設(shè)置了 .form-control 類的 <input> 和 <textarea> 元素都可獲得正確的表單樣式：

實(shí)例

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">電子郵件：</label>
    <input type="email" class="form-control" id="email" placeholder="請(qǐng)輸入電子郵件地址" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">密碼：</label>
    <input type="password" class="form-control" id="pwd" placeholder="請(qǐng)輸入密碼" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> 記住我
    </label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

另外請(qǐng)您注意，我們?yōu)槊總€(gè) label 元素添加了 .form-label 類以確保正確的填充。

復(fù)選框有不同的標(biāo)記。它們被設(shè)置了 .form-check 類的容器元素包圍。label 設(shè)置 .form-check-label 類，而復(fù)選框和單選按鈕使用 .form-check-input。

Textarea

實(shí)例

<label for="comment">評(píng)論：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

表單行 / 網(wǎng)格（行內(nèi)表單）

如果您希望表單元素并排顯示，請(qǐng)使用 .row 和 .col：

實(shí)例

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="請(qǐng)輸入電子郵件地址" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="請(qǐng)輸入密碼" name="pswd">
    </div>
  </div>
</form>

您將在 Bootstrap 網(wǎng)格 章節(jié)中學(xué)到有關(guān)列和行的更多內(nèi)容。

表單控件尺寸

您可用 .form-control-lg 或 .form-control-sm 更改 .form-control 輸入控件的大小：

實(shí)例

<input type="text" class="form-control form-control-lg" placeholder="大型輸入控件">
<input type="text" class="form-control" placeholder="普通輸入控件">
<input type="text" class="form-control form-control-sm" placeholder="小型輸入控件">

禁用和只讀

請(qǐng)使用 disabled 和/或 readonly 屬性禁用輸入字段：

實(shí)例

<input type="text" class="form-control" placeholder="普通輸入控件">
<input type="text" class="form-control" placeholder="被禁用的輸入控件" disabled>
<input type="text" class="form-control" placeholder="只讀的輸入控件" readonly>

純文本輸入

請(qǐng)使用 .form-control-plaintext 類來(lái)設(shè)置沒(méi)有邊框的輸入字段的樣式，但保留適當(dāng)?shù)耐膺吘嗪蛢?nèi)邊距：

實(shí)例

<input type="text" class="form-control-plaintext" placeholder="純文本輸入">
<input type="text" class="form-control" placeholder="普通輸入控件">

拾色器

如需正確設(shè)置 type="color" 的輸入樣式，請(qǐng)使用 .form-control-color 類：

實(shí)例

<input type="color" class="form-control form-control-color" value="#CCCCCC">