Skip to main content

[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:主要影響 paddingmargin
  • .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;  }}