Bootstrap, de Twitter, es el marco front-end más popular en la actualidad. Bootstrap se basa en HTML, CSS y JavaScript. Es simple y flexible, lo que hace que el desarrollo web sea más rápido.
Puntos clave para el aprendizaje:
1. Grupo auxiliar
2. Herramientas receptivas
En esta lección, aprendemos principalmente sobre las clases de grupos auxiliares de Bootstrap y las herramientas receptivas. La clase auxiliar proporciona un conjunto de clases para ayudar en el diseño de la página grupal, mientras que las herramientas receptivas utilizan consultas de medios para mostrar u ocultar cierto contenido.
uno. Auxiliar
Bootstrap proporciona algunos pequeños estilos de grupo auxiliar en términos de diseño, que se utilizan para establecer colores de texto y colores de fondo, mostrar iconos de cierre, etc.
1. Color de texto situacional
Style list Style name description text-muted Soft gray text-primary Main blue text-success Success Green text-info Information Blue text-warning Warning Yellow text-danger Danger Red // Fonts of various tones <p>Bootstrap Video Tutorial</p><p>Bootstrap Video Tutorial</p><p>Bootstrap Video Tutorial</p><p>Bootstrap Video Tutorial</p><p>Bootstrap Video Tutorial </p> <p> Tutorial de video de bootstrap </p> <p> Tutorial de video de bootstrap </p> <p> Bootstrap Video Tutorial </p> <p> Bootstrap Video Tutorial </p>
2. Situación de fondo de fondo
Lista de estilo Nombre Descripción BG-PRIMARY Main Blue BG-Success Success Verde Green BG-Info Información azul BG-Warning Warning Amarillo BG-Danger Red Dangero Tutorial </p> <p> Tutorial de video de bootstrap </p> <p> Tutorial de video de bootstrap </p> <p> Tutorial de video de bootstrap </p>
3. Cerrar botón
<botón type = "botón"> × </boton>
4. Símbolos de triángulo
<span> </span>
5. Flotar rápidamente
<div> izquierda </div> <div> derecha </div>
NOTA: Este flotador es en realidad un flotador, ¡pero se usa! Importante ha mejorado la prioridad.
6. Nivel de bloque centrado
<div> Center </div>
Nota: es margen: x auto; y mostrar: bloque; está configurado.
7. Limpia el flotador
<div> </div>
Nota: Este DIV se puede colocar frente al bloque flotante que debe limpiarse.
8. Mostrar y esconderse
<div> show </div> <div> Hidden </div>
dos. Herramientas receptivas
Al buscar en los medios, a veces se requiere que se muestre y oculto algo de contenido para diferentes tamaños de pantalla. La clase de herramientas receptivas proporciona esta solución.
// Pantalla de activación de pantalla súper pequeña <Div> Bootstrap </div> // Activación de pantalla súper pequeña Ocultar <div> bootstrap </div>
Nota: Hay tres variantes para el contenido mostrado, a saber: bloque, bloque en línea y en línea.
Lo anterior es el contenido relevante de las clases de grupos auxiliares de componentes de Bootstrap y herramientas receptivas que el editor le presentó. ¡Espero que te sea útil!