Bootstrap 4 - partial summary

grid system

Resource pool

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

Mobile device priority

In order to make the website developed by Bootstrap friendly to mobile devices and ensure proper drawing and touch screen scaling, it is necessary to add a viewport meta tag in the head of the web page

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Width = device width indicates that the width is the width of the device screen

Initial scale = 1 indicates the initial scale

Shrink to fit = no automatically adapts to the width of the phone's screen

Container class

The. container class is used for containers with [fixed width] and supporting responsive layout

The. Container fluid class is used for [100% width] containers that occupy all viewport s

There is a certain internal and external margin

rule

Divide the width of the container into 12 equal parts, put the contents in the column (. col - * - *) and the column in the row (. row)

The first asterisk indicates the screen device type, and the second asterisk is a number from 1 to 12

Offset column offset - * - * the second asterisk indicates the number from 1 to 11

. col - for all devices
. col SM flat panel - screen width equal to or greater than 576px
. col MD - desktop display - screen width equal to or greater than 768px)
. col LG - large desktop display - screen width equal to or greater than 992px)
. col XL - large desktop display - screen width equal to or greater than 1200px)

Image shape

. rounded [rounded image]. Rounded circle [oval image]. Img thumbnail [thumbnail]. Float right [image right alignment]. MX auto (margin: Auto) and. d-block (display:block) [image center alignment]. Img fluid [set responsive image] is equivalent to max width: 100%; height:auto;

Rotation

<div id="" data-ride="carousel" > <ul> <li data-target="" data-slide-to=""></li> </ul>  <div> <div> <img src="" > </div> </div>  <a data-slide="prev"> <span></span> </a> <div>

. carousel [ create a rotation ]. slide [ switch picture transition and animation effect ]
Data ride = "carousel" [trigger rotation]
. carousel indicators [rotation indicator] class = "item active" [indicates rotating pictures]
. carousel inner [add picture to switch]. Carousel item [specify content of each picture]
. carousel control prev [add left button, click to return to the previous sheet]. Carousel control next [add right button, click to switch to the next sheet]
. carousel control prev icon,. Carousel control next Icon (used with. Carousel control prev to set the button on the left)

Use = = Data slide to = = to pass an original slide index to the rotation. Data slide to = "2" will move the slider to a specific index, and the index counts from 0
Data toggle refers to the event type triggered. Generally, an event will affect a label object. If it is other label objects, you need to use data target to refer to the label target of the event. Therefore, data loggle and data target are sometimes used together
extend
The data ride = "carousel" attribute is used to mark that the rotation starts animation playback when the page is loaded; The attribute data slide accepts the keyword prev or next to change the position of the slide relative to the current position.

.carousel-inner img { width: 100%; height: 100%; }

scrollspy

That is, the navigation plug-in is automatically updated, and the corresponding navigation target will be automatically updated according to the position of the scroll bar.

<body data-spy="scroll" data-target=".navbar" >

Data spy = "scroll" listen to the target element
Elements using data spy = "scroll" need to set their CSS position attribute to "relative" to work

The value of the data target attribute is the id or class of the navigation bar, so that you can contact the scrollable area

Gadgets

frame

1) Add remove border
. border [add]. Border [remove four sides]. border-left-0 [overflow left]
2) Colour
Example: border white
3) Fillet
rounded

float

. float right [ right float ]. clearfix [ clear float ]
. float-*-left [float left on different screens]

Center alignment

.mx-auto

width

w-*

height

h-*

progress bar

<div> <div style="width:70%">You can add text</div> </div>

[add style = "height:" to the first large box to change the height of the progress bar]
[add bg - * to the second box to change the color]
. progress bar striped [striped progress bar]
. progress bar animated [animation progress bar]
[mixed color]

Badges

I am a<span>girl
Add the. Badge class and the color class with the specified meaning to the element. The size of the badge changes according to the size of the parent element
. badge pill
. spinner border - [loading effect, text color class setting different colors]. Spinner grow - [flashing loading effect] * * [create loading effect size (sm)]

drop-down menu

<div> <button type="button"dropdown">Dropdown button </button> <divdropdown-item" href="#">one</a> ... ... </div> </div>

Use the button or link to open the drop-down menu;
. dropdown divider [horizontal divider]
. dropdown header [add title to drop-down menu]
Drop down menu pop-up direction setting right/up/bottom/left

<div> <button type="button" data-toggle="dropdown" aria-haspopup="ture" aria-expanded="false"> Dropright </button> <div> <a href="#"></a> ... ... </div> </div>

. dropdown item text [text item in drop-down menu]
Drop down menu in button

<div> <div> <button type="button">anjiu</button> <button type="button" data-toggle="dropdown"> <span></span> </button> <div> <a href="#"></a> ... ... </div> </div> </div>

Navigation

.nav .nav-item .nav-link

<ul> <li> <a href="#"></a> </li> </ul>

. justify content center
. flex colum [vertical]
. NAV tabs [convert navigation to tabs]
. NAV pills [set navigation item to capsule shape]
. NAV justified [navigation flush and equal width display]

Dynamic tab

<ul> <li> <a data-toggle="tab" href="#home "> < / a > Data toggle =" tab "[tab dynamic switching] </li> <li>...</li> </ul>

... ... ... <div> .tab-content <div id="home">...</div> .tab-pane[] <div>...</div> </div>

The tabs are dynamically switchable, and the data toggle = "tab" attribute is added to each link. Add a. Tab pane class on the corresponding content of each option, corresponding to the content of the tab

Element uses the. Tab content class..
If you want a fade in effect, you can add a. Fade class after. Tab pane

navigation bar

<ul> <li> <a href="#"></a> </li> </ul>

Navbar expand SM / MD / XL / LG is removed from the vertical navigation bar
Center align navigation bar
. navbar brand [highlight]. Navbar brand [picture adaptive navigation bar]
Navigation bar use drop-down menu

form

Form control [input textarea checkbox radio select]
grammar

<div> <label for=""> <input type="" id=""> </div>

For has the same value as id
`

<label for="element_id">l`abel Of bound elements id. focusing <div> <label>[Check box] <input type="checkbox" value=""> </label> </div>

. form check inline [check boxes are displayed on the same line]
. radio inline [radio box is displayed on one line]
Layout [stacked form (vertical direction), inline form (horizontal direction)]
Stack forms:

<form> <div> <label for=""></label> <input type="" id=""> </div> </form>

Inline forms simply add. Form inline to the form element
Input box group

<form> <divinput-group-prepend[You can add text information] in front of the input box> <spantext""> </div> </form>

. input group SM input box size

Customer Form
check

<form> <div> <input type="checkbox" id="customCheck" name=""> <label for="custom-Check"></lable> </div>

If you want to customize a check box, you can set

Parent element
Custom selection menu

<select name="" > <option></option> </seletct> [Custom slider control] <input type="range" > [Custom file upload control] <form> <div> <input type="file"customFile"> <label for="customFile"><label> </div> </form>