bootstrap=== Auxiliary Program Framework

Bootstrap is a powerful supporting program framework, simple, intuitive, powerful front-end framework to make the web more rapid development, simple Simple grid system

Bootstrap provides a responsive, mobile-first streaming raster system that is automatically divided into up to 12 columns as the screen or viewport (viewport) size increases. It contains pre-defined classes that are easy to use, and powerful mixin for generating more semantic layouts. Introduction

A raster system is used to create a page layout with a series of rows and columns (column), and your content can be placed in these created layouts. Here's how the Bootstrap raster system works: The row must be included in the. container (fixed width) or. Container-fluid (100% width), In order to give it an appropriate arrangement (aligment) and an inner complement (padding). Create a set of columns (column) horizontally from row. Your content should be placed in column, and only columns (column) can be a direct child element of row. predefined classes like. Row and. Col-xs-4 can be used to quickly create a raster layout. The mixin defined in the Bootstrap source code can also be used to create a semantically formatted layout. Create the interval between columns (gutter) by setting the Padding property for columns (column). Offsetting the padding that is set for the. container element by setting a negative margin for the. Row element also offsets the padding from the columns (column) contained in row. A negative margin is the reason why the following example is out of focus. The contents of the grid column are lined up. A column in a raster system represents a range that is spanned by specifying a value of 1 to 12. For example, three equal-width columns can be created using three. Col-xs-4. If a row contains columns greater than 12, the elements of the extra column (columns) are arranged as a whole on a different line. The raster class is intended for devices with a screen width greater than or equal to the cutoff point size, and the raster class is overridden for small-screen devices. Therefore, any. col-md-* raster classes applied to the element are applied to devices with a screen width greater than or equal to the cutoff point size, and the raster class is overridden for small-screen devices. Therefore, applying any. col-lg-* on the element does not exist and also affects large-screen devices.

By studying the following examples, you can apply these principles to your code. Media Enquiry

In a raster system, we use the following media query in the less file to create a critical threshold for the cutoff point. Copy

/* Ultra small screen (mobile phone, less than 768px) *///
* There is no media query related code, because this is the default in Bootstrap (remember that Bootstrap is a mobile device first.) */

/* small screen (flat, greater than or equal to 768px) *
/@media (min-width: @screen-sm-min) {...}

/* Medium screen (desktop monitor, greater than or equal to 992px) *
/@media (min-width: @screen-md-min) {...}

/* Large screen (large desktop monitor, greater than or equal to 1200px) *
/@media (min-width: @screen-lg-min) {...}

We also occasionally include max-width in the media query code to limit the effect of CSS to a smaller screen size.

Grid Parameters

The following table provides a detailed view of how the Bootstrap grid system works on a variety of screen devices.

	Ultra Small Screen Mobile (<768px)	small screen flat panel (≥768px)	medium screen desktop display (≥992px)	Large screen large desktop display (≥120 0px)
Grid system behavior	Always arranged horizontally	The start is stacked together and will be arranged horizontally when they are greater than these thresholds C
. Container Maximum Width	None (Auto)	750px	970px	1170px
Class Prefix	. col-xs-	. col-sm-	. col-md-	. col-lg-
Number of columns (column)	12
Maximum column width	Automatic	~62px	~81px	~97px
Groove (Gutter) width	30px (15px per column or so)
can be nested	Is
Offset (offsets)	Is
Column sort	Is

Example: mobile devices and desktop screens

If you don't want all the columns on the small screen device to stack together. Then use classes defined for ultra-small screen and medium-screen devices, namely. col-xs-* and. col-md-*. Take a look at the examples below to see how these work: col-xs-12. col-md-8. col-xs-6. col-xs-6. col-md-4. col-xs-6. col-md-4. col-xs-6. Col-md-4. col-xs-6. col-xs-6

Column Offset

Use the. col-md-offset-* class to offset the column to the right. These classes actually add the left margin (margin) to the current element by using the * selector. For example, the. Col-md-offset-4 class offsets the. col-md-4 element to the right by the width of 4 columns (column): Col-md-4. col-md-4. col-md-offset-4. Col-md-offset-3. col-md-3. col-md-offset-3. col-md-6. col-md-offset-3

Status Class

These status classes allow you to set the color for a row or cell.

Class	Description
. Active	The color that is set when the mouse hovers over a row or cell
. Success	Identify a successful or positive action
. info	Identify common informational or action
. Warning	Identify warnings or require user attention
. Danger	Identification of dangerous or potential adverse effects of action

#	Column Heading	Column Heading	Column Heading
1	Column Content	Column Content	Column Content
2	Column Content	Column Content	Column Content
3	Column Content	Column Content	Column Content
4	Column Content	Column Content	Column Content
5	Column Content	Column Content	Column Content
6	Column Content	Column Content	Column Content
7	Column Content	Column Content	Column Content
8	Column Content	Column Content	Column Content
9