Global style and component of BootStrap_02, Global of bootstrap_02

Global style and component of BootStrap_02, Global of bootstrap_02

1. Four screen sizes specified by BootStrap:
① Super-large PC screen -- lg (large): w> = pixel PX;
② Medium PC screen -- md (medium): Running PX> w> = 992px;
③ Pad screen -- sm (small): 992px> w> = 768px;
④ Phone screen -- xs (extra small): 768px> w;
2. Two containers in BootStrap:
① Fixed width container:. container -- 1170px (lg), 970px (md), 750px (sm), 100% (xs );
② Widening container:. container -- 100%;
③ There are two types of containers: before AND: after, which can clear the impact of the sub-element margin and float;
3. global CSS style-table:
. Table -- basic table;
. Table-bordered -- a table with a border;
. Table-striped -- the table with the color of the row;
. Table-hover -- a table with the mouse hover effect;
. Table-responsive -- a responsive table, which must be used on the parent element div of the table;
4. global CSS style-grid layout system:
① The outermost layer must be a container class:. container or. container-fluid;
② Place rows in the container:. row;
③ Put columns in the row:. col;
④ Use different columns for different screens:
. Col-lg-*: Applicable to ultra-large PC screens;
. Col-md-*: Applicable to medium PC screens;
. Col-sm-*: Applicable to Pad screens;
. Col-xs-*: Applicable to Phone screens;
A div can declare the column width of multiple screens at the same time:
<Div class = "col-lg-* col-md-* col-sm-* col-xs-*">
⑤ Each row is divided into 12 parts, and each column needs to specify the number of parts it occupies:
<Div class = "col-lg-2 col-md-6 col-sm-8">
6. You can specify the offset to the right for each column: to achieve the right dislocation effect:
<Div class = ". col-lg/md/sm/xs-offset-1/2/3/4/...">
7. Different columns have different applicability on different screens:
. Col-lg-*: Applicable only to LG screens;
. Col-md-*: Applicable to MD/LG screens;
. Col-sm-*: Applicable to SM/MD/LG screens;
. Col-xs-*: Applicable to XS/SM/MD/LG screens;
The same rule applies to column offset, which is valid for the current screen and larger screen;
You can specify a column to hide on the screen at a specific size:
. Hidden-lg/md/sm/xs;
Hiding is only valid for the specified screen;
The ⑨ raster system can be nested:
<Div class = "container">
<Div class = "row">
<Div class = "col-xs-6">
<Div class = "row">
<Div class = "col-xs-6"> </div>
</Div>
</Div>
</Div>
</Div>
5. global CSS style-form:
① HTML5 standard recommendations for forms:
The type must be specified for the button;
The input component must have a corresponding label -- for accessibility:
<Label for = "xx"> example </label>
<Input id = "xx">
<Label>
<Input type = "radio/checkbox"> example
</Label>
② The default form provided by BootStrap:
<Form>
<Div class = "form-group">
<Label> </label>
<Input class = "form-control">
<Span class = "help-block"> </span>
</Div>
</Form>
③ In-row forms provided by BootStrap:
<Form class = "form-inline">
<Div class = "form-group">
<Label class = "sr-only"> </label>
<Input class = "form-control">
</Div>
</Form>
④ The horizontal form provided by BootStrap:
<Form class = "form-horizontal">
<Div class = "form-group">
<Div class = "col-*">
<Label class = "control-label"> </label>
</Div>
<Div class = "col-*">
<Label class = "form-control"> </label>
</Div>
</Div>
</Form>
6. BootStrap component-Icon Font:
① The font of the icon is a font, which can be scaled infinitely, and the text color, background color, and shadow can be modified. The displayed content is a graphical icon;
② The icon font is used as the server font in Web projects -- when the client accesses the page, the necessary icon font is instantly downloaded from the server:
@ Font-face {
Font-family: "Glyphicons Halflings ";
Src: url ("../fonts/glyphicons-halflings-regular.eot ");
}
. Glyphicon {
Position: relative;
Top: 1px;
Display: inline-block;
Font-family: "Glyphicons Halflings ";
}
③ Usage:
<Span class = "glyphicon-*"> </span>
* Span cannot contain any text or subtags;