Como un complemento front-end que admite el diseño receptivo, Bootstrap juega un papel importante. Ya sea que navegue por la web en su teléfono, tableta o PC, puede lograr buenos resultados. ¡Todo esto nos trae Bootstrap!
Hoy hablaré principalmente sobre el diseño de la página. Esto es lo más básico. Cuando diseñamos un sitio, debemos diseñar una página estándar global y unificada para ello. Llamamos a este tipo de páginas de diseño de página, y lo que se refleja en la página son los elementos de diseño, lo que, por supuesto, es indispensable en Bootstrap.
El diseño de Bootstrap es un sistema de trama, es decir, consiste en filas y columnas. Cuando se usa, necesita envolver un contenedor .Container para el contenido de la página y el sistema Raster.
A. La clase de contenedores se usa para contenedores que son de ancho fijo y admiten diseños receptivos.
<Div> ... </div> La clase .container-fluid se usa para contenedores con 100% de ancho, ocupando todas las ventanas gráficas. <div> ... </div>
En Bootstrap, las filas y las columnas están representadas por fila y col, y hay hasta 12 unidades de columna seguidas. Col-MD-1 representa el ancho de una unidad, y Col-MD-7 representa el ancho de siete unidades. Se suman para ser hasta 12 unidades.
<VIV> <VIV> .COL-MD-1 </div> <VIV> .COL-MD-1 </div> <div> .Col-MD-1 </div> <div> .Col-Md-1 </div> <div> .Col-MD-1 </div> <div> .Col-Md-1 </ di-di. v> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> </div> div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> </div> <div> <div> .col-md-8 </div> <div> .col-md-4 </ > </div> <div> <div> .col-md-4 </div> </div> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> </div>
La segunda y tercera líneas muestran efectos similares
Tres columnas anidadas, también pueden haber columnas en la columna . Necesitamos cambiar MD a SM en este anido
<Div> <VIV> Nivel 1: .COL-SM-9 <VIV> <VIV> Nivel 2: .COL-XS-8 .COL-SM-6 </div> <div> Nivel 2: .Col-XS-4 .COL-SM-6 </div> </div> </div>
El efecto es similar al
Lo anterior es el conocimiento básico del diseño de la página Bootstrap presentada por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!