Rx Programming Note: Bootstrap

Bootstrap

Https://getbootstrap.com

2016-07-01

In the course of learning Freecodecamp learned bootstrap, and in the course of the first practical problem card in the Response section, so first to do a study of bootstrap.

A preliminary understanding of Bootstrap is a framework for producing responsive web pages.

-What is a responsive web page where the same Web page can be adapted to fit the size of the screen resolution of different devices?

-What is the framework , in fact, is prepared in advance of the various CSS style sheets, JS script combination, used in the process of making a Web page call, no need to re-create the wheel. Simple to understand, is the code template, or is a fool to build a station, simply add content, you can make a beautiful website.

To use bootstrap, first download the code package from the official website, the Dist package has three folders, CSS, JS and fonts, file a lot, In fact, just a CSS folder called Bootstrap.min.css file can start to work, as for JS and fonts behind to understand.

According to the basic template provided by the official website, the homepage will be done at the following two points:

1. The page header must start with the following three lines:

<charset= "Utf-8"><http-equiv= "X-ua-compatible"  content= "Ie=edge"><Name  = "Viewport"  content= "Width=device-width, initial-scale=1">

2. Connect the Bootstrap.min.css file to the head

<href= "Css/bootstrap.min.css"  rel= "stylesheet"> 

And then look at starter template, the page body is divided into two parts, one is the Nav navigation bar, one is the container page content, and then all the content uses the predefined CSS classes provided by Bootstrap.

So it seems that the focus of using bootstrap is to use the predefined CSS classes that it provides, so as long as you are familiar with these basic classes, you should be able to use bootstrap easily.

However, there are many different kinds of classes, it does not seem that 1:30 will be able to understand in depth, anyway, first learn to press Strater template to do it.

Rx Programming Note: Bootstrap