With the increasing number of mobile users, traditional web system architecture is not compatible with the normal use of many mobile terminals. At work, I will also find that many customers now have the need to use management systems on mobile terminals such as mobile phones and tablets. If the corresponding response web page is developed separately for each terminal, this will inevitably increase the cost of the project and the pressure on developers. At this time, it is necessary to understand responsive layout, which is born to solve multi-terminal problems. This time we introduce lightweight, open source, and free bootstrap.
Build a development environment
First, download the boostrap source code package of the official website: http://www.bootcss.com/. To develop simple projects, you do not have to add all css, js, fonts, etc. in the source code. According to your project needs, you can tailor the environment you need.
The required files are as follows: jquery.min.js, bootstrap.min.js, bootstrap.css. If you need to use some of the font styles, you also need to add font-related files, as shown in the figure below:
[Note] When loading js, you must first load jquery.min.js, because in bootstrap.min.js, you will use jQuery-related methods, i.e. boostrap.min.js, depends on jquery.min.js.
Test bootsrap environment
Write a test file index.html. The test file contents are as follows:
<!DOCTYPE html><html><head> <title>Test the boostrap environment</title> <link rel="stylesheet" type="text/css" href="./css/bootstrap.css"> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script></head><body></body></html>
The above is a bootsrap development environment. It's very simple!
What you must know when using boostrap is boostrap's raster system. It is precisely because of this grid system that makes it better compatible with terminal devices with different resolutions.
The specific grid system official website has a clear introduction: http://v3.bootcss.com/css/. The following picture of the official website is located:
When using boostrap, we mainly use some styles that have been defined in it. This is helpful for a program that doesn't have the ability to art, quickly building a pretty good page.
When actually using bootstrap, we often check some help documents on the official website: http://v3.bootcss.com/css/#tables.
I personally recommend that you directly copy the relevant code into your own web page in the examples of the official website, and then make relevant modifications based on this. This way, the development speed will be faster and the accuracy will be higher.
Demonstrate some boostrap styles ---table styles.
<!DOCTYPE html><html><head> <title>Test boostrap environment</title> <link rel="stylesheet" type="text/css" href="./css/bootstrap.css"> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script><body> <table> <tr> <td> Test form</td> <td> Test form</td> <td> Test form</td> <td> Test form</td> <td> Test form</td> <td> Test form</td> <td> Test form</td> <td>Test</td> <td>Test</td> </tr> <tr> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> </tr> <tr> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> </tr> <tr> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> <td>Test</td> </tr> </table></body></html>
The web page viewing results are as follows:
The attributes in class are introduced:
1) Table plus this already has the bootsrap table style
2) Table-hover indicates that the row background of the table mouse stays bright
3) The table-bordered table appears in borders
4) table-striped table stripes
[Note] When multiple attributes are added together, there are spaces between each attribute.
2. button
<!--Button--> <a href="#" role="button">Link</a> <button type="submit">Button</button> <input type="button" value="Input"> <input type="submit" value="Submit"> <!-- Standard button --> <button type="button"> (default style) Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button"> (preferences) Primary</button> <!-- Indicates a successful or positive action --> <button type="button">(Success)Success</button> <!-- Contextual button for informational alert messages --> <button type="button">(General information)Info</button> <!-- Indicates caution should be taken with this action --> <button type="button">(Warning)Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button"> (Danger) Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button"> (Link) Link</button>
The results of the web page are as follows:
For many other styles and components, it is recommended to refer to the official help documentation.
Summarize
This article is a guide, which briefly introduces what boostrap is for and how to use it. There is no detailed list of all components and styles, but... read down!
This is a very magical article, you must click in and take a look: Bootstrap learning tutorial worth sharing and collecting
If you still want to learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial
I hope that those who are interested in Bootstrap can manually test the effects of each style and how to use each component by themselves, and truly feel the fun brought by Bootstrap.