1. Construya un entorno de desarrollo de bootstrap
1. Descargar bootstrap, http://www.bootcss.com/
2. Descargue jQuery y Access http://code.jquery.com/jquery-2.0.3.min.js directamente a través de IE
3. Importar Bootstrap y JQuery's JS, archivos CSS y etiquetas <seta> de .Viewport en la página HTML. Esta etiqueta se puede modificar para mostrar en la mayoría de los dispositivos móviles, como si LT IE 9 ..., para la compatibilidad debajo de IE9.
La plantilla es la siguiente
<! DOCTYPE HTML> <HTML> <HEAD> <meta charset = "utf-8"> <meta content = "width = dispositivo-width, inicial-scale = 1.0" name = "Viewport"/> <title> Insertar aquí </title> <ink href = "css/bootstrap.min.css" rel = "stylesheet" medios "medios". Es decir, 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/expond.js/1.3.0/rpond.min.min.js" <
II. Sistema de rejilla
1. Boostrap separa el escritorio en una tabla con 12 filas * n columnas para el diseño, que es el núcleo de Boostrap.
2..
3. Col-xx-* Realizar división a nivel de columna, como se muestra en la figura a continuación
<Div> <VIV> <VIV> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> </div> <div> <div> 5 </div> <div> 6 </div> <div> 7 </div> <div> 8 </div> </div> </div> </div> </div> </div> </div> </div> </div>
4. Compensación de columna, implementado a través de col-xx-ofset-*
<Div> <VIV> <VIV> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <11/div> 5 </div> <div> 6 </div> <div> 7 </div> </div> </div> </div> </div> </div> </div>
5. La clasificación de columnas se puede lograr mediante .Col-XX-Push-* y .Col-XX-Pull-* para implementar la clasificación de columnas izquierda o derecha.
<VIV> <VIV> <VIV> 1 </div> <div> 2 </div> <div> 3 </div> </div> <div> <div> 5 </div> <div> 6 </div> <div> 7 </div> </div> </div> </div> </div> </div> </div>
6. Columnas de anidación y fila de nido en col.
<Div> <VIV> 1 </div> <VIV> 2 </div> <div> 3 </div> <div> <div> <div> <div> 5 </div> <div> 6 </div> <div> 7 </div> </div> </div> </siv> </div> </div> </div> </div> </div> </div> </div> </div> <Viv>
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntar dos temas emocionantes a usted: Tutorial de aprendizaje Bootstrap Bootstrap Tutorial práctico
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.