I learned bootsap today and gained a lot. I share a small case here. The specific explanations are all in the code, which is more intuitive.
Look at the legend first
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Bootstrap tab</title> <!-- Introducing Bootstrap stylesheet--> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css"> <link rel="stylesheet" type="text/css" href="css/base.css"></head><body><!-- container Set the width of the div to 940px and display in the center--><div> <!-- hero-unit Set the focus view unit--> <div> <h1>Lenovo Holdings</h1> <p><img src="img/bg2.png"></p> <p><a href="#">More»</a></p> </div> <!-- The grid layout defaults to 12 grids, and each sub-div is set to 4 grids, that is, 228px--> <div> <div> <h2>Company topics</h2> <p>On December 2, 2012, the Lenovo Star Entrepreneurship Lecture Hall was held in Changzhou, and Liu Chuanzhi shared with entrepreneurs on "the growth of the top entrepreneurial leader" and "the construction of the entrepreneurial team". </p> <!-- btn button style--> <p><a href="#">Learn more»</a></p> </div> <div> <h1>Special attention</h1> <p>From starting with "selling computers" to integrating the five core assets of IT, real estate, consumption and modern services, new chemical materials, and modern agriculture, Lenovo Holdings is sprinting to go public between 2014 and 2016. </p> <p><a href="#">More»</a></p> </div> <div> <h1>Our History</h1> <p><img src="img/bg1.png"></p> <p><a href="#">More»</a></p> </div> </div> <hr/> <footer> <p>© Company 2013</p> </footer></div><!-- Introducing Bootstrap's js file--><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><script type="text/javascript" src="js/bootstrap-tab.js"></script></body></html><!-- Introducing base.css file-->/*Focus style diagram*/div.hero-unit { /*Background style, default to gray*/ background: url(../img/bg.png) no-repeat; width: 980px; height: 443px; position: relative; /*Default is 60px*/ padding: 0; /*Default is 30px*/ margin: 0; border-color: gray;}div.hero-unit h1{ /*Hide title*/ display: none;}/*Ads are displayed in the lower left corner*/div.hero-unit .banner { position: absolute; bottom: 0; left:10px;}/*Buttons are displayed in the lower right corner*/div.hero-unit .btn { position: absolute; bottom: 14px; right: 20px;}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.