Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Typography Bootstrap CSS Introduction

Bootstrap Grid System

This chapter will introduce Bootstrap's grid system (Grid System).

Bootstrap provides a responsive, mobile-first, fluid grid system that automatically divides into a maximum of12columns.

What is Grid (Grid)?

Excerpted from Wikipedia:

In flat design, the grid is a structure (usually two-dimensional) composed of a series of intersecting lines (vertical and horizontal) used to organize content. It is widely used in design layouts and content structures in print design. In web design, it is a method used to quickly create consistent layouts and effectively use HTML and CSS.

In simple terms, the grid in web design is used to organize content, make the website easy to navigate, and reduce the load on the user's end.

What is the Bootstrap Grid System (Grid System)?

The description of the grid system in the official Bootstrap documentation:

Bootstrap includes a responsive, mobile-first, fluid grid system that can appropriately expand to 12 columns. It includes predefined classes for simple layout options, as well as powerful mixed classes for generating more semantic layouts.

Let's understand the above statement. Bootstrap 3 is mobile-first in the sense that Bootstrap code starts from small screen devices (such as mobile devices, tablets) and then extends to components and grids on large screen devices (such as laptops, desktop computers).

Mobile First Strategy

Content

determines what is most important.

Layout

Prioritize designing for smaller widths.
The basic CSS is mobile-first, and media queries are for tablets and desktop computers.

Progressive Enhancement

elements as the screen size increases.

A responsive grid system automatically divides into a maximum of12columns.

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

The working principle of Bootstrap grid system (Grid System)

The grid system creates page layouts through a series of rows and columns that contain content. The following lists how the Bootstrap grid system works:

Rows must be placed within .container within the class, to achieve proper alignment (alignment) and internal padding (padding).
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns can be direct children of rows.
Predefined grid classes, such as .row and .col-xs-4and can be used to quickly create a grid layout. LESS mixed classes can be used for more semantic layouts.
Columns create gaps between column content through internal padding (padding), which is defined by .rows The margin (margin) taken as negative indicates the row offset of the first column and the last column.
The grid system is created by specifying the twelve available columns you want to span. For example, to create three equal columns, use three .col-xs-4.

Media queries

Media queries are very unique 'conditional CSS rules'. They only apply to some CSS based on certain specified conditions. If those conditions are met, the corresponding styles are applied.

Media queries in Bootstrap allow you to move, display, and hide content based on viewport size. The following media queries are used in the LESS file to create key breakpoint thresholds in the Bootstrap grid system.

