表單非空驗證
- .is-invalid 放在
<inmput>標籤 文本框邊框顏色紅色 圖標是感嘆號 驗證失敗顯示 - .was-validated 放在
<form>標籤 表單裏所有的 input 元素 select元素 邊框顏色綠色 圖標是√ 驗證成功顯示 - 在
<input>標籤裏面 加上 required 實現了驗證 - .invalid-feedback 提示文字使用 驗證前和驗證後都顯示
- .valid-feedback 提示文字使用 驗證後顯示
- .custom-radio 單選按鈕驗證
<div class="form-check custom-radio”> - .custom-checkbox 複選框
<div class="form check custom-checkbox"> - .custom- select 下拉框
<select>標籤裏
圖片佔位符
-
圖片佔位符：生成器 holder.js
什麼是holder.js → 是幫我們自動生成佔位圖片，而且還能定義我們佔位圖片的一些基本樣式 -
爲什麼用：
我們在進行佈局或者排版的時候，需要放置圖片 但是圖片可能還在生成，就用佔位圖片 -
怎麼用？
① 直接使用鏈接
<script src="https://cdn.bootcss.com/holder/2.9.6/holder.js"></script>
或者
<script src="https://cdn.bootcss.com/holder/2.9.6/holder.min.js"></script>② 去下載holder.js（http://www.bootcdn.cn/holder） 點擊官網 下載點擊 Dommload Holder
解壓 —— 複製holder.js 或 holder.min.js 引入項目中③ 在頁面中使用佔位圖片 把
<img>裏的src屬性值 寫爲holder.js /尺寸（寬×高）
<img src=holder.js/1200x300/>④ 控制尺寸（寬度自動 高度不變) 沒有% 百分比用p
<img src="holder.js/100px300"/>
⑤ 佔位圖片按比例縮放（需要寬自動 高跟着變) 參數 auto
<img src="holder.js/100px300?auto=yes"/>
⑥ 控制背景顏色 參數 theme sky gray (默認) vine lava social industrial
<img src="holder.js/100px300?auto=yes&theme=vine">
⑦ 佔位圖片裏提示的文字 參數 text 默認值是佔位圖片的尺寸 \n換行 注意\n兩邊一定要給空格
<img src="holder.js/100px300?text=可愛的卡通圖片"/>
.float-left 左浮動
.float-right 有浮動
.mx-auto 左右邊距自動
圖片響應式
img-fluid（bs4） img-responsive（bs3）→ 相當於max-width:100% height:auto
img-thumbnail 給圖片加上邊框 對圖片的大小進行處理
工具類
bs4
| 超小屏幕 | 小屏幕 | 中等屏幕 | 大屏幕 | 超大屏幕 |
|---|---|---|---|---|
| .col- | .col-sm | .col-md | .col-lg | .col-xl |
| <576px | >=576px | >=768px | >=992px | >=1200px |
隱藏和顯示 display
- .d-block 顯示
- .d-none 隱藏
- .d-inline 隱藏
- .d-none(任何屏幕隱藏) .d-lg-block(大屏及超大屏顯示) .d-block(任何屏幕顯示)
浮動
也分 超小屏幕 小屏幕 中等屏幕 大屏幕 超大屏幕
- .float
- .float-left
- .float-right