Home > Developer > JavaScript
You can write a bootstrap responsive page in 20 minutes.
Recently I found a good thing called Bootstrap. Bootstrap is now the most popular responsive CSS framework. It takes precedence over mobile devices and can quickly adapt to different devices. It is quick and convenient to write responsive pages, and shields browser differences. After using Bootstrap, you can no longer imagine the miserable life of using the original CSS to write web pages.
After learning, I found myself capable of developing a HUGE PAGE every minute. This article will introduce Bootstrap and lead you to implement a responsive page.
Figure 1.Move first to adapt to different devices
I. Installation
The simplest way is to directly reference the Bootstrap provided by the content delivery network (CDN) in the webpage. When a user accesses the webpage, the user will obtain resources from the nearest server.
Listing 1.Get Bootstrap from the content delivery 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 download Bootstrap for local deployment. You can download the complete Bootstrap on the download page, or select the features used by the project on the custom page, compile and download a simplified version of Bootstrap. After the download is complete, a zip file is obtained. The decompressed directory structure is as follows:
List 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
── Glyphicons-halflings-regular.woff2
Here we mainly focus on three simplified files: bootstrap.min.css is the main component of Bootstrap, including a large number of CSS class to be used, bootstrap-theme.min.css contains an optional Bootstrap topic; bootstrap. min. js provides some JavaScript methods. You must note that Bootstrap depends on jQuery, so bootstrap is used. min. jQuery must be introduced before js. Like using a content delivery network, we use relative paths to introduce CSS and JavaScript on our own pages. In actual development, we often use the template provided by Bootstrap as the starting point. This template introduces the metadata and Bootstrap required for response pages. developers can compile their own response pages based on this:
Listing 3.Basic Bootstrap Template
<!DOCTYPE html>Ii. CSS
Bootstrap is a CSS framework that predefines many CSS classes. Developers only need to add appropriate CSS classes for HTML elements to get the desired style, you can complete page layout, layout, and other functions. The CSS function provided by Bootstrap is exceptionally powerful. This article focuses on the grid system provided by Bootstrap. For other functions, we will only mention it when applying it. For more information, see the official documentation.
Container
When using Bootstrap layout, You need to include HTML elements in a container (. container). Bootstrap provides two types of containers:. container and. container-fluid. The former shows the fixed width of the content in the center, and the latter fills the entire browser window horizontally, as shown below:Listing 4.. Container and. container-fluid
<Div class = "container"> <p> "when I was a child, my mother brewed a cup of coffee for me. She gently said," foreigners drink this ." I am afraid of coffee. Now, I can't find the taste of Milo, Island, or Starbucks when I was a child, until that day I drank a cup of blue ." </P> </div> <div class = "container-fluid"> <p> "when I was a child, my mother made me a cup of coffee, she gently said, "All foreigners drink this." I am afraid of coffee. Now, I can't find the taste of Milo, Island, or Starbucks when I was a child, until that day I drank a cup of blue ." </P> </div>Is displayed in the browser:
Figure 2.Container
Grid System
Just like the grid system we designed in writing the first responsive page, Bootstrap divides the page into rows (. row), 12 columns in each row (. col-md -*). Rows must be included in the container, and the columns are classified according to the screen size. col-xs -,. col-sm -,. col-md -,. col-lg-corresponds to mobile phones (<768px), tablets (≥768px), medium-screen computers (≥992px), and large-screen computers (≥0000px ). These pixels are called critical points. When the browser Size or screen size reaches another critical point from one critical point, the corresponding CSS class will take effect and the page layout will change. For details, see:Figure 3.Grid System
How can we understand the above table? If you want to browse the page on your computer and divide the page into three columns: 1/4, 2/4, and 1/4, respectively, you can write the following code:
Listing 5. One row is divided into three columns
<div class="row"><div class="col-md-3">.col-md-3</div><div class="col-md-6">.col-md-6</div><div class="col-md-3">.col-md-3</div></div>Open the browser and you can see that each of them occupies 3, 6, and 3 columns in 12 columns, which are exactly 12 columns. If we narrow down the browser window until it is smaller than 970px, three rows will be displayed together. Division. col-xs-, the behavior of other CSS classes is the same. When the screen size is smaller than its critical point, it is heap and displayed. It is only displayed by column when the screen size is greater than its critical point, however. col-xs-displays by column in any case.
CSS classes corresponding to different screen sizes can be used together. For example, if I want to display three columns on a page on a computer and two columns on a mobile phone, you can write the following code, on the mobile phone, the third column will wrap to the next line, and occupy half of the width of the line:
Listing 6.Display different numbers of columns on the computer and mobile phone<div class="row"><div class="col-xs-6 col-md-3">.col-md-3</div><div class="col-xs-6 col-md-6">.col-md-6</div><div class="col-xs-6 col-md-3">.col-md-3</div></div>If you want to display the same columns on all devices, you only need to define the minimum size. col-xs-. The layout will automatically expand to a larger size. Otherwise, it will not be true:
Listing 7.The same number of columns are displayed on all devices.<div class="row"><div class="col-xs-6">.col-xs-6</div><div class="col-xs-6">.col-xs-6</div></div>You can also give a certain offset to the column. For example, if the first column occupies 1/4 of the row width, we want the second column to offset 6 columns to the right, occupying the three columns at the end of the row:
Listing 8.Column offset<div class="row"><div class="col-md-3">.col-md-3</div><div class="col-md-3 col-md-offset-6">.col-md-3</div></div>The column order can also be passed. col-md-push-* And. col-md-pull-* adjustment, which means to push a certain element back or forward several columns. developers can use this feature to display important content on mobile phones, pull to the front:
Listing 9.Push-pull Column<div class="row"><div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div><div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div></div>Even more exciting is that such grid systems can also be nested, so that they can carry out a variety of complex la s:
Listing 10.Nesting<div class="row"><div class="col-sm-9">Level 1: .col-sm-9<div class="row"><div class="col-xs-8 col-sm-6">Level 2: .col-xs-8 .col-sm-6</div><div class="col-xs-4 col-sm-6">Level 2: .col-xs-4 .col-sm-6</div></div><div class="col-sm-3">Level 1: .col-sm-3</div></div></div>The code above is divided into two columns in general, and the first column is nested with two columns.
The grid feature of Bootstrap provides various possibilities for webpage layout and is very simple to use. Let's use a case to see how simple it is to compile a responsive page using Bootstrap.Iii. Practice
Suppose we want to implement a webpage as shown in the following figure:
Figure 4.Webpage DesignFirst, we first divide the web page elements into corresponding rows and columns, which are the author's Division:
Figure 5.Divide the webpage design into rows and columnsThen, define our HTML structure and add the appropriate Bootstrap CSS class:
Listing 11.Define HTML Structure<div class="container"><div class="row"><div class="col-md-3"></div><div class="col-md-9">It took less than 10 minutes for the author to write the above Code. Since there was no image, the author used the placeholder image provided on the Internet. Open the page in the browser, which is close to the design, but the font, case, and layout are not consistent with the design. Next, you need to fine-tune the Bootstrap document to find the relevant CSS classes. The final effect is shown in:
Figure 6.Effect
What's more, when you zoom out the browser window or access the page from your mobile phone, you will find that it is a simple responsive page, we didn't add any additional code! Taking a look at the time, it took less than 20 minutes. I also fulfilled the promise of writing a responsive page in minutes.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
