跳至主要内容

[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;
}
}