Con las clases de diseño preprocesadas del marco frontal de Bootstrap, ya no tenemos que escribir mucho código CSS para cada elemento de etiqueta de diseño. Podemos usar las características de diseño de Bootstrap. Puede crear estilos predefinidos para títulos, párrafos, listas y otros elementos en línea, y escribir una página web muy estándar.
Aprendamos juntos. ¿Qué clases de tipos de compensación nos predefinen el marco de front-end de Bootstrap?
Primero: Bootstrap utiliza Helvetica Neue, Helvetica, Arial y Sans-Serif como su pila de fuentes predeterminada, que son las fuentes más utilizadas en todas las páginas web en la actualidad. A partir de entonces, ya no tenemos que definir estilos de fuentes de estilo global para el cuerpo. Siempre que use la familia de fuentes frontal frontal de Bootstrap, la serie de fuentes anterior se utilizará de forma predeterminada.
Es decir: Font-Family: Sans-Serif;
Verifiquemos y abra el archivo CSS marco bootstrap.css en el extremo frontal de la bota de arranque
Queridos amigos, ¿podemos solo usar las fuentes predeterminadas del marco frontal de Bootstrap? Obviamente no. Más tarde, le enseñaré cómo personalizar el marco Bootstrap y crear un marco Bootstrap que nos guste y querer efectuar.
Segundo: el marco frontal de Bootstrap predefinió el estilo CSS de H1-H6. Extraje parte del estilo definido del archivo marco CSS bootstrap.css del marco frontal de arranque. Puede ver que los valores de atributo del tamaño de fuente se definen para HN respectivamente.
H1 {Font-Size: 36px;}
H2 {Font-Size: 30px;}
H3 {Font-Size: 24px;}
H4 {Font-Size: 18px;}
H5 {Font-Size: 14px;}
H6 {Font-Size: 12px;}
El efecto real es el siguiente:
Código de página web:
Efecto de la página web:
Tercero: subtítulos en línea. Si necesita agregar un subtítulo en línea a cualquier título, simplemente agregue <small> en ambos lados del elemento, o agregue la clase.
Código de página web:
Efecto de la página web:
Cuarto: lidere la copia principal. Para agregar texto de énfasis al párrafo, puede agregar class = "plomo", que dará como resultado un texto más grande, más grueso y de línea superior, como se muestra en el siguiente ejemplo:
Código de página web:
Efecto de la página web:
La siguiente clase de marco frontal de Bootstrap ya no dará ejemplos, solo escribiré el propósito, porque puede probar pequeños efectos como el ejemplo anterior.
Quinto: enfatice que el énfasis predeterminado de HTML es <small> (establecer el texto en el 85% del tamaño del texto principal), <strong> (establecer texto en texto más grueso), <em> (establecer el texto en cursiva).
Sexto: Abreviatura, los elementos HTML proporcionan etiquetas para la abreviatura, como www o http. Bootstrap define el estilo del elemento <BBR> como un borde punteado que se muestra en la parte inferior del texto, y el texto completo se mostrará cuando el mouse se cierne sobre él (siempre que haya agregado texto al atributo de título <BBR>). Para obtener un texto de fuentes más pequeño, agregue. Inicio a <BBR>.
Séptimo: dirección. Usando la etiqueta <dirección>, puede mostrar información de contacto en la página web. Dado que <dirección> predeterminada se muestra: bloque; debe usar una etiqueta para agregar una ruptura de línea al texto de la dirección adjunta.
Octavo: BlockQuote, puede usar el predeterminado <LockQuote> junto a cualquier texto HTML. Otras opciones incluyen agregar una etiqueta <small> para identificar la fuente de la referencia y usar class.pull-right para alinear la referencia a la derecha. El siguiente ejemplo demuestra estas características:
Noveno: lista
Bootstrap admite listas ordenadas, listas desordenadas y listas definidas.
Lista ordenada: la lista ordenada se refiere a una lista que comienza con números u otros caracteres ordenados.
Lista desordenada: la lista desordenada se refiere a una lista sin un pedido específico, y es una lista que comienza con un estilo tradicional de énfasis. Si no desea mostrar estos números de énfasis, puede usar class.list-inestable para eliminar el estilo. También puede colocar todos los elementos de la lista en la misma línea usando class.list-inline.
Lista de definición: en este tipo de lista, cada elemento de la lista puede contener <dt> y <dd> elementos. <dt> significa el término de definición, como un diccionario, que se define como pertenencia (o frase). A continuación, <dd> es la descripción de <dt>. Puede usar ClassDL-Horizontal para mostrar las pertenencias en la fila <dl> lado a lado con la descripción.
Las otras clases de marco front-end de Bootstrap deben ser muy competentes de la siguiente manera, y todos deben memorizarlas y usarlas de manera competente.
.Lead resalta los párrafos
.
.text-izquierda establecida de texto alineación de texto a la izquierda
.Text Center Conjunto de la alineación del centro de texto
.Text-Right Establezca la alineación correcta del texto
.Text-Justify establece la alineación del texto, y el texto fuera de la pantalla en el párrafo se envolverá automáticamente
.Text-Nowrap Los párrafos no envuelven líneas más allá de la pantalla
.Text-Lowercase Set Texto minúscula
.Text-Superteo establecer la capitalización del texto
.Text-Capitalize establece la capitalización de la primera letra de la palabra
.initialismo El texto que se muestra en el elemento <BBR> se muestra en una fuente pequeña
.BlockQuote-Reverse establece la alineación de la derecha de referencia
.list-sinstyled elimina el estilo de lista predeterminado y se alinea a la izquierda en los elementos de la lista (en <ul> y <ol>). Esta clase solo es adecuada para elementos directos de la lista infantil (si necesita eliminar elementos de la lista anidada, debe usar este estilo en la lista anidada)
.list en línea coloca todos los elementos de la lista en la misma línea
.dl-horizontal Esta clase establece flotación y desplazamiento, y se aplica a elementos <dl> y elementos <dt>. Para implementaciones específicas, puede ver la instancia.
.Pre-scroldable Make <pre> elemento desplazable desplazable
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
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.