Web Front-end learning notes: Bootstrap framework

A long time ago, many people recommended the Twitter Bootstrap framework to me. However, it wasn't until a few days ago that I really learned about Bootstrap. It was indeed a great framework, at least in terms of visual experience, we have surpassed many front-end UI frameworks. Today, I want to talk about Bootstrap. At last, I will give a demo of the bootstrap ui I have compiled and an example of self-developed Bootstrap.

Next I will briefly introduce the bootstrap framework.

The bootstrap framework belongs to the UI framework, which is not the same as jquery. In fact, an accurate description of the bootstrap framework belongs to the css framework rather than the Javascript framework, but it also uses JavaScript to improve the visual effect of the bootstrap framework. In addition, the bootstrap framework is very advanced, especially in browsers that support HTML5 and css3, and also provides excellent support for browsers on mobile terminals.

A complete Bootstrap framework consists of the following four parts:

1. Scaffolding: Used to reset the background, link style, raster system, etc., and contains two simple layout structures. Bootstrap styles use the lesscss technology, such as resetting the background. These operations are simple and I will not describe them. The most brilliant in scaffolding is the grid system and layout. The raster system divides the page width into 12 columns, and The raster system is divided into two types. One is the default raster system. In this case, the raster system is divided equally by 940px pixels. We can use span1, class Attribute operations such as span4 default grid layout, another is the stream raster system, this time the width of the column is not fixed, but according to your visible page for 12 equal points, you can also use span1 and span4 to operate the stream grid. This system is very good. The most difficult part of CSS is Div layout. Using the raster system can greatly simplify Div layout operations. Another step is to perform layout operations. The layout is also divided into fixed and streaming, so that the layout can be easily operated even if you are not very proficient in CSS layout.
2. Basic CSS style. Bootstrap provides the style of common HTML elements, such as buttons, forms, and text. Most people who do websites are not artists. It is very difficult to make pleasing webpages. CSS provides a very professional and exquisite style, which allows us to easily develop a set of exquisite websites.
3. CSS components: Bootstrap also provides some common CSS components, which are also very good.
4. Javascript Plugin: Bootstrap is an open system. We can expand Bootstrap at will, especially the Javascript framework, so that Bootstrap will be more professional.

Bootstrap is an operational framework and does not need to be analyzed in depth. The most important thing is whether an instance is ready for use. I downloaded Bootstrap and found that the example in the downloaded package is not too powerful, the examples are all on its official website. Many people who are not particularly familiar with CSS and JavaScript are not used to them. Therefore, I have integrated these examples as a separate example project, this project is very comprehensive. I have found it online and there are no more detailed examples than I have. You can download it and develop it based on the directory structure of my project. In addition, I made a simple demo and shared it with you. The demo is:

Download link:

My sorted instances:

Http://files.cnblogs.com/sharpxiajun/bootstrap-1.0.zip

My demo:

Http://files.cnblogs.com/sharpxiajun/upms-bootstrap-v0.2.zip

I believe these examples will help you learn about Bootstrap.