<>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,
keras Data generator -- Data enhancement Output string at specified position --PTAajax get Request Chinese parameter garbled solution TypeScript Data types in is enough shiro-oauth Enable third party authentication login mybatis-config.xml Set default value configuration python Dynamic programming for single source shortest path vue vue-element-admin Summary of the project STM32 Infrared tracking car ( Essence )2020 year 7 month 30 day Wechat applet Use of modules