This article shares with you the simple usage of the web framework bootstrap for your reference. The specific content is as follows
Directly Baidu bootstrap to search for bootstrap Chinese website, and it is best to choose to download the source code.
After the download is complete, copy dist/css/bootstrap.min.css to the root directory of the project.
The specific module introduction and use are described on Chinese websites. Here is a simple example produced as an example:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Use bootStrap for responsive layout</title> <link href="bootstrap.min.css" type="text/css" rel="stylesheet"></head><body><!--In Navigation Bar--><!--In class, "navbar navbar-default is the default color, while navbar-fixed-top is to cancel the rounded corner effect of the navigation bar, role can be avoided"--><nav role="navigation"> <!--Add <div></div> is to make the interface centered--> <div> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href="#">ProjectName</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div id="bs-example-navbar-collapse-1"> <form role="search"> <div> <input type="text" placeholder="Email"> </div> <div> <input type="password" placeholder="Password"> </div> <button type="submit" onclick="signin()">Sign in</button> <script> <!--This is the method implementation of the login button, you can customize it as needed--> function signin(){ alert("clicked on login"); } </script> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --></nav><!-- Giant Screen--><div> <div> <h1>Hello, world!</h1> <p>Here is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a »</a></p> </div> <div> <h2>Heading2</h2> <p>Here is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test articleHere is a test <p>©company2014</p> </foot></div></body></html>The above is all about this article, I hope it will be helpful to everyone's learning.