Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use the Bootstrap framework", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use the Bootstrap framework" this article.

What is Bootstrap?

Bootstrap is a front-end framework for the rapid development of Web applications and websites. A set of HTML, CSS and JS frameworks developed jointly by Twitter's Mark Otto and Jacob Thornton. Bootstrap is developed based on HTML5 and CSS3, it is more personalized and humanized on the basis of jQuery, forming its own unique website style, and compatible with most jQuery plug-ins. Anyone who has used HTML5 and CSS3 knows that html5 and css3 are indispensable to some high-end websites nowadays. Bootstrap is officially designed based on these, and it encapsulates a ready-made collection of CSS styles for us. For us to quote directly.

What is the "excellence" of Bootstrap?

The built-in style of Bootstrap is very beautiful and sufficient. Instead of making the site gaudy, it's better to keep it simple. Bootstrap in the reset browser style, but also added Twitter-like page elements, we just need to use, unscrupulous, rest assured to use, do not have to think about this row height, calculate that width, let accidentally forget the definition of page elements awkwardly displayed on the page. Because these Twitter have been designed for us, and by Twitter, after all, has withstood the test of hundreds of millions of users, coupled with the support of Twitter's strong design team, this framework appears to be different.

Of course, the benefits of Bootstrap are more than that, otherwise Bootstrap will not be popular all over the country as soon as it is released.

Mobile device first: since Bootstrap 3, the framework includes mobile device priority styles throughout the library.

Browser support: all major browsers support Bootstrap.

Easy to use: as long as you have the basic knowledge of HTML and CSS, you can start learning Bootstrap. The following is a concrete example of how to use Bootstrap quickly.

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

The main reason is that it is not only good, but also open source.

About responsive design, this is what we web developers will have to face in the future, because with the continuous development of all kinds of mobile devices, mobile tablets are popular. These mobile devices are likely to become mainstream. So we must keep up with the trend, do a good job of PC website at the same time we must consider to let the site adapt to other terminals. )

Simple use of Bootstrap

This section mainly explains the environment installation and file structure of Bootstrap, and demonstrates how to use Bootstrap through a demo.

First of all, download the latest version of Bootstrap: http://v3.bootcss.com/getting-started/#download Bootstrap provides two forms of compression package, in the download package you can see the following directories and files, these files are placed in different directories according to category, and provide compressed and uncompressed versions. After downloading the compressed package Unzip it to any directory and you can 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: compiled CSS and JS (bootstrap.) are provided here. Files, and compressed CSS and JS (bootstrap.min.) Files. It also provides a CSS source mapping table (bootstrap.*.map), which can be used in the development tools of some browsers. It also includes icon fonts from Glyphicons, which are used in the accompanying Bootstrap theme.

For compressed and uncompressed versions, you can refer to one of them when using them.

Demo

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

Bootstrap instance-button option default button original button success button information button warning button danger button link button

You can see that there is no other css code written in the above html code, which completely refers to the button style of Bootstrap. The key code part: class= "btn btn-default" btn: inherits the default appearance of the rounded gray button. Btn-default is the style of the default / standard button. If you want to change other styles, it is better to use other classes, such as btn-danger is a dangerous button. These styles are written in the bootstrap.min.css file of some styles, you can open the file to browse.

In this way, the use of Bootstrap is completed before you know it, and the other controls are different class. When using it, pay attention to check the official documents frequently, and you will gain a lot.

In addition, there is one thing to pay special attention to when referencing Bootstrap: that is the order in which jquery.min.js and bootstrap.min.js files are referenced, because all JavaScript plug-ins for Bootstrap depend on jQuery, so jQuery must be introduced before Bootstrap.

The above is all the content of this article "how to use the Bootstrap Framework". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.