Bootstrap Study Notes

Bootstrap Study Notes

Taking notes in English is just for practicing my English ability. : )

---

Bootstrap will adjust the size of the HTML element according to the size of your screen.
You only need to add the following code to the beginning of your HTML to add Bootstrap to any application:

<link rel="stylesheet" 
href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

---

There are a lot of calss styles in bootstrap：

Class	Effect
row	Make the elements on the same row
text-center	Make the elements in the middle
img-responsive	Make the width of the picture fit the width of the page
btn	A button style
btn-block	Make it a block-level element (The button will stretch and fill the entire horizontal space of the page)
btn-primary	Make the button dark blue (It is used in the main actions of the users)
btn-info	Make the button light blue (It is used in operations that the users may take)
btn-danger	Make the button red (It is used to remind users that the operation is “destructive”)
btn-default	The default style
col-md-*	md represents a medium, * represents a number, which specifies the column width of this element
col-xs-*	xs represents a medium, * represents a number, which specifies the column width of this element （For smaller screens）
well	It creates a visual sense of depth for the set of columns

---

And there are some other labels：

Label	Effect
span	You can put several elements together, or even use this to specify styles for different parts of an element
i	Used to refer to icons

You can add the Font Awesome icon library to any application. You only need to add the following code to the HTML header:

<link rel="stylesheet" 
href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

The following are the some class attributes about i element:

Class	Effect
fa-thumbs-up	A picture of a thumbs
fa-trash	A picture of a trash can
fa-info-circle	A picture of a circle with exclamatory mark
fa-paper-plane	A picture of a paper plane