[Bootstrap] global style (1): bootstrap global style
The page must be set to html5 Document Type
<! DOCTYPE html>
<Html lang = "zh-CN">
...
</Html>
Adapt to mobile devices
<Meta name = "viewport" content = "width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable = no "/>
Typographical/Link
Scaffolding. less:
Body {background-color: # fff/@ font-family-base/@ font-size-base/@ line-height-base}
A (@ link-color/@ link-hover-color)
Normalize.css
Raster System
Container:
. Container (fixed-width response type)/. container-fluid (percentage adaptive)
Cannot be nested with each other (reason for padding)
Row:
. Row
Must be included in container. container or. container-fluid
Only columns can be created in the row)
Column:
. Col -*-*
Content in Column
The interval between columns is set by the padding attribute in. col -*.
The first is xs, sm, md, and lg, and the second is 1-12.
The number of columns is greater than 12, and the redundant columns start with another line (essentially a line break caused by floating)
Media Query
Ultra-small screen (less than 768)
No media query code -- move first principle
Container width. container is automatic
Small screen (greater than 768)
@ Media (min-width: @ screen-sm-width: 768 ){}
Container width. The container is 720
Medium screen (greater than 992)
@ Media (min-width: @ screen-md-width: 992 ){}
Container width. The container is 970
Large Screen (greater than 1200)
@ Media (min-width: @ screen-lg-width: 1200 ){}
Container width. The container is 1170
Large Screen media query covers small screen devices
Instance
1. Display corresponding classes on the screen of the corresponding width based on media queries (stacked/horizontally arranged)
<Div class = "row">
<Div class = "col-md-1">. col-md-1 </div>
<Div class = "col-md-1">. col-md-1 </div>
<Div class = "col-md-1">. col-md-1 </div>
<Div class = "col-md-1">. col-md-1 </div>
<Div class = "col-md-1">. col-md-1 </div>
<Div class = "col-md-1">. col-md-1 </div>
<Div class = "col-md-1">. col-md-1 </div>
<Div class = "col-md-1">. col-md-1 </div>
<Div class = "col-md-1">. col-md-1 </div>
<Div class = "col-md-1">. col-md-1 </div>
<Div class = "col-md-1">. col-md-1 </div>
<Div class = "col-md-1">. col-md-1 </div>
</Div>
<Div class = "row">
<Div class = "col-md-8">. col-md-8 </div>
<Div class = "col-md-4">. col-md-4 </div>
</Div>
<Div class = "row">
<Div class = "col-md-4">. col-md-4 </div>
<Div class = "col-md-4">. col-md-4 </div>
<Div class = "col-md-4">. col-md-4 </div>
</Div>
<Div class = "row">
<Div class = "col-md-6">. col-md-6 </div>
<Div class = "col-md-6">. col-md-6 </div>
</Div>
2. The number of Cols is greater than 12, and the element containing extra columns starts from another row.
<Div class = "row">
<Div class = "col-xs-9">. col-xs-9 </div>
<Div class = "col-xs-4">. col-xs-4 <br> Since 9 + 4 = 13 & gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. </div>
<Div class = "col-xs-6">. col-xs-6 <br> Subsequent columns continue along the new line. </div>
</Div>
3. col-**-offset-* column offset (Set offset through margin-left)
4. col-**-push-* (change location through left value) and col-**-pull-* (change location through right value) change column sorting
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
