Este artículo comparte el código de implementación de la primera página Bootstrap para su referencia. El contenido específico es el siguiente
Imagen de reproducción:
Código de implementación:
<! DocType html> <html> <head> <meta charset = "utf-8" /> <meta name = "viewport" content = "width = dispositivo-width, escala inicial = 1" /> <!-Para garantizar la escalada adecuada de dibujo y pantalla táctil, se debe agregar la etiqueta de metadatos de vistas en el <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>. relleno: 110px 0px 110px; Margen-Bottom: 0px; } .MasThead: After {content: ''; Pantalla: bloque; Posición: Absoluto; arriba: 0; Derecha: 0; Abajo: 0; Izquierda: 0; Antecedentes: URL (IMG/BG1.PNG) Repita el centro central; Opacidad: 0.4; } .MasThead H1 {Font-Weight: 700; tamaño de fuente: 700%; } .Active {Font-Size: 120%; FONT-Weight: Bold;} .MasMeThead-A {Opacidad: 0.5; Color: blanco; tamaño de fuente: medio; } .MASThead-A: Hover {Color: White; Opacidad: 1; } .modal-header li i {opacidad: 0.5;} .Text-align {display: inline; } .img-ls {ancho: 23%; borde: 1px sólido HSL (0, 0%, 87%); margen-derecha: 2%; relleno: 4px 0px; margen de fondo: 6%; Min-altura: 350px; Max-Alta: 600px; flotante: izquierda; } .img-ls img {ancho: 97%; Altura: Auto; } .img-ls img: hover {cursor: pointer; } .footer {relleno: 50px 50px; } .navbar-nav li {visual <span> </span> </boton> <ul> <li> <a href = "#"> sitio web chino de bootstrap </a> </li> </ul> <div role = "navegación"> <ul> <li> <a href = "#"> documento chino de bootstrap2 </a> </li> <li> <a href = "#"> bootstrap3 chino documentación </a> </ae> </ae> </aa> </aa> </aa </aa> </aa </aa> </aa> </aa </aa> </aa> </aa> </aa> </aa> </aa </aa </aa> </aa </ae </aa> </aa> </aa> </aa </aa </liol. <li> <a href = "#"> Bootstrap 4.0 Vista previa </a> </li> <li> <a href = "#"> menos tutorial </a> </li> <li> <a href = "#"> jQuery api </a> </li> <li> <a href = "#"> ejemplo del sitio web </a> </li> <a href. Posiciones de alto rendimiento </a> </li> <li> <a href = "#"> sobre </a> </li> </div> </div> </div> <div> <div> <h1> bootstrap </h1> <h2> El marco de desarrollo frontal conciso, intuitivo y poderoso hace que el desarrollo web sea más rápido y simple. </h2> <p> <a href = "#"> Bootstrap3 documentos chinos (v3.3.5) </a> </p> <p> <a href = "#"> bootstrap2 documentos chinos (v2.3.2) </a> </p> </div> </div> <div> <div> <li> <li> bootstrap technology group: 318630708 </li> <li> Bootstrap Q&A Community <i> | </i> </li> <li> sina weibo: @bootstrap chino network </li> </ul> </div> </div> <div> <div> <div> <h2> bootstrap recomendaciones de proyectos de alta calidad relacionados </h2> <p> estos proyectos bootstrap o están desarrollados en base a bootstrap bootstrap. <div> <img src = "img/codeguide.png"/> <h3> <a href = "javascript: void (0)"> bootstrap especificaciones de codificación <br/> <small> por @mdo </small> </a> </h3> <p> Especificación de encoderada de botas código. </p> </div> <div> <img src = "img/jQueryapi.png"/> <h3> <a href = "javascript: void (0)"> jQuery api <br/> <small> chino manual </small> </a> </h3> <p> El documento chino jQuery API/manual translorado de la última transmisión de la última transmisión del último manual de Jquery. versiones. </p> </div> <div> <img src = "img/w3schools.png"/> <h3> <a href = "javascript: void (0)"> w3schools <br/> <small> Mirror doméstico original </small> </a> </h3> <p> w3schools.com es el sitio web más popular, pero no ha sido el sitio web técnico original, pero los usuarios técnicos originales, pero los usuarios técnicos originales, pero no han sido los usuarios técnicos más populares. Para acceder a él, y la versión nacional de traducción china está muy desactualizado. Por lo tanto, hice una imagen de espejo y espero que los estudiantes con buen inglés puedan ir y leer el tutorial original directamente. </p> </div> <div> <img src = "img/expo.png"/> <h3> <a href = "javascript: void (0)"> Excelente selección del sitio <br/> <small> Bootstrap Sitio web Ejemplo </small> </a> </h3> <p> El canal de bootstrap Excelente canal de sitios colecciona muchos belleza de diseño y creatividad. </p> </div> </div> </div> <footer> <div> <img src = "img/logo.png"/> <h5> <p> La versión china de los proyectos de código abierto enumerados en este sitio web está traducido y compilado por los miembros de los miembros <a href = "JavaScript: void (0)"> <small> Bootstrap Sitiohm <a href = "javaScript: void (0)"> <small> cc por 3.0 </small> </a> Protocolo. </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> enlaces amigables </small> </a> </li> <li> <a href = "javascript: void (0)"> <small> reclutamiento </small> </a> </li> </h4> </div> <div> <h H4> href = "javaScript: void (0)"> <small> sina weibo </small> </a> </li> <li> <a href = "javaScript: void (0)"> <sits> correaje </small> </a> </li> </ul> </h4> </div> <div> <hemio <h4> href = "javaScript: void (0)"> <small> Laravel chino </small> </a> </li> <li> <a href = "javascript: void (0)"> <sits> fantasma China </small> </a> </li> </ul> </h4> </div> <div> <h4> sponsor </h4> <h4> <h4> <hi <h4 <h4> href = "javaScript: void (0)"> <small> uCloud </small> </a> </li> <li> <a href = "javascript: void (0)"> <sitch> puede disparar la nube </small> </a> </li> </ul> </h4> </div> </div> </div> <h4> href = "javascript: void (0)"> <small> beijing icp No. 11008151 </small> </a> <small> | Beijing Public Security Network Security 11010802014853 </small> </h4> </fouter> </body> </html>Creo que no todos deben estar satisfechos todavía. Compartamos algunos artículos con usted a continuación:
"Tutoriales de aprendizaje de bootstrap que vale la pena compartir y recopilar" "Tutoriales de aprendizaje de bootstrap"
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.