English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
En este capítulo, explicaremos las partes clave de la estructura subyacente de Bootstrap, incluyendo las mejores prácticas que nos hacen desarrollar web mejor, más rápido y más robusto.
Bootstrap utiliza algunos HTML5 Elementos y atributos CSS. Para que estos funcionen correctamente, necesita usar HTML5 Tipo de documento (Doctype). Por lo tanto, incluya el siguiente fragmento de código al principio del proyecto Bootstrap.
<!DOCTYPE html> <html> .... </html>
Si no se utiliza HTML en el principio de la página creada con Bootstrap5 del tipo de documento (Doctype), podría enfrentar problemas de visualización inconsistentes en algunos navegadores, e incluso podría enfrentar inconsistencias en ciertas situaciones específicas, lo que podría hacer que su código no pase3estándar de validación de C.
El diseño para dispositivos móviles es una prioridad en Bootstrap 3 la característica más notable.
En versiones anteriores de Bootstrap (hasta 2.x), necesitará referenciar manualmente otro CSS para que todo el proyecto sea compatible con dispositivos móviles.
Ahora es diferente, Bootstrap 3 El CSS predeterminado ya es compatible con dispositivos móviles.
Bootstrap 3 el objetivo de diseño es el dispositivo móvil primero, luego el dispositivo de escritorio. Esto es en realidad un cambio muy oportuno, ya que cada vez más usuarios utilizan dispositivos móviles.
Para que los sitios web desarrollados con Bootstrap sean amigables con los dispositivos móviles, asegúrese de agregar adecuadamente en la sección head de la página meta viewport etiqueta, como se muestra a continuación:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width propiedad controla el ancho del dispositivo. Supongamos que su sitio web será visitado por dispositivos con diferentes resoluciones de pantalla, entonces configurelo como device-width para asegurar que se muestre correctamente en diferentes dispositivos.
initial-scale=1.0 Asegúrese de que la página se cargue con 1:1 en proporción, no habrá ningún escalado.
En los navegadores de dispositivos móviles, al establecer meta viewport se añade a la etiqueta user-scalable=no puede deshabilitar su función de escalado (zooming).
En circunstancias normales,maximum-scale=1.0 con user-juntos scalable=no deshabilitan la función de escalado. Después de deshabilitar esta función, los usuarios solo podrán desplazarse por la pantalla, lo que dará a su sitio web una sensación más nativa de aplicación.
¡Atención, no recomendamos que todos los sitios web utilicen este método, debe basarse en su propia situación!
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<img src="..." alt="imagen responsive">
Agregando img-responsive La clase permite que Bootstrap 3 La imagen en la que se encuentra tiene una mejor compatibilidad con el diseño responsive.
Vamos a ver ahora qué propiedades CSS contiene esta clase.
En el siguiente código, podemos verimg-responsive La clase le da a la imagen un max-ancho: 100%; y la propiedad height: auto; permiten que la imagen se ajuste proporcionalmente, sin superar el tamaño de su elemento padre.
.img-responsive {
display: block;
height: auto;
max-ancho: 100%;
}lo que indica que las imágenes relacionadas se presentan como block. Cuando coloca el atributo display del elemento en block, se muestra como elemento de bloque.
establecer height: autodepende del navegador para los elementos relacionados.
establecer max-width para 100% reescribirá cualquier ancho especificado a través de la propiedad width. Esto hace que las imágenes sean más amigables para el diseño responsivo.
Si necesita que las imágenes que utilizan .img-Las imágenes con la clase responsive se alinean horizontalmente en el centro, use .center-La clase block, no usar .text-center.
Bootstrap 3 Usar body {margin: 0;} para quitar el margen de body.
Vea a continuación la configuración de body:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}La primera regla establece el estilo de fuente predeterminado de body en "Helvetica Neue", Helvetica, Arial, sans-serif.
La segunda regla establece el tamaño de fuente predeterminado del texto en 14 píxeles.
La tercera regla establece la altura de línea predeterminada en 1.428571429.
La cuarta regla establece el color de texto predeterminado en #333333.
La última regla establece el color de fondo predeterminado en blanco.
Usar @font-family-base, @font-size-base y @line-height-La propiedad base como estilo de alineación.
A través de la propiedad @link-color establece el color global de los enlaces.
Para el estilo predeterminado de los enlaces, se establece como follows:
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-enfoque-anillo-color;
outline-offset: -2px;
}Por lo tanto, cuando el cursor se coloca sobre el enlace o se hace clic en el enlace, el color se establecerá en #2a6496Al mismo tiempo, también se mostrará una línea de subrayado.
Además, los enlaces clicados mostrarán un código de color #333 Otra regla es establecer el contorno en 5 Ancho de píxeles, y tiene una delgada línea de contorno virtual para navegadores basados en webkit. -webkit-enfoque-anillo-color de la extensión del navegador. El desplazamiento del contorno se establece en -2 píxeles.
Todos estos estilos se pueden encontrar en scaffolding.less.
Bootstrap utiliza Normalize para establecer consistencia entre navegadores.
Normalize.css es un archivo CSS muy pequeño que proporciona una mayor consistencia en los estilos por defecto de los elementos HTML en navegadores.
<div> ... </div>
Bootstrap 3 de container clase se utiliza para envolver el contenido de la página. Vamos a ver este .container clase。
.container {
relleno-derecha: 15px;
relleno-izquierda: 15px;
margen-derecha: auto;
margen-izquierda: auto;
}A través del código anterior, se asignan los márgenes laterales externos (margen-derecha, margen-izquierda) se deja a criterio del navegador.
Tenga en cuenta que, debido al ancho fijo del relleno (padding), el contenedor por defecto no es anidado.
.container:before,
.container:after {
display: table;
contenido: " ";
}Esto generará un elemento pseudo. Establecer display para tabla，creará una tabla anónima-célula y un nuevo contexto de formato de bloque.:before elemento pseudo previene el colapso del margen superior,:after elemento pseudo para limpiar la flotación.
si conteneditable La propiedad aparece en HTML, debido a algunos errores de Opera, se crea un espacio alrededor de los elementos anteriores. Esto se puede hacer mediante el uso de contenido: " " para arreglar.
.container:after {
clear: both;
}crea un elemento pseudo y asegura que todos los contenedores contengan todos los elementos flotantes.
Bootstrap 3 CSS tiene una solicitud de consulta de medios que establece un max-ancho, utilizado para coincidir con el sistema de cuadrícula.
@media (min-ancho: 768px) {
.container {
ancho: 750px;
}Bootstrap puede funcionar muy bien en los navegadores de escritorio y móviles más recientes.
Los navegadores antiguos pueden no ser bien soportados.
La siguiente tabla muestra los navegadores y plataformas más recientes que Bootstrap admite:
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | SÍ | SÍ | No se aplica | No se aplica | No se aplica |
| iOS | SÍ | No se aplica | No se aplica | No se aplica | SÍ |
| Mac OS X | SÍ | SÍ | No se aplica | SÍ | SÍ |
| Windows | SÍ | SÍ | SÍ* | SÍ | No se aplica |
* Bootstrap admite Internet Explorer 8 y versiones de IE más recientes.