Bootstrap framework-Quick Start and Quick Start of bootstrap

Bootstrap framework-Quick Start and Quick Start of bootstrap
What is Bootstrap?

Bootstrap is a front-end framework used to quickly develop Web applications and websites. A set of HTML, CSS, and JS frameworks developed by Mark Otto of Twitter and Jacob Thornton. Bootstrap is developed based on HTML5 and CSS3. It makes more personalized and humanized improvements based on jQuery to form a unique website style and is compatible with most jQuery plug-ins. People who have used HTML5 and CSS3 know that html5 and css3 are indispensable for some high-end websites. Bootstrap was officially designed based on these features, which encapsulated the ready-made CSS style collection for us. For direct reference.
For the first time, you can understand it as a collection of css styles.

What is "extraordinary" in Bootstrap "?

Bootstrap built-in styles are very nice and adequate. It's better to keep your website simple than to keep it simple. In addition to the reset Browser style, Bootstrap adds Twitter-like page elements. All we need to do is to use them with no fear and confidence, you don't have to worry about the line height, calculate the width, and display the page elements that you accidentally forget to define on the page. Because these Twitter have been designed for our consideration,
In addition, Twitter has stood the test of hundreds of millions of users. With the support of Twitter's powerful design team, this framework is even more distinctive.

Of course, Bootstrap has more benefits than that. Otherwise, Bootstrap will not be launched, and it will soon become popular.

• Mobile device priority: Since Bootstrap 3, the framework includes the mobile device priority style throughout the library.
• Browser support: all mainstream browsers support Bootstrap.
• Easy to use: as long as you have basic HTML and CSS knowledge, you can start learning Bootstrap. The following example shows how to use Bootstrap quickly.

• Responsive design: Bootstrap's responsive CSS is adaptive to desktops, tablets, and mobile phones.

• One of the main reasons is that it is not only good, but also open-source.

(Responsive design is what web developers will face in the future, because with the continuous development of various mobile devices, mobile phone tablets are prevalent. These mobile devices have become the mainstream. Therefore, we must keep up with the trend. while doing a good job in PC websites, we must also consider adapting websites to other terminals. )

Simple use of Bootstrap

This section describes how to install the Bootstrap environment and file structure, and demonstrates how to use Bootstrap through a demo.

First download the latest version of Bootstrap: http://v3.bootcss.com/getting-started/#download
Bootstrap provides two types of compressed packages. You can see the following directories and files in the downloaded packages. These files are stored in different directories by category, it also provides two versions: Compressed and uncompressed.
After downloading the compressed package, decompress it to any directory to see the following (compressed version) 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

The above shows the basic file structure of Bootstrap: here we provide compiled CSS and JS (bootstrap.Files, as well as compressed CSS and JS (bootstrap. min.) File. The CSS source code ing table (bootstrap. *. map) is also provided, which can be used in some browser development tools. It also contains the icon fonts from Glyphicons and these icons are used in the included Bootstrap themes.

For the compressed version and uncompressed version, you can reference one of them when using it.

Demo

The following is the html code that uses Bootstrap and adds some Bootstrap styles to the button.

<! DOCTYPE html> 

Demo effect:

We can see that no other css code is written in the above html code, which is completely a reference to the Bootstrap button style. Key code: class = "btn-default" btn: inherits the default appearance of the gray button of the rounded corner. Btn-default is the default/standard button style. It is better to change other styles for other classes. For example, btn-danger is a dangerous button. These styles are all written in the bootstrap.min.css file. You can open the file and browse them.

In this way, you can use Bootstrap without knowing it. Other controls are also different classes. Pay attention to reading official documents frequently during use, and you will get a lot of results.

In addition, pay special attention to the reference sequence of jquery. min. js and Bootstrap. min. js files when referencing bootstrap,
Because all JavaScript plug-ins of Bootstrap depend on jQuery, jQuery must be introduced before Bootstrap.

With so many introductions on Bootstrap, I am also the first to get into this framework. However, this framework has many advantages over the course of study and usage over the past month, which greatly improves the design efficiency and quality of the front-end webpage. It can help us build a tall website in the shortest time.

In the future, we will launch some blogs about problems encountered during the specific use of the project.