Bootstrap streamlined Tutorials: Mid-Autumn Festival and bootstrap

Bootstrap streamlined Tutorials: Mid-Autumn Festival and bootstrap

Bootstrap is easy to learn and provides exquisite styles. Just a little simple learning can make beautiful pages.

Bootstrap net: http://v3.bootcss.com/

Bootstrap provides three download types:

Bootstrap for production environment

Compiled and compressed CSS, JavaScript, and font files. Does not contain documents or source code files.

Bootstrap source code
Less, JavaScript, and font file source code, with documents. The Less compiler and some settings are required.

Sass
This is a source code porting project for Bootstrap from Less to Sass, which is used to quickly introduce it to Rails, Compass, or Sass-only projects.

In fact, you can use bootstrap without downloading it:

Bootstrap chinnet has built its own free CDN acceleration service for Bootstrap. Based on CDN services provided by cloud vendors in China, the Service provides faster access speeds, more obvious acceleration effects, no speed and bandwidth restrictions, and is permanently free of charge.

Base.html

<! DOCTYPE html> 
Bootstrap has been introduced in base.html. Save it and we can use the style provided by bootstrap.

Font icon 

Bootstrap provides more than two hundred icons by default. We can use these icons through the span tag:
<H3> icon 

Button
The <button> </button> label is used to create buttons. bootstrap provides a wide range of button styles. <H3> button 

In addition to the default button size, bootstrap also provides three parameters to adjust the button size: btn-lg, btn-sm, and btn-xs.
Drop-down menu

Drop-down menus are one of the most common interactions, and bootstrap provides beautiful styles.

<H3> drop-down menu 

Input box

Use the <input> </input> label to create an input box.
<H3> input box 

Navigation Bar

The navigation bar is essential to guide the entire website.
<H3> navigation bar 

Form

Data transmission between people and systems relies on forms. For example, submission of registration/login information and submission of query conditions. Use the <form> </form> label to create a form.
<H3> form 

Warning box

The warning box is an important means for the system to send information and provide guidance to users. There are no labels for the warning box. You can instantly create a beautiful warning box using the style provided by bootstrap.

<H3> warning box 

Progress bar

The processing process of the system usually needs to be waited by the user. The progress bar allows the user to perceive the processing process of the system, thus increasing tolerance.
<H3> progress bar 

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
If you want to learn more, click here to learn more. Then, we will attach two wonderful topics: Bootstrap learning tutorial Bootstrap practical tutorial.