跳至主要内容

[BS4] Bootstrap 4 Form

關鍵字：bs-form-default, bs-form-inline, bs-form-static, bs-form-custom

Bootstrap4 Form @ CodePen

[TOC]

留意事項（HotFix）​

Read Only: 僅供閱讀的欄位​

keywords: .form-control-plaintext​

當使用 .form-control-plaintext 這個 class 想要讓該 input 欄位變成 readonly 時，記得加上 .w-100 才能修正寬度問題。

Radio, Select: 解決 radio button 和 label 沒有垂直置中的現象​

.form-check-input:only-child {
  position: absolute;
}

input-group 圓角問題​

在 .from-control 加上 rounded-right 這個 class：

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupPrepend">@</span>
  </div>
  <input
    type="text"
    class="form-control rounded-right"
    id="validationCustomUsername"
    placeholder="Username"
    aria-describedby="inputGroupPrepend"
    required
  />
  <div class="invalid-feedback">Please choose a username.</div>
</div>

Missing border radius on input group with validation feedback @ Github Issues

Form Validation 表單驗證​

覆蓋 Bootstrap .is-valid 的預設效果：

Form Validation @ PJCHENder Codepen

如果使用者輸入 valid content，則隱藏 feed-back​

/**
 * Bootstrap 在預測的情況下即使驗證通過仍會顯示提示訊息
 * 因此如果希望驗證通過就不要顯示提示訊息，需要補上這段
**/
.was-validated .form-control:valid ~ .invalid-feedback {
  display: none;
}

// :valid 的資料不用變色
.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .custom-select:valid,
.custom-select.is-valid {
  border-color: rgba(0, 0, 0, 0.15);
}
/**
 * 1. 當使用者送出表單時，顯示未驗證的欄位
 * 2. 讓表單 focus 到第一個為驗證的欄位
 * 3. 避免 Number 可以透過 Wheel 來改變
 **/
document.addEventListener('DOMContentLoaded', function () {
  // Form Validation
  var form = document.querySelector('form');
  form.addEventListener(
    'submit',
    function (event) {
      if (form.checkValidity() == false) {
        event.preventDefault();
        event.stopPropagation();
        form.classList.add('was-validated');
        $('.was-validated .form-control:invalid').filter(':first').focus();
      }
    },
    false,
  );

  // Prevent input number scrolling
  $('input[type=number]').on('mousewheel', function (e) {
    $(this).blur();
  });
});

瞭解 Form​

套用在外層 <div> 上​
  • .form-group, .form-check
  • .disabled
  • .form-check-inline
套用在 <input> 上​
  • .form-control, ,form-control-file, from-check-input
    • 尺寸：.form-control-lg, .form-control-sm
    • 唯讀：.form-control-plaintext（搭配 readonly 使用）
套用在 <label> 上​
  • .col-form-label, .col-form-label-lg, .col-form-label-sm
    • 當希望 label 的文字和 form-controls 的文字對齊時使用。
    • CSS：主要影響 padding 和 margin
  • .form-check-label

Input File 改變語言​

深入 Bootstrap4​

檔案位置：./bootstrap4/scss/_forms.scss

.form-group {
  margin-bottom: $form-group-margin-bottom; // 1rem
}
// ./bootstrap4/scss/_forms.scss

.form-control {
  display: block;
  width: 100%;
  padding: $input-btn-padding-y $input-btn-padding-x;
  font-size: $font-size-base;
  line-height: $input-btn-line-height;
  color: $input-color;
  background-color: $input-bg;
  background-image: none;
  background-clip: padding-box;
  border: $input-btn-border-width solid $input-border-color;
  border-radius: $input-border-radius;

  @include box-shadow($input-box-shadow);
  @include transition($input-transition);

  // Customize the `:focus` state to imitate native WebKit styles.
  @include form-control-focus();

  // Placeholder
  &::placeholder {
    color: $input-placeholder-color;
    opacity: 1;
  }

  // Disabled and read-only inputs
  &:disabled,
  &[readonly] {
    background-color: $input-disabled-bg;
    opacity: 1;
  }
}