30 minutes to quickly master Bootstrap frame _javascript skills

What is Bootstrap?

Bootstrap is a front-end framework for rapid development of Web applications and Web sites. Bootstrap is based on HTML, CSS, and JAVASCRIPT.

History

Bootstrap was developed by Twitter's Mark Otto and Jacob Thornton. Bootstrap is an Open-source product released on GitHub in August 2011.

Recent free time more, today first to introduce a front-end "style" framework--bootstrap.

First, the overall structure of Bootstrap

Why is the introduction I call bootstrap for a front-end style frame? This may not be a very accurate term, but I think this kind of salutation will enable some beginners to understand and understand bootstrap in the end. I summarize things do not like to use some tall words to deepen the understanding of a certain knowledge, but prefer to use some of the words to describe the knowledge point. While this description may be a bit inaccurate, I don't think it's a big deal, because the description can really make beginners understand this knowledge faster. Because I am in the learning point of the time there is such confusion, some knowledge of the official documents are said that the tall, in fact, that is, some of the previous things, and then encapsulation makes the development of simpler and faster Bale. So here I share the bootstrap framework as well. and the content organization aspect is also in order to let the beginner grasp better. Because I was a beginner when I first came into contact. I think this kind of organization can understand knowledge faster and better.

For Bootstrap, the first thing to introduce is its overall architecture-what it really consists of. I believe you can see the following picture to quickly understand what the bootstrap is made up of.

From the above diagram, you can see clearly that thebootstrap consists of the following parts:

12 Grid system--that is, divide the screen into 12 parts (columns).

Use Rows (row) to organize elements (12 columns in each row), and then place the content in the column.

Control column offsets by col-md-offset-*.

The Infrastructure layout component--bootstrap provides a variety of basic layout components. such as typesetting, code, tables, buttons, forms and so on.

Jquery--bootstrap all JavaScript plug-ins are dependent on jquery. If you want to use these JS plug-ins, you must refer to the jquery library. That's why we need to refer to the jquery library in addition to referencing bootstrap JS files and CSS files, both of which are dependencies.

The CSS component--bootstrap a number of CSS components for our implementation. The following Drop-down box, button group, navigation and so on. That is, bootstrap content helps us define a lot of CSS styles, and you can apply these styles directly to elements such as the dropdown box.

JavaScript plug-in--bootstrap also for us to implement a number of JS Plug-ins, we can use its plug-ins to complete a number of commonly used functions, and do not need us to write the JS code to achieve like the prompt box, modal window such effect.

Responsive design-This is a design idea. The response means that it will automatically adjust the page based on the screen size, so that the front page can perform well on different sizes of screens.

Bootstrap is made up of the above parts. The above is already a simple introduction to each component, the next thing is simply through a number of examples to each component of a detailed introduction.

Two, 12 grid system

Bootstrap defines 12 grid systems for better layout. The first thing to define for each front-end framework is the layout system. Inside the bootstrap, you use rows and columns to create a page layout. Its layout has several principles:

Rows (row) must be included in the. container (fixed width) or. Container-fluid (100% width)

Each row contains 12 columns

Place content in each column

In bootstrap grid system, the browser is divided into 4 types according to its width. The values are: Automatic (100%), 750px, 970px, 1170px.

The corresponding style is ultra small (XS), Small (SM), Medium screen (MD), large (LG)

This is through the media query to define the minimum width implementation. Therefore, Bootstrap made out of the Web page to a large compatibility, to small incompatible!

Within the bootstrap framework, the boundary value of screen size has been predefined, and its demarcation is defined by a media query. This is defined in the following way:

/* Super small screen (cell phone, less than 768px) * * *
No media query-related code, because this is the default in Bootstrap (remember Bootstrap is the mobile device first?) * * * *
small screen (flat, greater than 768px) *
/@media (min-width: @screen-sm-min) {...}
/* Medium screen (desktop display, greater than 992px) *
/@media (min-width: @screen-md-min) {...}
/* Large screen (large desktop display, greater than or equal to 1200px) * * * *
@media (min-width: @screen-lg-min) {...}

In fact, WIN8 application in the development of the media query to achieve a responsive application. So if you hear the response system in the future do not feel very advanced oh, in fact, is the framework for us to define the media query, if the media query is more than the minimum defined width corresponding to a type of screen, in this way, you can shrink the size of the elements between different screens to fit the screen. However, the concept proposed by Bootstrap is a priority for mobile devices, so bootstrap designed pages can only be large compatible and small incompatible.

Third, the basic layout components

The underlying layout component is the bootstrap framework that defines some unified styles for the labels for some of the underlying layouts. such as table, button, form, etc. Now let's look at a table example:

<! DOCTYPE html>  

For button and form example code is not posted here, you can use the link below to see the effect of the operation and view the source code. You can also download all the source code for this topic through the final download file.

Four, CSS components

CSS components are about the same as the underlying layout components, which means that bootstrap defines some of the existing styles for some of the tags that work beautifully, so that each company or developer does not need to write another style to speed up development efficiency. Let's take a look at a navigation example directly here. White this thing, you use a lot of natural ripe.

<! DOCTYPE html>  

The other components run as follows:

Five, JavaScript plug-ins

By default, all JS Plug-ins can be implemented by setting specific HTML code and corresponding properties without having to write a line of JavaScript code. The essence of its implementation is that bootstrap implements the corresponding JavaScript code for these attributes.

Here's a look at the example of a modal window:

<! DOCTYPE html>  

After reading all of the previous content, is not an instant feel that bootstrap is actually just a style frame. With it we can quickly and easily build Web pages. In addition to reading the previous content, you will not be confused why Bootstrap Official document Why is the following:

The entries in the navigation bar of the official bootstrap document are not the major components of our presentation.

Vi. Summary

To this end, all the content of this article is finished, hope that through this article can let beginners quickly understand and master bootstrap. In addition, this article is equivalent to Bootstrap essentials, for more detailed content you can refer to Bootstrap Chinese official website. But I think no, there is such a time as the direct practice of it. The VS2013 Web application already defaults to support the bootstrap framework, and you can immediately go through VS2013 to create a Web application to experience the application of bootstrap under ASP.net MVC.