/*　Extra small devices (mobile phones, less than　768(px)　*/
/*　There are no media queries by default in Bootstrap　*/
/*　Small devices (tablets,768px start)　*/
@media (min-width: @screen-sm-@media (min
/*　Medium devices (desktop computers,992px start)　*/
@media (min-width: @screen-md-@media (min
/*　Large devices (large desktop computers,1200px start)　*/
@media (min-width: @screen-lg-@media (min

We may also include max-widthto limit the impact of CSS to a smaller range of screen sizes.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-@media (min

Media queries have two parts, first a device specification, followed by a size rule. In the above case, the following rules were set:

Let's look at the following line of code:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

For all with min-width: @screen-sm-min devices, if the screen width is less than @screen-sm-maxand some processing will be performed.

Grid options

The following table summarizes how the Bootstrap grid system works across multiple devices:

	Extra small devices mobile phones (<768(px)	Small devices tablets (≥768(px)	Medium devices desktop computers (≥992(px)	Large devices desktop computers (≥12(00px)
Grid behavior	Always horizontal	Starts to collapse, horizontal above the breakpoint	Starts to collapse, horizontal above the breakpoint	Starts to collapse, horizontal above the breakpoint
Maximum container width	None (auto)	750px	970px	1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
Number of columns and	12	12	12	12
Maximum column width	Auto	60px	78px	95px
Gutter width	30px (each side of a column) 15(px)	30px (each side of a column) 15(px)	30px (each side of a column) 15(px)	30px (each side of a column) 15(px)
Nested	Yes	Yes	Yes	Yes
Offset	Yes	Yes	Yes	Yes
Column sorting	Yes	Yes	Yes	Yes

Basic grid structure

The basic structure of Bootstrap grid is as follows:

<div>
　　　<div>
　　　　　　<div></div>
　　　　　　<div></div>　　　　　　
　　　</div>
　　　<div>.../div>
</div>
<div>....

Let's look at a few simple grid examples:

responsive column reset

The following examples include4a grid, but when we browse on small devices, we cannot determine the position of the grid display.

To solve this problem, we can use .clearfix class and Responsive utility toolsto solve, as shown in the following example:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>Bootstrap Example　-　Responsive column reset</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<div class="row">
　　　　　　<div　class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　<p>Let's sit here together and bless our loved ones.</p>
　　　　　　</div>
　　　　　　<div　class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-color:　#dedef8;box-shadow:　
　　　　　　　　　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　<p>I pray for you, may you always be happy with my work and my work is accidental. I have very little courage, I want to go to the laboratory for an internship is a consequence.
　　　　　　　　　</p>
　　　　　　　　　<p>Let's sit down together and bless our friends, bless them.
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="clearfix visible-xs"></div>
　　　　　　<div　class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-color:　#dedef8;
　　　　　　　　　box-shadow:inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　<p>Just a little time can complete an internship.
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div　class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-color:　#dedef8;box-shadow:　
　　　　　　　　　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　<p>Hard work and suffering, full of vitality, so, there are some great longevity models. To these years.
　　　　　　　　　</p>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

Test and see ‹/›

Adjust the window size on the browser to see the changes, or view the effect on your phone.

Offset column

Offset is a useful feature for more professional layouts. They can be used to give columns more space. For example,.col-xs-* classes do not support offset, but they can simply be achieved by using an empty cell.

To use offset on large screen displays, please use .col-md-offset-* classes. These classes will increase the left outer margin (margin) of a column * columns, where * The range is from 1 to 11.

In the following example, we have <div>..</div>, we will use .col-md-offset-3 class to center this div.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>Bootstrap Example　-　Offset column</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hello, world!</h1>
　　　<div class="row">
　　　　　　<div　class="col-md-6　col-md-offset-3"　
　　　　　　　　　style="background-color:　#dedef8;box-shadow:　
　　　　　　　　　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing　
　　　　　　　　　　　　elit.
　　　　　　　　　</p>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

nested column

To nest the default grid in the content, please add a new .row, and in an existing .col-md-* columns. Add a group .col-md-* columns. The nested row should contain a group of columns, the number of which cannot exceed12(Actually, there is no requirement that you must fill up12columns).

In the following example, the layout has two columns, the second column is divided into two rows and four boxes.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>Bootstrap Example　-　Nested column</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hello, world!</h1>
　　　<div class="row">
　　　　　　<div　class="col-md-3" style="background-color:　#dedef8;box-shadow:　
　　　　　　　　　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　<h4>First column</h4>
　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
　　　　　　</div>
　　　　　　<div　class="col-md-9" style="background-color:　#dedef8;box-shadow:　
　　　　　　　　　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　<h4>Second column　-　Divided into four boxes</h4>
　　　　　　　　　<div class="row">
　　　　　　　　　　　　<div　class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　　　　　　　<p>Consectetur art party Tonx culpa semiotics. Pinterest　
　　　　　　　　　　　　　　　　　　assumenda minim organic quis.
　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　　　　　<div　class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　　　　　　　<p>sed do eiusmod tempor incididunt ut labore et dolore magna　
　　　　　　　　　　　　　　　　　　aliqua. Ut enim ad minim veniam, quis nostrud exercitation　
　　　　　　　　　　　　　　　　　　ullamco laboris nisi ut aliquip ex ea commodo consequat.
　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　　</div>
　　　　　　　　　<div class="row">
　　　　　　　　　　　　<div　class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　　　　　　　<p>quis nostrud exercitation ullamco laboris nisi ut　
　　　　　　　　　　　　　　　　　　aliquip ex ea commodo consequat.
　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>　　　
　　　　　　　　　　　　<div　class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,　
　　　　　　　　　　　　　　　　　　sed do eiusmod tempor incididunt ut labore et dolore magna　
　　　　　　　　　　　　　　　　　　aliqua. Ut enim ad minim.</p>
　　　　　　　　　　　　</div>
　　　　　　　　　</div>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

Column sorting

Another perfect feature of the Bootstrap grid system is that you can easily write columns in one order and then display them in another order.

You can easily change the order of columns with .col-md-push-* and .col-md-pull-* the built-in grid column order of the class, where * The range is from 1 to 11.

In the following example, we have a two-column layout, where the left column is very narrow and serves as a sidebar. We will use .col-md-push-* and .col-md-pull-* Use the class to swap the order of these two columns.

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Bootstrap Example　-　Column sorting</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hello, world!</h1>
　　　<div class="row">
　　　　　　<p>Sorted before</p>
　　　　　　<div　class="col-md-4" style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　I am on the left
　　　　　　</div>
　　　　　　<div　class="col-md-8" style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　I am on the right
　　　　　　</div>
　　　</div><br>
　　　<div class="row">
　　　　　　<p>Sorted after</p>
　　　　　　<div　class="col-md-4　col-md-push-8"　
　　　　　　　　　style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444,　
　　　　　　　　　inset　-1px　1px　1px　#444>
　　　　　　　　　I am on the left
　　　　　　</div>
　　　　　　<div　class="col-md-8　col-md-pull-4"　
　　　　　　　　　style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444,　
　　　　　　　　　inset　-1px　1px　1px　#444>
　　　　　　　　　I am on the right
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

Bootstrap Typography Bootstrap CSS Introduction