Grid System
description:
Grid system (grid System) is a system layout of a html page for creating a bootstrap build
the system to 12 aliquot vessel structure provided by the class name (interpreted as each row 12)
the width of the container designated (e.g., 3 + 3 + 3 + 3) to the building pages
Description:
(1) in response to the layout of formula (a code can have different effects in different loading pages)
(2) provides a number of predefined classes, can be obtained quickly by the class name css style
Content (common):
(1) by using the class name .container to define a grid container
(2) row: a container defining a grid line by using the class name .row
(3) col- [screenStyle] - [percent]: by composite class name, to define a cell size of grid
- a.screenStyle: refers to the device type (type of device style to take effect)
- (I) col-xs -...: ultra-small devices (less than the width of the device 768.) above equipment and
- (II) col-sm -...: small devices (width greater than 768 but less than 992 pixels) or more devices and equipment
- (III) col-md -...: Medium equipment (pixel width greater than 992 but less than 1200px) device and more
- (IV) col-lg -...: large-scale equipment (width greater than 1200px)
- b.percent: refers to the number of columns in the grid accounted for one line, optional values 1-12
- Example: class = "col-xs-4 col-lg-8" Description This accounts for 8 column length in large equipment, large-scale equipment accounts for a non-4
(4) col- [screenStyle] -offset- [percent]: initial length, needs and (3) with the use of, for example: class = "col-md-3 col-md-offset-4"
Added: Grid container can give the effect of a page element horizontally centered (by setting the margin and padding) default
Examples of exercises
Claim
Construction of a grid system, line 2, the first column representing 8, 4 representing a second column (8 + 4 = 12), a first column filled with blue, pink filling the second column.
Look at the effect
Core code
<div class="container"> <div class="row"> <Div class = "col-md-8 skyblue"> left grid </ div> <Div class = "col-md-4 pink"> right grid </ div> </div> </div>
The complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<Title> Grid System </ title>
<! - introduced bootstrap.min.css ->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<! - the introduction of jQuery ->
<script src="js/jQuery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<! - introduced bootstrap.min.js ->
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.skyblue{ background-color: skyblue;}
.pink{ background-color: pink;}
</style>
</head>
<!--
bootstrap grid
Description: Grid systems (grid System) is a system for layout html page created to build the bootstrap
The system was used to aliquot vessel 12 structure (12) provided by the class name
To quickly build the page specified by the width of the container (e.g., 3 + 3 + 3 + 3)
Description:
(1) in response to the layout of formula (a code can have different effects in different loading pages)
(2) provides a number of predefined classes, you can quickly get through these css style class name
Content (common):
(1) by using the class name .container to define a grid container
(2) row: a container defining a grid line by using the class name .row
(3) col- [screenStyle] - [percent]: the class name by using the composite to define a cell size of grid
a.screenStyle: refers to the device type (type of device style to take effect)
(I) col-xs -...: ultra-small devices (less than the width of the device 768.) above equipment and
(II) col-sm -...: small devices (width greater than 768 but less than 992 pixels) or more devices and equipment
(III) col-md -...: Medium equipment (pixel width greater than 992 but less than 1200px) device and more
(IV) col-lg -...: large-scale equipment (width greater than 1200px)
b.percent: refers to the number of columns in the grid accounted for one line, optional values 1-12
(4) col- [screenStyle] -offset- [percent]: initial length, needs and (3) with the use of, for example: class = "col-md-3 col-md-offset-4"
supplement:
Grid container can effect a given page elements horizontally centered (by setting the margin and padding) default
If not necessary, do not nested grids page
Grid sub-page is not cut, but the segmentation of its parent element (such as container)
-->
<body>
<div class="container">
<div class="row">
<Div class = "col-md-8 skyblue"> left grid </ div>
<Div class = "col-md-4 pink"> right grid </ div>
</div>
</div>
</body>
</html>