Global CSS styles
Basic HTML elements can be set by the class style and enhanced effect; as well as advanced grid system.
Use H5 are used in combination with the Bootstrap
Bootstrap major changes:
Bootstrap 2, a key part of the framework for some of the increase in mobile device-friendly style.
In Bootstrap 3, rewrite of the entire frame, the movement pattern directly integrated into the core frame, so that the style of the mobile device integrated into every corner of the frame.
Bootstrap is now the priority of the mobile device.
Note on your mobile device:
In order to ensure proper drawing and zoom touchscreen , you require the <head> add viewport metadata tags .
<meta name="viewport" content="width=device-width, initial-scale=1">
On a mobile device browser, by setting the meta attribute viewport (the viewport) is a user-scalable = no disable scaled (Zooming) function.
So after disabling the zoom function, the user can scroll the screen , you can make your site look more like a native application feeling
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Grid System
Bootstrap provides a responsive, mobile device priority streaming grid system, with the increase of the screen or viewport (the viewport) size, the system will automatically be divided into a maximum of 12. It contains predefined classes easy to use, as well as more powerful semantic mixin for generating layout,
Definition: a combination of a series of rows (row) and column (column) to create a page layout, you can put content to create a good layout.
working principle:
1 "row (Row)" must be included in the .container (fixed width) or .container-fluid (100% width) in order to impart suitable arrangement for (aligment) and the complement (padding). 2 by "rows (Row)" to create a set "column (column)" in the horizontal direction. 3 your content should be placed in the "column (column)" inside, and only "column (column)" as the row (Row) "direct child element. 4 Similarly .row .col-xs-4 and this pre- class definition can be used to quickly create a grid layout mixin .Bootstrap defined in the source can also be used to create semantic layout. 5 through to "column (column)" padding property set, thereby creating a column between the column and interval (gutter). by providing such a negative margin to offset .row padding element as set .container element, it indirectly "row (row)" included in the "column (column)" canceled out padding. . 6 negative margin is the following exemplary reasons why outwardly projecting content in the raster column aligned. 7 grid system to represent its column is spanned by the specified value range from 1 to 12. e.g. , three columns of equal width may use three .col-xs-4 to create. 8 , if a "row (row)" included in the "column (column)" is greater than 12, the extra "column (column)" where the element as a whole will be another Row arrangement. 9Class is used for raster width greater than or equal to the screen size of the device cut-off point, and covers the grid type for small-screen devices. Thus, any application .col-md- * based on a grid with elements applied to the screen width is greater than or equal to the size of the cut-off point of the device, and cover the grid-based devices for small screens. Therefore, the elements used in any .col-lg- * does not exist, but also affect a large screen device.
note:
Bootstrap need for the page content and wrapped in a grid system .container container.
Providing two useful for this class, property and the like due to padding, the two containers can be nested with each other
and a fixed width container class for supporting the container in response to the layout. < Div class = "Container" > ... </div> container-fluid type for 100% width, occupy the entire viewport (the viewport) of the container. <div class="container-fluid"> ... </div>
Bootstrap is a priority of mobile devices, will start with a small screen began to expand device (such as mobile phones, tablet) to large screen devices (laptops, desktop computers).
It is represented by different parameters: two common formats such as mobile terminal (col- xs- *) and the computer terminal (col-md- *)
Wherein the asterisk represents the number 1 to 12, the numbers, 1 denotes a grid, one row includes 12
Media Inquiries: css rule conditional, what kind of body what to wear