Recently I discovered a good thing called Bootstrap, the most popular responsive CSS framework nowadays, which prioritizes mobile devices and can quickly adapt to different devices. Use it to write responsive pages quickly and conveniently, and blocks browser differences. With Bootstrap, you can no longer imagine the tragic life of writing web pages in original CSS in the past.
After learning, I found that I also had the ability to develop a high-end page in minutes. This article will introduce Bootstrap to you and lead you to implement a responsive page together.
Figure 1. Mobile priority, adapted to different devices
1. Installation
The easiest way is to directly reference Bootstrap provided by the Content Distribution Network (CDN) in the web page. When a user accesses the web page, he will obtain resources from the nearby server.
Listing 1. Get Bootstrap from the content distribution network
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="bootstrap/3.3.4/css/bootstrap.min.css"><!-- Optional theme --><link rel="stylesheet" href="bootstrap/3.3.4/css/bootstrap-theme.min.css"><!-- Latest compiled and minified JavaScript --><script src="bootstrap/3.3.4/js/bootstrap.min.js"></script>
You can also choose to download Bootstrap to deploy locally. Users can download the complete Bootstrap on the page, or they can select the functions used in the project according to the project needs on the custom page, compile and download a simplified version of Bootstrap. After the download is completed, a zip file is obtained. The decompressed directory structure is as follows:
Listing 2. Bootstrap directory structure
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphics-halflings-regular.woff2
Here we mainly focus on three simplified files: bootstrap.min.css is the main component of Bootstrap and contains a large number of CSS classes to be used; bootstrap-theme.min.css contains optional Bootstrap themes; bootstrap.min.js provides some JavaScript methods. It should be noted that Bootstrap depends on jQuery, so jQuery must be introduced before using bootstrap.min.js. Like using content distribution networks, we use relative paths to introduce corresponding CSS and JavaScript into our pages. In actual development, we often use the template provided by Bootstrap as the starting point. This template introduces the metadata and Bootstrap required by responsive pages. Developers can write their own responsive pages on this basis:
Listing 3. Bootstrap basic template
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--></head><body><h1>Hello, world!</h1><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="js/bootstrap.min.js"></script></body></html>
2. CSS
Bootstrap is first a CSS framework, which predefined many CSS classes. Developers only need to add appropriate CSS classes to HTML elements to get the desired style, which can complete the page layout, layout and other functions. The CSS provided by Bootstrap is extremely powerful. This article will focus on the grid system it provides. For other functions, it will only be mentioned by the way when applying it. If you want to know more about the functions, please refer to the official documentation.
container
When using Bootstrap layout, you need to include HTML elements in a container (.container). Bootstrap provides two containers: .container and .container-fluid. The former centers the content with fixed width, while the latter allows the content to horizontally fill the entire browser window, as shown below:
Listing 4. .container and .container-fluid
<div><p>"When I was a child, my mother would make a cup of coffee for me whenever I was sick. She said gently, "Foreigners drink this." "I was always afraid of coffee, and the sourness and bitterness were intertwined. Now I can't find the taste I drank when I was a child when I was a child, until that day I drank a cup of isatis." </p></div><div><p>"When I was a child, whenever I was sick, my mother would make a cup of coffee for me. She said gently: "Foreigners drink this." "As young, I was always afraid of coffee, and the sour and bitterness are intertwined. Now I can't find the taste I drank when I was a child when I was a child, until that day I drank a cup of isatis." </p></div>
The following picture shows what it looks like in the browser:
Figure 2. Container
Grid system
Like the grid system we designed in Writing the First Responsive Page, Bootstrap divides the page into rows (.row), with 12 columns per row (.col-md-*). The rows must be included in the container. According to the screen size, the columns are divided into .col-xs-, .col-sm-, .col-md-, and .col-lg-, respectively, corresponding to mobile phones (<768px), tablets (≥768px), medium-screen computers (≥992px) and large-screen computers (≥1200px). These pixels that appear in it are called critical points. Whenever the browser size or screen size reaches another critical point, the corresponding CSS class will work and the page layout will change. See the following figure for details:
Figure 3. Grid system
How do you understand the above table? If you need to dig the page into three columns when browsing a page on a computer, which accounts for 1/4, 2/4, and 1/4 of the row width, you can write the code as follows:
Listing 5. One row is divided into three columns
<div><div>.col-md-3</div><div>.col-md-6</div><div>.col-md-3</div></div>>.col-md-3</div></div>
Open the browser and you can see that they each occupy 3, 6, and 3 of the 12 columns, which add up to exactly 12 columns. If we narrow down the browser window until it is less than 970px, we will find that it has become three lines, stacked together to display. Except for .col-xs-, other CSS classes behave the same. When the screen size is smaller than its critical point, it will be displayed piled up. It will only be displayed in columns when the screen size is larger than its critical point, and .col-xs- is displayed in columns in any case.
CSS classes corresponding to different screen sizes can be used in a mixed manner. For example, if I want a page to display 3 columns on the computer and 2 columns on the phone, I can write the code as follows. On the phone, the third column will be displayed on the next line and occupy half of the line width:
Listing 6. Show different numbers of columns on computers and phones
<div><div>.col-md-3</div><div>.col-md-6</div><div>.col-md-3</div></div>>.col-md-3</div></div>
If you want to display the same column on all devices, you only need to define the minimum size .col-xs-, and the layout will automatically expand to a larger size, otherwise it will not hold:
Listing 7. The same number of columns are displayed on all devices
<div><div>.col-xs-6</div><div>.col-xs-6</div></div>
You can also give a certain offset to the column, for example, the first column accounts for 1/4 of the row width, and we want the second column to offset 6 columns to the right, occupying 3 columns at the end of the row:
Listing 8. Column Offset
<div><div>.col-md-3</div><div>.col-md-3</div></div>
The order of columns can also be adjusted by .col-md-push-* and .col-md-pull-*. Their meaning is to push an element backward or pull several columns forward. Developers can use this feature to pull important content to the front when displaying it on the phone:
Listing 9. Push and pull column
<div><div>.col-md-9 .col-md-push-3</div><div>.col-md-3 .col-md-pull-9</div></div>
What is even more exciting is that this mesh system can also be nested, so that various complex layouts can be carried out:
Listing 10. Nesting
<div><div>Level 1: .col-sm-9<div><div>Level 2: .col-xs-8 .col-sm-6</div><div>Level 2: .col-xs-4 .col-sm-6</div></div><div>Level 1: .col-sm-3</div></div></div>
The above code is generally divided into two columns, and the first column has two columns nested.
Bootstrap's grid function provides various possibilities for web page layout and is very simple to use. Let's take a case to see how simple it is to write a responsive page using Bootstrap.
3. Actual combat
Suppose you want to implement a web page as shown in the following image:
Figure 4. Web Design
First, we divide the web page elements into corresponding rows and columns. The following figure shows the author's division:
Figure 5. Dividing web design into rows and columns
Accordingly, define our HTML structure and add the appropriate Bootstrap CSS class:
Listing 11. Defining HTML structure
<div><div><img src="http://placehold.it/150x150"></div><div><h1>Jane Doette</h1><h3>front-end ninja</h3></div><hr><div><div><img src="http://placehold.it/950x350"></div><div><div><h2>Featured Work</h2></div><div><div><img src="http://placehold.it/250x250"><h2>applify</h2><a href="https://github.com/udacity/applify">https://github.com/udacity/applify</a></div><div><img src="http://placehold.it/250x250"><h2>sunflower</h2><a href="https://github.com/udacity/sunflower">https://github.com/udacity/sunflower</a></div><div><img src="http://placehold.it/250x250"><h2>bokeh</h2><a href="https://github.com/udacity/bokeh">https://github.com/udacity/bokeh</a></div></div>
It took less than 10 minutes for the author to write the above code, and since there were no pictures, the author used the placeholder pictures provided online. Opening this page in a browser is close to design, but the font, uppercase, uppercase, and typeface are still inconsistent with the design. Next, you need to fine-tune and browse the Bootstrap document to discover related CSS classes. The final effect is shown in the figure below:
Figure 6. Realization effect
What's more interesting is that when you narrow down the browser window, or access the page from your phone, you will find that it is already a simple responsive page, and we haven't added any extra code! Looking at the time, it took less than 20 minutes in total, and I also fulfilled my promise to write a responsive page in minutes.