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 |