<>BootStrap brief introduction

concept :

Course objectives :

* Reactive layout technology
* understand BootStrap Front end frame
<> Two .BootStrap

​ Bootstrap The most popular front-end component library in the world , For developing responsive layouts , Mobile device first WEB project .

​ Bootstrap Is a HTML,CSS and JS Open Source Toolkit developed , From Twitter, utilize Bootstrap Provided Sass
Variables and mixing (mixins), Responsive grid system , Scalable prefabricated components and powerful jQuery plug-in unit , Enables you to quickly develop product prototypes or build the entire app.

[ Failed to save the image in the external chain , Source station may have anti-theft chain mechanism , It is recommended to save the pictures and upload them directly (img-X2TH0vnA-1589444900650)(E:\ Political access \ Class notes \S2\bootstrap\assets\image-20200514104947017.png)]

<>2.1 Import file

bootStrap.min.css

jquery.min.js

bootStrap.min.js

<>2.2 grid system

[ Failed to save the image in the external chain , Source station may have anti-theft chain mechanism , It is recommended to save the pictures and upload them directly (img-mB2xHvew-1589444900655)(E:\ Political access \ Class notes \S2\bootstrap\assets\image-20200514105715506.png)]

Bootstrap Provides a set of responsive , Mobile device first streaming grid system , With screen or viewport (viewport) Increase in size , The system will automatically divide it into the most 12 column .

We can also meet our own needs , Define number of columns :

[ Failed to save the image in the external chain , Source station may have anti-theft chain mechanism , It is recommended to save the pictures and upload them directly (img-pMmnc2G1-1589444900658)(E:\ Political access \ Class notes \S2\bootstrap\assets\image-20200514105759039.png)]

Bootstrap 4 Our grid system is responsive , Columns are automatically rearranged based on screen size .

Bootstrap 4 The grid system has the following 5 Classes (class):

* .col- For all devices
* col-xs Small equipment
* .col-sm Flat - 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)
<>2.2.1 Grid system rules

Bootstrap4 Grid system rules :

*
Each row of the grid needs to be placed in the .container ( Fixed width ) or .container-fluid ( Full screen width )
Class , In this way, some outer and inner margins can be set automatically .

*
Use row styles row To create a horizontal rank .

*
Content needs to be placed in columns , And only columns can be direct children of rows .

*
Predefined classes such as .row and .col-sm-4 Can be used for quick grid layout .col:column Column word ;sm: Flat ;-4:4 Lattice

col-sm-n,n(1–12) Set column .

*
Columns create gaps between column contents by filling . This gap is through .rows Negative margin on class sets the offset of the first and last columns .

*
Grid columns are specified by spanning 12 Columns to create . for example , Set three equal columns , Need to use three .col-sm-4 To set .

*
Bootstrap 3 and Bootstrap 4 The biggest difference is Bootstrap 4 Now use flexbox( Elastic box ) Not floating .
Flexbox One of the big advantages of , Grid columns that do not have a specified width are automatically set to equal width and height columns .

Column combination

​ row/col-md-4 col-md-8 Etc

Column offset

​ col-md-offset-4, principle margin-left

Column nesting

<div class=‘row’>div Code nesting code </div>

Column sort

col-md-push-8 Push to the right

<>2.2.2 CSS Global style

One of the big advantages of , Grid columns that do not have a specified width are automatically set to equal width and height columns .

Column combination

​ row/col-md-4 col-md-8 Etc

Column offset

​ col-md-offset-4, principle margin-left

Column nesting

<div class=‘row’>div Code nesting code </div>

Column sort

col-md-push-8 Push to the right

<>2.2.2 CSS Global style


yes CSS Most basic , The simplest combination of grammar , Through these basic and core layout grammars , It doesn't take much time to create a more beautiful page . And why is it called global style , Mainly because it is relatively free to use , Can be used anywhere in the page , It can also be placed in Bootstrap Used in components

Technology
©2019-2020 Toolsou All rights reserved,
html Writing about cherry trees , Writing about cherry trees It's unexpected Python Cherry tree (turtle The gorgeous style of Library ) Browser kernel ( understand )HashMap Explain in detail java Four functional interfaces ( a key , simple )os Simple use of module Some East 14 Pay change 16 salary , Sincerity or routine ?