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. Diseño de la página
En esta lección, aprenderemos principalmente el estilo de diseño en el estilo CSS global de Bootstrap, incluido el título, el cuerpo de la página, la alineación, la lista y otro contenido general.
uno. Diseño de página
Bootstrap proporciona algunos estilos de diseño de página de diseño regular para que los desarrolladores lo usen.
1. Cuerpo de página
Bootstrap establece el tamaño de fuente global en 14px, la altura de línea de altura de línea se establece en 1.428 (es decir, 20px); El elemento de párrafo se establece en una altura de línea 1/2 (es decir, 10px); El color se establece en #333.
// Cree un texto con el párrafo resaltado <p> Bootstrap Framework </p> <p> Bootstrap Framework </p> <p> Bootstrap Framework </p> <p> Bootstrap Framework </p> <p> Bootstrap Framework </p> <p> Bootstrap Framework </p>
2. Título
// de H1 a H6 <H1> Bootstrap Framework </h1> // 36px <h2> Bootstrap Framework </h2> // 30px <h3> Bootstrap Framework </h3> // 24px <H4> Bootstrap Framework </h4> // 18px <H5> BootsTrap Framework </H5> // 14PX marco </h6> // 12px
Aprendimos de Firebug que Bootstrap refactorizó H1 ~ H6 respectivamente, y también admite la definición de clase = (. H1 ~ H6) para elementos en línea ordinarios para lograr la misma función.
// elementos en línea Use la fuente de título <Span> Bootstrap </span>
Nota: Al ver elementos a través de Firebug, también puede ver que el color de la fuente, el estilo de fuente y la altura de la línea están fijos, lo que garantiza la uniformidad. El nativo se determinará en función de la fuente preferida integrada en el sistema, y el color es el más negro.
Entre los elementos H1 ~ H6, un elemento pequeño también se puede incrustar como un subtítulo.
// Inserte el elemento pequeño en el elemento de título <H1> Bootstrap Framework <Small> Bootstrap Subtitle </small> </h1> <h2> Bootstrap Framework <Small> Bootstrap Subtitle </small> </h2> <h3> Bootstrap Framework <small> Bootstrap Subtitle </small> </h3> <h4> SUBTITLE </small> </h4> <h5> Bootstrap Framework <Small> Bootstrap Subtitle </small> </h5> <h6> Bootstrap Framework <small> Bootstrap Subtitle </small> </h6>
A través de la visualización de Firebug, encontramos que el tamaño del elemento pequeño bajo H1 ~ H3 solo representa el 65% del elemento principal. Luego, a través del cálculo (ver el estilo calculado por Firebug), el elemento pequeño bajo H1 ~ H3 es 23.4px, 19.5px y 15.6px; El tamaño del elemento pequeño en H4 ~ H6 solo representa el 75% del elemento principal, a saber: 13.5px, 10.5px y 9px. El pequeño estilo bajo H1 ~ H6 también se ha cambiado, el color se ha vuelto gris claro: #777, la altura de la fila es 1 y el grosor es 400.
3. Elementos de texto en línea
// Agregar marcas, <Mark> Elements o .Mark Class <p> Bootstrap <KARK> Frame </Mark> </p> // Una variedad de texto con líneas <el> bootstrap </el> // textet de texto <s> Bootstrap Framework </s> // Texto inútil <S> Bootstrap </sis> // Inserto de textre Texto subrayado // Una variedad de texto con énfasis <small> Bootstrap Framework </small> // 85% del tamaño de fuente estándar <strong> Bootstrap Framework </strong> // Bold 700 <em> Bootstrap Framework </em> // Tilt
4. Alinearse
// Establecer alineación de texto <p> Bootstrap Framework </p> // en el marco de Bootstrap de izquierda a izquierda </p> // Center <p> Bootstrap Framework </p> // en el marco de Bootstrap derecha </p> // alineado en ambos extractos, mal soporte <p> Bootstrap marco </p>//no line
5.
// Establecer un caso de texto en inglés <p> Bootstrap Framework </p> // minúsculas <p> Bootstrap Framework </p> // upcase <p> Bootstrap Framework </p> // upcase <p> Bootstrap Framework </p> // Capitalización de letra original
6. Abreviatura
// Bootstrap de abreviatura <BBR> Frame </BBR>
7. Texto de la dirección
// Establezca la dirección, elimine la inclinación, establezca la altura de la fila, inferior 20px <dirección> <strong> Twitter, inc. </strong> <br> 795 Folsom Ave, Suite 600 <br> San Francisco, CA 94107 <br> <BBR> P: </BBR> (123) 456-7890 </Dirección>
8. Cita texto
// Referencia de estilo predeterminada, Agregar líneas de borde, establecer el tamaño de la fuente y los márgenes internos y externos <ClankQuote> Bootstrap Framework </CLOCKQUOTE> // Inverso <BlockQuote> Bootstrap Framework </Blockquote>
9. Diseño de la lista
//Move out the default style <ul> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li></ul> //Set inline <ul> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li> Bootstrap Framework </li> <li> Bootstrap Framework </li> <li> Bootstrap Framework </li> <li> Bootstrap Framework </li> <li> Bootstrap Framework </li> <li> Bootstrap Framework </li> <li> Bootstrap </li li> </ ul> // Lista de la lista de descripción Horiztally <Dl> <dt> bootstrap </dt> <dd> bootstrap proporciona algunos estilos para los desarrolladores. </dd> </dl>
10. Código
// Código en línea <código> <section> </código> // Entrada de usuario Presione <Kbd> Ctrl +, </kbd> // bloque de código <pre> <p> Por favor, ingrese ... </p> </pre>
Bootstrap también enumera <var> para variables de marcado y <samp> para la salida del programa, pero CSS no se reescribe.
Lo anterior es el conocimiento relevante sobre el estilo de diseño de la página Bootstrap presentados por el editor. ¡Espero que te sea útil!