Aprendí Bootsap hoy y gané mucho. Comparto un pequeño caso aquí. Las explicaciones específicas están todas en el código, que es más intuitiva.
Mira la leyenda primero
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = dispositivo-width, escala inicial = 1.0"> <title> bootstrap tab </title> <!-Introducción de bootstrap Stylesheet-> <link RELT = "STYLESHEET" STYLESHEET " type = "text/css" href = "css/bootstrap.min.css"> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap-respuesta.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 Compartido con los empresarios sobre "El crecimiento del líder empresarial principal" y "La construcción del equipo empresarial". </p> <!-estilo de botón BTN-> <p> <a href = "#"> Aprenda más »</a> </p> </div> <div> <h1> atención especial </h1> <p> Desde comenzar con" la venta de computadoras "hasta los cinco activos centrales de la misma, bienes raíces, consumo y servicios modernos, nuevos materiales químicos y la agricultura moderna, Lenovo Holdings es sprinente de los 2014 y 2014. </p> <p> <a href = "#"> más »</a> </p> </div> <div> <h1> Nuestra historia </h1> <p> <img src =" img/bg1.png "> </p> <p> <a href ="#"> más» </a> </p> </div> </div> <hr/<hr/<hr/<hr/<hr/<hrr/<hrr/<hrr/<> <hrr/<> <hrr/<> <hrr/<hrr/<hrr/> 2013 </p> </tafeer> </div> <!-Introducción del archivo js de bootstrap-> <script type = "text/javaScript" src = "js/jQuery.min.js"> </script> <script type = "text/javaScript" src = "js/bootstrap.min.js"> </script> <script type type/"javascript" src = "js/bootstrap.min.js"> </script> <script tyup src = "js/bootstrap-tab.js"> </script> </body> </html> <!-Introducción de archivo base.css->/*diagrama de estilo de enfoque*/div.hero-unit {/*estilo de fondo, predeterminado a gris*/fondo: url (../ img/bg.png) no-depheat; Ancho: 980px; Altura: 443px; Posición: relativo; /*El valor predeterminado es 60px*/ Padding: 0; /*El valor predeterminado es 30px*/ margen: 0; border-color: gris;} div.hero-unit h1 {/*ocultar título*/display: none;}/*Los anuncios se muestran en la esquina inferior izquierda*/div.hero-unit .banner {posición: absoluto; Abajo: 0; Izquierda: 10px;}/*Los botones se muestran en la esquina inferior derecha*/div.hero-unit .btn {posición: absoluto; Abajo: 14px; Derecha: 20px;}Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.