The biggest benefit of BootStrap for developers is its responsive layout and some excellent styles.
Now I will introduce some steps and some commonly used things to use BootStrap.
1. Write the header
<head> <meta charset="UTF-8"> <!--In order to make ie use the latest rendering mode, add this tag --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--For responsive layout, first obtain the physical width of the device, set the web page width according to the physical width of the device, and scale it according to 1:1 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>LearnBootstrap</title> <!--Refer to the file directly --> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!--Reference cdn address--> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!--In order to support ie9 or below, add these --> <!--[if lt IE 9]> <!-- Let him support h5 tags--> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <!-- Let him support media queries, that is, responsive --> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <!--[endif]--></head>
2.Introduce js
This can be written in the body
<!-- jQuery file. Be sure to introduce --><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- The latest Bootstrap core JavaScript file --><script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
3. Use container class
container class is a commonly used div class
Mainly use the centering function
<div>hello</div>
4. Use a rasterized system
Rasterized system is a very commonly used layout system for BootStrap
Simple use as follows
<div> <!--xs means on the phone, sm means on the tablet, and md means on the desktop. The following numbers represent how many columns are occupied. The full screen is 12 columns--> <!--The content exceeds the height of the grid, and the height will be increased, and the width will not be increased --> <!--offset means how many columns will be moved to the right--> <div>.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-4</div></div><div> <!--push moves backwards, pull moves forward-> <div>.col-xs-12 .col-sm-6 .col-md-8</div> <div>.col-xs-6 .col-md-4</div></div>
You can see that the rasterized system can adjust different widths according to different devices.
5. Use the form
<div> <!--Responsive table, the content is too long to move left and right --> <div> <!--The last few tables are the tables with borders. When the mouse passes through the tbody row, the color is darker and the table is compacted --> <table> <thead> <tr> <th>Table title</th> <th>Table title</th> <th>Table title</th> <th>Table title</th> </tr> </thead> <tbody> <!--The color of the row is light green --> <tr> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> </tr> <!--The color of the row is beige--> <tr> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> </tr> </tbody> </table> </div></div>
If you want to change the color of a certain grid, you can add classes like tr in the th tag
6. Use forms
The most basic usage is as follows
<div> <form> <!-- part of the item is a form-group parent layout, with label and input--> <div> <!--label for corresponding to the input id--> <label for="exampleInputEmail1">Email address</label> <!--input class should be set to form-control--> <input type="email" id="exampleInputEmail1" placeholder="Email"> </div> <div> <label for="exampleInputPassword1">Password</label> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> <div> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <!--Help text--> <p>Example block-level help text here.</p> </div> <div> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit">Submit</button> </form></div>
If you set the form class to form-inline, all elements will be displayed on the same line
If you set the form class to form-horizontal, each form-group will display one line, but you have to set the width yourself
like
<div> <!--Let each form-group display one line, but each form-group child must specify the width--> <form> <div> <label for="Emai">Email</label> <!--input-group let prompts and supplements be displayed in the same line--> <div> <input type="email" placeholder="Email" id="Emai"> </div> </div> <div> <label for="Passwor">Password</label> <div> <input type="password" placeholder="Password" id="Passwor"> </div> </div> <button type="submit">summit</button> </form></div>
Usually when we register an account, if the information is incorrect or correct, it will prompt next to it, and the color of the input box will be different.
Bootstrap provides us with this very practical function
<div> <form> <!--Add two items should be added to the class of the parent div --> <!--Success status --> <div> <label for="inputSuccess2">Input with success</label> <input type="text" id="inputSuccess2" aria-describedby="inputSuccess2Status"> <!--The icon on the right--> <span aria-hidden="true"></span> <!--This information is hidden, increasing the readability of the code --> <span id="inputSuccess2Status">(success)</span> </div> <!--Warning status --> <div> <label for="inputWarning2">Input with warning</label> <input type="text" id="inputWarning2" aria-describedby="inputWarning2Status"> <span aria-hidden="true"></span> <span id="inputWarning2Status">(warning)</span> </div> <!--Error status--> <div> <label for="inputError2">Input with error</label> <input type="text" id="inputError2" aria-describedby="inputError2Status"> <span aria-hidden="true"></span> <span id="inputError2Status">(error)</span> </div> </form></div>
7. Button
Buttons are essential
<!-- White background--><button type="button"> (default style) Default</button><!-- Blue background--><button type="button"> (preferences) Primary</button><!-- Green background--><button type="button"> (success) Success</button><!-- Light blue background--><button type="button"> (general information) Info</button><!-- Orange and yellow background--><button type="button"> (warning) Warning</button><!-- Red background--><button type="button"> (danger) Danger</button>
You can also add dimensions to the class
<button type="button"> (large button) Large button</button> <button type="button"> (default size) Default button</button> <button type="button"> (small button) Small button</button> <button type="button"> (small button) Extra small button</button>
The above are the steps and common usage of Bootstrap
After using this framework, not only has the development speed increased, but the quality has also improved.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.