Bootstrap4 — 表单非空验证、图片占位符、图片响应式、工具类

表单非空验证

• .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