Bootstrap 3 CSS general
objetivo
En este tutorial, hemos hablado de los puntos CSS 3 Bootstrap. A continuación vamos a explicar Bootstrap 3 de trabajar varios factores clave.
HTML 5 tipo de documento (DOCTYPE)
Bootstrap 3 utilizado algunos elementos de HTML 5 y CSS atributos. A fin de que estos funcionen, es necesario utilizar el tipo de documento HTML 5 (Doctype).
<! DOCTYPE html> <Html lang = "es"> ... </ Html>
Si el comienzo de la página en Bootstrap creado no utiliza el tipo de documento HTML 5 (Doctype), que podría enfrentar algunos navegadores muestran problemas de inconsistencia que incluso pueden enfrentar ciertas situaciones incoherentes bajo que no puede pasar la validación W3C estándar en su código .
prioridad de los dispositivos móviles
Este es probablemente el cambio más significativo en el Bootstrap 3. En las versiones anteriores de Bootstrap (hasta 2.x), es necesario citar manualmente otro CSS, con el fin de hacer que el proyecto junto con el principal dispositivo de CSS-amigable móvil. Ya no es así, Bootstrap 3 propio CSS por defecto es el dispositivo móvil amigable.
Bootstrap 3 está diseñado prioridad de dispositivo móvil, seguido por el escritorio. Esto es en realidad un cambio muy oportuna, a medida que más y más personas utilizan dispositivos móviles.
Para hacer sitio web Desarrollo de rutina de carga para dispositivos móviles amigables para asegurar la representación adecuada y el zoom de la pantalla táctil, es necesario agregar etiquetas meta ventana gráfica en la cabeza de la página, de la siguiente manera:
<Meta name = "viewport" content = "width = dispositivo de ancho, inicial escala = 1.0"?>
propiedad de ancho equipos de control de ancho. Supongamos que su sitio será con diferentes dispositivos de resolución de pantalla para navegar, a continuación, configurarlo para que el dispositivo de ancho para asegurarse de que se representa correctamente en diferentes dispositivos.
inicial escala = 1.0 para garantizar la página se carga, la proporción de 1: 1 presentación, no habrá escalado.
En el navegador del dispositivo móvil, añadiendo escalable de usuario = no para la etiqueta meta ventana gráfica para desactivar la función de escala (zoom). Por lo general, de máxima escala = 1,0 y fácil escalable = no están juntos. Después de esta función de zoom está desactivado, el usuario puede desplazarse por la pantalla, puede hacer que su sitio se vea más como una sensación aplicación nativa. Tenga en cuenta que, de esta manera no se recomienda el uso de todos los sitios, o depende de sus propias circunstancias!
imagen sensible
Mediante la adición de img class sensible deja Bootstrap 3 fotografías para apoyar el diseño de respuesta que es más amigable. Veamos lo que esta clase contiene propiedades de CSS. Su esencia es dar a la imagen un max-width: 100%; y la altura: auto; propiedad permite el escalado de imágenes, no exceda el tamaño del elemento padre.
.img sensible {
display: inline-block;
altura: auto;
max-width: 100%;
}
Esto indica que la imagen asociada representa como inline-block. Al configurar las propiedades de visualización del elemento es inline-block, elemento en línea con respecto al contenido de la forma de presentación alrededor de ella, pero con la diferencia en línea es que en este caso se puede establecer la anchura y la altura.
Altura Marco: altura automático, elementos relacionados depende del navegador.
Ajuste de ancho máximo es 100% anula cualquier ancho especificado por la propiedad de ancho. Permite imágenes para apoyar el diseño de respuesta que es más amigable.
Pantalla Global, la disposición y enlaces
Bootstrap 3 usando body {margin: 0;} para retirar el cuerpo de los márgenes.
Considere el siguiente conjunto de órgano pertinente
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: # 333333;
background-color: #ffffff;
}
La primera regla para establecer el estilo de fuente predeterminado para el cuerpo "Helvetica Neue", Helvetica, Arial , sans-serif.
La segunda regla del texto del tamaño de fuente predeterminado de 14 píxeles.
La tercera regla es para ajustar la altura de fila predeterminado es 1,428571429.
La cuarta regla establece el color predeterminado de texto a # 333333.
regla final establece el color de fondo por defecto es blanco.
El estilo por defecto para un enlace, los siguientes ajustes
a: hover
a: focus {
color: # 2a6496;
text-decoration: underline;
}
a: focus {
Esquema: delgada de puntos # 333;
bosquejo: 5px de auto-enfoque -webkit-anillo de color;
esbozar-offset: -2px;
}
Por lo tanto, cuando se pasa el ratón sobre el enlace o enlaces que utiliza el color se establece en # 2a6496. Al mismo tiempo, habrá un subrayado.
Además, los enlaces que utiliza, habrá un código de color para la delgada línea discontinua # 333. Otra regla es establecer el contorno de 5 píxeles de ancho, y para el navegador basado en WebKit tiene un webkit-enfoque-anillo de color extensiones del navegador. desplazamiento de contorno se establece en píxeles -2.
Todos estos estilos se pueden encontrar en la scaffolding.less.
Evitar inconsistencias entre navegadores
Bootstrap 3, al igual que su versión anterior, utilice el Normalizar, para crear coherencia entre navegadores.
envase
Bootstrap clase de contenedor 3 del contenido de la página del paquete. Vamos a echar un vistazo a la siguiente clase
.container {
margin-right: auto;
margin-left: auto;
}
A través del código anterior, los márgenes izquierdo y derecho del contenedor por el navegador decidir.
.container: antes,
.container: tras {
display: table;
contenido: "";
}
Esto genera pseudo-elementos. Ajuste de la tabla de visualización, se creará un table-cell anónimo y un nuevo contexto de formato de bloque. : Antes de pseudo-elemento para evitar el colapso margen ,: después de pseudo-elementos para limpiar flotador.
Si el atributo conteneditable aparece en HTML, ya que algunos de los insectos Opera, crear un espacio alrededor de estos elementos. Esto se puede hacer usando el contenido: "" para reparar.
.container: tras {
clear: both;
}
Se crea un pseudo-elemento, y asegura que toda la embarcación flotante que contiene todos los elementos.
Bootstrap 3 CSS tiene una aplicación en respuesta a preguntas de los medios, las consultas de medios en diferentes valores umbrales se especifican ancho máximo para el envase, con el fin de que coincida con el sistema de red.