This article shares the implementation code of the first Bootstrap page for your reference. The specific content is as follows
Reproduction image:
Implementation code:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /><!--To ensure proper drawing and touch screen scaling, the viewport metadata tag needs to be added in the <head>. --> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script> <script src="js/bootstrap.min.js"></script> <style> .masthead{ padding: 110px 0px 110px; margin-bottom: 0px; } .masthead:after{ content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(img/bg1.png) repeat center center; opacity: 0.4; } .masthead h1{ font-weight: 700; font-size: 700%; } .active{font-size: 120%;font-weight: bold;} .masthead-a{ opacity: 0.5; color: white; font-size: medium; } .masthead-a:hover{ color: white; opacity: 1; } .modal-header li i{opacity: 0.5;} .text-align{ display: inline; } .img-ls{ width: 23%; border: 1px solid hsl(0, 0%, 87%); margin-right: 2%; padding: 4px 0px; margin-bottom: 6%; min-height: 350px; max-height: 600px; float: left; } .img-ls img{ width: 97%; height: auto; } .img-ls img:hover{ cursor: pointer; } .footer{ padding: 50px 50px; } .navbar-nav li{display: inline;} </style> </head> <body> <div> <!-- Define the tone, position, size and background of the internal framework --> <div> <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <ul><li><a href="#">Bootstrap Chinese website</a></li></ul> <div role="navigation"> <ul> <li><a href="#">Bootstrap2 Chinese document</a></li> <li><a href="#">Bootstrap3 Chinese Documentation</a></li> <li><a href="#">Bootstrap 4.0 Preview</a></li> <li><a href="#">Less Tutorial</a></li> <li><a href="#">jQuery API</a></li> <li><a href="#">Website Example</a></li> <li><a href="#">Front-end High-Salary Positions</a></li> <li><a href="#">About </a></li> </div> </div> </div> <div> <div> <h1>Bootstrap</h1> <h2>The concise, intuitive and powerful front-end development framework makes web development faster and simpler. </h2> <p><a href="#">Bootstrap3 Chinese Documents (v3.3.5)</a></p> <p><a href="#">Bootstrap2 Chinese Documents (v2.3.2)</a></p> </div> </div> <div> <div> <ul> <li>Bootstrap Technology Exchange Group: 318630708 <i>|</i> </li> <li>Bootstrap Q&A Community <i>|</i> </li> <li>Sina Weibo: @Bootstrap Chinese Network</li> </ul> </div> </div> <div> <div> <div> <h2>Bootstrap related high-quality project recommendations</h2> <p>These projects either supplement Bootstrap or are developed based on Bootstrap</p> </div> <div> <img src="img/codeguide.png" /> <h3> <a href="javascript:void(0)">Bootstrap encoding specification<br/><small>by @mdo</small></a> </h3> <p> Bootstrap encoding specification: specifications for writing flexible, stable, and high-quality HTML and CSS code. </p> </div> <div> <img src="img/jqueryapi.png" /> <h3> <a href="javascript:void(0)">jQuery API <br/><small>Chinese Manual</small></a> </h3> <p> The jQuery API Chinese Documentation/Manual Translated from the latest jQuery 1.11.x and 2.1.x versions. </p> </div> <div> <img src="img/w3schools.png" /> <h3> <a href="javascript:void(0)">w3schools<br/><small>Original domestic mirror</small></a> </h3> <p> w3schools.com is the most popular front-end technical tutorial website, but domestic users have always been unable to access it, and the domestic Chinese translation version is very out of date. Therefore, I made a mirror image and hope that students with good English can go and read the original tutorial directly! </p> </div> <div> <img src="img/expo.png"/> <h3> <a href="javascript:void(0)">Excellent site selection<br/><small>Bootstrap website example</small></a> </h3> <p> The Bootstrap excellent site selection channel collects many beautifully designed and creative websites based on Bootstrap. </p> </div> </div> </div> <footer> <div> <img src="img/logo.png" /> <h5> <p>The Chinese version of the open source projects listed on this website is translated and compiled by members of the <a href="javascript:void(0)"><small>Bootstrap Chinese website</small></a>, and is published in accordance with the <a href="javascript:void(0)"><small>CC BY 3.0</small></a> protocol. </p> </h5> </div> <div> <div> <h4>About </h4> <h4> <ul> <li><a href="javascript:void(0)"><small>About us</small></a></li> <li><a href="javascript:void(0)"><small>Advertising cooperation</small></a></li> <li><a href="javascript:void(0)"><small>Friendly links</small></a></li> <li><a href="javascript:void(0)"><small>Recruitment</small></a></li> </h4> </div> <div> <h4>Contact information</h4> <h4> <ul> <li><a href="javascript:void(0)"><small>Sina Weibo</small></a></li> <li><a href="javascript:void(0)"><small>Email</small></a></li> </ul> </h4> </div> <div> <h4>Official website</h4> <h4> <ul> <li><a href="javascript:void(0)"><small>Laravel Chinese</small></a></li> <li><a href="javascript:void(0)"><small>Ghost China</small></a></li> </ul> </h4> </div> <div> <h4>Sponsor</h4> <h4> <ul> <li><a href="javascript:void(0)"><small>UCloud</small></a></li> <li><a href="javascript:void(0)"><small>You can shoot the cloud</small></a></li> </ul> </h4> </div> </div> </div> <h4><a href="javascript:void(0)"><small>Beijing ICP No. 11008151</small></a><small> | Beijing Public Security Network Security 11010802014853</small></h4> </footer> </body></html>I believe everyone must not be satisfied yet. Let’s share a few articles with you below:
"Bootstrap Learning Tutorials Worth Sharing and Collection" "Bootstrap Learning Tutorials"
The above is all about this article, I hope it will be helpful to everyone's learning.