Many companies now use the framework of bootstrap in development. bootstrap is the work of a team of Twitter, which greatly simplifies our front-end development. (I will summarize some less usage later)
Learning to use API I suggest you directly view the API of the official website, address: http://www.bootcss.com/
Here are some target renderings:
Below I will summarize the techniques and principles in a small demo:
The first step is to download the compressed package of bootstrap at http://www.bootcss.com/, create a new index.html, use sublime or other editor to open the index page, and the directory after decompression is
Step 2 : Copy a basic template from the official website http://v3.bootcss.com/getting-started/ to facilitate subsequent development.
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* be placed first, and any other content *must* follow them! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world! </h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body></html>
1) Note: The reference to jquery.js must be in front of bootstrap.min.js, and it is best to manually download a jquery.js and place it in the js path, <script src="js/jquery.min.js"></script>
Because later when I was emulating, I found that the drop-down and carousel animation effects were gone, and I found that the jquery file of the basic template was downloaded and may not be connected to the Internet, so I did not download it. It is best to quote the local one by myself.
2) Note: The css reference is placed above the page and the js reference is placed below the page, because css needs to load the rendered page first, and js needs to load and execute after the page rendering is completed; and the meta statements for mobile devices are adapted to: <meta name="viewport" content="width=device-width, initial-scale=1">
Step 3, Navigation Bar
1) Centering effect: container-fluent needs to be changed to container
2) Change white to black with contrast effect: <nav>
3) The navigation bar is fixed to the top and add time class attributes: navbar-fixed-top
<nav> <!-- Brand and toggle get grouped for better mobile display --> <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="#">Zootopia</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div id="bs-example-navbar-collapse-1"> <ul> <li><a href="#">Homepage<span>(current)</span></a></li> <li><a href="#">Brief description</a></li> <li><a href="#">Features</a></li> <li><a href="#">About </a></li> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
4) The navigation bar will cover the top of the body, so add style
<style type="text/css"> body{ padding-top: 50px; } </style>5) Featured navigation items add drop-down menus
<li><a href="#" data-toggle="dropdown">Features</a> <ul> <li><a href="#">Animal 1</a></li> <li><a href="#">Animal 2</a></li> <li><a href="#">Animal 3</a></li> <li><a href="#">Animal 4</a></li> </li> </li>
Note that the contents of the submenu are nested in the outermost li tag, and the li tag has a class dropdown, and the submenu is also an ul tag, and the class is dropdown-menu. See above for the specific mapping relationship.
Step 4: Increase the rotation effect and copy and modify the carousel module of the bootstrap component:
<div id="carousel-example-generic" data-ride="carousel"> <!-- Indicators --> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div role="listbox"> <div> <img src="image/1.jpg"> <div> <h1>Zootopia 1</h1> <p>The visiting of the female house viewing position that expands the female house viewing position that expands the experience of the female house viewing position that opens the two numbers that occur in the country</p> </div> </div> <div> <img src="image/2.jpg"> <div> <div> <img src="image/2.jpg"> <div> <h1>Zootopia 1</h1> <p>The visiting of the female house viewing position that expands the experience of the female house viewing position that opens the two numbers that occur in the country</p> </div> </div> <div> <img src="image/3.jpg"> <div> <h1>Zootopia 1</h1> <p>The visiting of the female house viewing position that expands the experience of the female house viewing position that opens the two numbers that occur in the country</p> </div> </div> <!-- Controls --> <a href="#carousel-example-generic" role="button" data-slide="prev"> <span aria-hidden="true"></span> <span>Previous page</span> </a> <a href="#carousel-example-generic" role="button" data-slide="next"> <span aria-hidden="true"></span> <span>Next page</span> </a> </div>
1) In order to have no blank space or gaps left when rotating the picture, add style
.carousel{ height: 500px; background-color: #000; } .carousel .item{ height: 500px; background-color: #000; } .carousel img{ width: 100%; }2) Set the style for text to make it more beautiful
.casousel-caption p{ margin-bottom: 20px; font-size: 20px; line-height: 1.8; }The current effects are as follows
Let's continue: (Coding is being updated...)
The second part has been updated, Demo in the front-end development case based on bootstrap (II)
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.
If you still want to study in depth, you can click here to learn and attach a wonderful topic to you: Bootstrap learning tutorial