PJCHENder 未整理筆記

[BS] Bootstrap4 Form

2017-09-25

[BS] Bootstrap4 Form

@(CSS)[Bootstrap]

關鍵字: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 沒有垂直置中的現象

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

input-group 圓角問題

.from-control 加上 rounded-right 這個 class:

1
2
3
4
5
6
7
8
9
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
* 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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/**
* 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

1
2
3
.form-group {
margin-bottom: $form-group-margin-bottom; // 1rem
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// ./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;
}
}

掃描二維條碼,分享此文章