Simplified bootstrap tutorial and simplified bootstrap

Simplified bootstrap tutorial and simplified 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  
 
Click here to read the original article