Bootstrap4 common layout
Form is not empty validation
- .is-invalid on
<inmput>the label text box border color red exclamation mark icon is displayed validation fails - .was-validated on the
<form>label in the form of input elements select all elements border color green icon is displayed successfully verified √ <input>Add required in the label to achieve verification- .invalid-feedback prompt text is displayed before and after verification
- .valid-feedback prompt text to be displayed after verification
- .custom-radio radio button verification
<div class="form-check custom-radio”> - .custom-checkbox checkbox
<div class="form check custom-checkbox"> - .custom- select the drop-down box
<select>tag
Picture placeholder
-
Image placeholder:
what is holder.js, the generator holder.js → is to help us automatically generate placeholder pictures, and also define some basic styles of our placeholder pictures -
Why use it: when
we are doing layout or typesetting, we need to place pictures but the pictures may still be generated, we use placeholder pictures -
how to use?
① Use the link directly
<script src="https://cdn.bootcss.com/holder/2.9.6/holder.js"></script>
or
<script src="https://cdn.bootcss.com/holder/2.9.6/holder.min.js"></script>② Go to download holder.js (http://www.bootcdn.cn/holder) Click on the official website to download, click on Dommload Holder to
decompress-copy holder.js or holder.min.js into the project③ Use placeholder images in the page to
<img>write the src attribute value in holder.js/size (width×height)
<img src=holder.js/1200x300/>④ Control the size (width and auto height remain unchanged) No%, use p as a percentage.
<img src="holder.js/100px300"/>
⑤ The placeholder image is scaled proportionally (need to change the width and height automatically) Parameter auto
<img src="holder.js/100px300?auto=yes"/>
⑥ Control the background color parameter theme sky gray (default) vine lava social industrial
<img src="holder.js/100px300?auto=yes&theme=vine">
⑦ Placeholder The default value of the text parameter text prompted in the picture is the size of the placeholder picture\nWrap attention\nBe sure to give spaces on both sides
<img src="holder.js/100px300?text=可爱的卡通图片"/>
.float-left float left. float
-right float. mx
-auto left and right margins automatically
Picture responsive
img-fluid (bs4) img-responsive (bs3) → equivalent to max-width:100% height:auto
img-thumbnail Add a border to the picture to process the size of the picture
Tools
bs4
| Ultra-small screen | Small screen | Medium screen | big screen | Large screen |
|---|---|---|---|---|
| .col- | .col-sm | .col-md | .col-lg | .col-xl |
| <576px | >=576px | >=768px | >=992px | >=1200px |
Hide and show display
- .d-block display
- .d-none hide
- .d-inline hide
- .d-none (hide any screen) .d-lg-block (display on large screens and super large screens) .d-block (display on any screen)
float
Also divided into ultra-small screens, small screens, medium screens, large screens, large screens
- .float
- .float-left
- .float-right