Bootstrap Chinese Document tutorial
Global style and grid layout-Bootstrap Chinese User Guide
Global style 1. HTML5 Document Type
The CSS attributes and HTML elements used by bootstrap depend on the HTML5 document type declaration. Make sure that each Bootstrap page contains the following code:
<! Doctype HTML>
<HTML>
...
</Html>
2. layout and link Style
Global layout and link style placementScaffolding. LessFile (for more information about the less tutorial ). The following operations are performed by default:
Remove the margin of the body
Set the background color of the body to white.
Use the @ basefone, @ basefontsize, @ baselineheight attribute as the typographical Foundation.
Use @ linkcolor to set the global link color and the underline Of the hover pseudo attribute.
3. Reset the default Style
Starting from Bootstrap 2, the CSS resample is based on normalize.css. The new reset style can be found inReset. Less(Bootstrap simplifies a lot ).
Default grid layout system
The default Bootstrap layout system consists of 12 columns whose total width is 940px.
It can adapt to display devices with various resolutions, such as mobile phones, tablets, and ultra-high-resolution screens.
(PS: see the demo)
<Div class = "row">
<Div class = "span4">... </div>
<Div class = "span8">... </div>
</Div>
The code above creates a two-column grid, with span4 containers accounting for 4/12 of the total width (1/3 ).
1. How to Handle column offset
For example, we want a grid to be right aligned.
<Div class = "row">
<Div class = "span4">... </div>
<Div class = "span4 offset4">... </div>
</Div>
Add an offset4 style name for the second span4 container, which indicates that the distance between the previous container and the four columns is different.
2. process column nesting
(PS: see the demo)
Using static (non-floating) la s in Bootstrap to process Grid Nesting is quite simple.
<Div class = "row">
<Div class = "span12">
Level 1 of Column
<Div class = "row">
<Div class = "span6"> Level 2 </div>
<Div class = "span6"> Level 2 </div>
</Div>
</Div>
</Div>
The. Row container is a layer (. span12) filled with 12 columns. A new. Row container is nested below, and the span6 column layout is inside.
Floating Layout System
The floating layout system is frequently used.Float: left;The layout method. In particular, bootstrap uses percentages to define the width of the grid.
1. Floating grid row container
(PS: see the demo)
<Div class = "Row-fluid">
<Div class = "span4">... </div>
<Div class = "span8">... </div>
</Div>
Flow layout, used by row containers. Row-FluidStyle name, which remains unchanged elsewhere.
. Row-fluid {
Width: 100%;
}
. Row-fluid: before,. Row-fluid: After {
Content :"";
Display: Table;
}
. Row-fluid: After {
Clear: both;
}
2. Percentage of width, not the pixel value
The floating layout system is more adaptable than the static layout system, and can also adapt to screens with different resolutions.
. Row-fluid> [class * = "span"] {
Float: left;
Margin-left: 2.5641%;
}
. Row-fluid> [class * = "span"]: First-child {
Margin-left: 0;
}
3. Handling nested containers in a floating Layout
(PS: see the demo)
Nested la s in floating la s do not need to match the number of grids of the parent container. The width of each row occupies 100% of the width of the parent container.
<Div class = "Row-fluid">
<Div class = "span12">
Level 1 of Column
<Div class = "Row-fluid">
<Div class = "span6"> Level 2 </div>
<Div class = "span6"> Level 2 </div>
</Div>
</Div>
</Div>
Custom raster
Variable
Default Value
Description
@ Gridcolumns
Number of 12 Columns
@ Gridcolumnwidth
60 PX column width
@ Gridgutterwidth
Variable in the less interval of the 20px Column
In Bootstrap, you can customize a set of 940px raster systems with only a few less variables. These variables can be stored inVariables. Less.
How to customize
You need to modify the three variables @ grid * (the three variables in the Table above) and re-compile Bootstrap (less to recompile the new CSS file ). For more information about less compilation, see four ways supported ented to recompile. If columns are added, you mustGrid. LessAdd the corresponding style.
Reserved Adaptability
The adaptive raster system can only be used for the default 940px raster. To maintain the self-adaptability of BootstrapResponsive. LessCustomize the grid style.
Static Layout
<Div class = "Container">
...
</Div>
Floating Layout
Use the container-fluid style name to generate a floating page structure. The following demo shows how to generate a commonly used two-column layout.
<Div class = "container-fluid">
<Div class = "Row-fluid">
<Div class = "span2">
<! -- Sidebar content -->
</Div>
<Div class = "span10">
<! -- Body content -->
</Div>
</Div>
</Div>
The effect is as follows:
Adaptive design
How can the grid layout system adapt to screens with different resolutions?
Css3 is requiredMedia queriesFor more information, see css3 media queries reference guide and css3 media queries details. Media queries allows you to customize different CSS styles for different devices, and easily adapt the layout system to different media devices.
The original Article is rather obscure. minghe borrowed "detailed explanation of css3 media queries" to give a simple example:
<LINK rel = "stylesheet" type = "text/CSS" href = "swordair.css" Media = "screen and (min-width: 400px)">
Adds the media attribute to the style sheet reference.
Screen: one of the 10 media types
And is called a keyword. Other keywords also include not (exclude a device), only (limit a device)
(Min-width: 400px) is the media feature, which is placed in a pair of parentheses. For complete features, see media features.
Screen and (min-width: 400px)When the screen width is greater than or equal to PX, apply this CSS, that is, media is very similarCondition Statement.
Devices supported by bootstrap
Label
Layout width
Column width
Gutter width
Your smartphone is less than PX. No fixed width. No fixed width. Between your smartphone and tablet. equal to less than 767px. No fixed width. Flat is equal to or greater than 768px42px20px. The default value is greater than 980px60px20px. 1200px70px30px requires meta tags
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
Use media queries
Bootstrap does not include these media queries styles by default. You can introduce these styles in the following ways:
Page IntroductionBootstrap-responsive.min.css and respond. Min. js
Add@ Import "responsive. Less"
Modify and compile responsive. Less as an independent file.
Media queries code of Bootstrap
// Landscape phones and down
@ Media (max-width: 480px ){...}
// Landscape phone to portrait Tablet
@ Media (max-width: 767px ){...}
// Portrait tablet to landscape and desktop
@ Media (min-width: 768px) and (max-width: 979px ){...}
// Large Desktop
@ Media (min-width: pixel px ){...}
Learning address:
Http://docs.bootcss.com/bootstrap-2.3.2/docs/getting-started.html
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
