Latest web development tutorials

Bootstrap general CSS

En este capítulo, vamos a explicar la estructura subyacente de una parte clave de Bootstrap, incluyendo nuestros desarrolladores web son mejores, más rápidas y mejores prácticas más fuertes.

HTML 5 tipo de documento (DOCTYPE)

Bootstrap utiliza algunos elementos de HTML5 y propiedades CSS. A fin de que estos funcionen, es necesario utilizar el tipo de documento HTML 5 (Doctype). Así, en el inicio del proyecto Bootstrap uso contiene el siguiente segmento de código.

<!DOCTYPE html>
<html>
....
</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

dispositivos móviles prioridad es el cambio más significativo en el Bootstrap 3.

En las versiones anteriores de Bootstrap (hasta 2.x), es necesario citar manualmente otro CSS, para que todo el proyecto un apoyo amistoso para dispositivos móviles.

Ya no es así, Bootstrap 3 propio CSS por defecto es el apoyo amigable para los dispositivos móviles.

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=device-width, initial-scale=1.0">

propiedad de ancho equipos de control de ancho. Supongamos que su sitio será con diferentes dispositivos de resolución de la pantalla para buscar, a continuación, configurarlo para que el dispositivo de ancho para asegurar 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, dependerá de sus propias circunstancias!

<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

imagen sensible

<img src="..." class="img-responsive" alt="响应式图像">

Mediante la adición de img class sensible Bootstrap 3 permite que la imagen para apoyar el diseño de respuesta que es más amigable.

Veamos lo que esta clase contiene la propiedad CSS.

En el siguiente código, se puede ver la imagen img class sensible da max-width: 100%; y la altura: auto; la propiedad se puede escalar para que la imagen no supera el tamaño del elemento padre.

.img-responsive {
  display: inline-block;
  height: 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

pantalla básica mundial

Bootstrap 3 usando body {margin: 0;} para retirar el cuerpo de los márgenes.

Tenga en cuenta los siguientes parámetros para el cuerpo:

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.

tipografía

Utilice @ font-family-base, @ font-size-base y la propiedad @ line-height-base como la tipografía.

Estilo de enlace

Ajuste el color a través de la propiedad vinculación @ enlace de color global.

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 usar Normalizar para construir la coherencia entre navegadores.

Normalize.css es un archivo CSS pequeña que proporciona una mejor consistencia entre navegadores en los elementos HTML de estilo por defecto.

Contenedor (contenedor)

<div class="container">
  ...
</div>

Bootstrap clase de contenedor 3 del contenido de la página del paquete. Vamos a echar un vistazo a esta clase bootstrap.css .container archivo.

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

A través del código anterior, los márgenes izquierdo y derecho del contenedor (margen derecha, margen izquierda) decidieron por el navegador.

Tenga en cuenta que, debido al acolchado (relleno) son de ancho fijo, contenedores predeterminados no se pueden anidar.

.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.

@media (min-width: 768px) {
   .container {
      Anchura: 750px;
}

Navegador de arranque / Soporte de dispositivos

Bootstrap puede funcionar bien en la última escritorio y el navegador del terminal móvil.

Los navegadores más antiguos pueden no estar bien soportados.

En la siguiente tabla Bootstrap soporta las últimas versiones de los navegadores y plataformas:

cromo Firefox IE ópera safari
androide no es aplicable NO no es aplicable
iOS no es aplicable no es aplicable NO
Mac OS X no es aplicable
ventanas SI * NO

* El apoyo de arranque para Internet Explorer 8 y versiones posteriores de IE.