Bootstrap diseño de respuesta
breve introducción
Este tutorial muestra cómo utilizar el diseño de respuesta del diseño de página. En el curso, aprenderá Diseño web adaptable. Con la popularidad de los dispositivos móviles, la forma de permitir a los usuarios navegar a través de los dispositivos móviles a su sitio para conseguir una buena efectos visuales, ya es un problema inevitable. diseño web adaptable es una manera eficaz de lograr este propósito.
¿Cuál es al diseño web
El diseño web es sensible al permitir a los usuarios acceder a una variedad de tamaños de dispositivos para navegar por el sitio una buena eficacia visual. Por ejemplo, en un monitor de computadora que usted visita un sitio Web ya continuación buscar en los teléfonos inteligentes, el tamaño de la pantalla del teléfono inteligente es mucho más pequeño que un monitor de ordenador, pero no se sentía ninguna diferencia entre la experiencia del usuario es casi el mismo, lo que indica que el sitio en el diseño de la respuesta hace un buen trabajo.
Tenemos nuestros ejemplos de diseño de fluidos de la aplicación del rendimiento de la respuesta , y le invita a navegar a diferentes tamaños de pantalla. Puede utilizar Chrome o Firefox para ajustar la expansión ventana del navegador cambiar el tamaño.
Haga clic aquí, puede ver Bootstrap ejemplos de diseño de respuesta .
Responsive Web Design Works
diseño web adaptable con el fin de aplicar, es necesario crear una variedad de dispositivos para adaptarse al tamaño de la CSS estilos incluyen. Una vez que la página se carga en un dispositivo específico, usar una variedad de fuentes en las tecnologías de la página y de desarrollo Web, como consultas de medios (Consultas de medios), en esta ocasión, será la primera prueba del tamaño de la ventana gráfica del dispositivo y, a continuación, carga el dispositivo específico estilo.
estudio en profundidad de diseño de respuesta Web CSS
Nosotros 'bootstrap-responsive.css' aprender a aprender "el diseño de respuesta" es lograr matices. Antes de esto, se debe agregar la siguiente línea de código en el área de encabezado de la página:
<Meta name = "viewport" content = "width = dispositivo de ancho, inicial escala = 1.0"?>
etiqueta meta ventana gráfica, anula el visor predeterminado y ayudar a cargar un estilo específico ventana gráfica asociada.
propiedad de ancho a la anchura de la pantalla. Contiene un valor, como por ejemplo 320, representa 320 píxeles, o un valor de 'device-width', que se utiliza para decirle al navegador para utilizar la resolución original.
propiedad escala inicial es la relación de la ventana gráfica inicial. Cuando se establece en 1.0, el dispositivo mostrará la anchura original.
Por supuesto, se debe añadir el CSS Responsive Bootstrap, de la siguiente manera:
<Enlace href = "activos / css / bootstrap-responsive.css" rel = "stylesheet">
Ahora, si usted encuentra el archivo CSS sensible, se encuentra que en algunas declaraciones públicas de atrás (desde el número de la línea 10-22), a una variedad de superficies »@media 'comenzó. Esta es la forma de escribir un estilo adecuado para una variedad de dispositivos.
La primera área de '@media (max-width: 480px )' comenzó como un ancho máximo de 480 píxeles de estilo configuración del dispositivo.
La segunda área de '@media (max-width: 767px )' comenzó como un ancho máximo de 767 píxeles de estilo configuración del dispositivo.
La tercera área de '@media (min-width: 768px ) y (max-width: 979px)' que comenzó como una anchura mínima de 768 píxeles y una anchura máxima de 979 píxeles de estilo configuración del dispositivo.
La siguiente zona es la anchura máxima de la configuración del dispositivo estilo 979 píxeles. Por lo que es '@media (max-width: 979px )' empezar.
Las dos últimas áreas, respectivamente '@media (min-width: 980px )' y '@media (min-width: 1200px )' empezar, antes de que un dispositivo se fija a una anchura mínima de 980 píxeles en el estilo, esta última es la más pequeña ancho de programar el estilo para el dispositivo 1200 píxeles.
Por lo tanto, el papel fundamental de esta hoja de estilo es el uso de la 'min-width' y la propiedad 'max-width' para determinar el estilo utilizado en función de la anchura máxima y una anchura mínima del dispositivo.
explicación
Con el fin de hacer el diseño más sensibles, Bootstrap hacer tres cosas:
1. Modificar el ancho de las columnas de la cuadrícula.
2. Mientras hay una necesidad, que utiliza elementos de la pila, en lugar de elemento flotante. Si usted no sabe lo que es el elemento de la pila, las siguientes formas de w3.org pueden proporcionar un poco de ayuda:
elemento raíz (html) para formar una pila de contexto raíz, el otro generar el contexto de pila (incluidos los elementos en posición relativa, hay una 'z-index' valor en lugar de "auto" calculado) por un posicionamiento elemento arbitrario. No contiene requiere contexto de pila con respecto al bloque.
3. Para transmitir correctamente el título y el texto de su tamaño.
Un desarrollo más rápido para dispositivos móviles de diseño amigable
la rutina de carga tiene varios útil para el desarrollo de diseño para dispositivos móviles. Estas clases se pueden ver en 'responsive.less' en.
.visible-teléfono, un ancho de 767px y menos visibles en el teléfono, en la 979px a 768px tableta oculta a la vista, oculto desde el escritorio, que es el valor predeterminado.
.visible-tableta, un ancho de 767px y por debajo del teléfono celular oculto no está visible, 979px a 768px visible en la placa, no visible en el escritorio para ocultar, que es el valor predeterminado.
.visible-escritorio, escondido en un ancho de 767px y por debajo del teléfono no es visible, escondida en 979px a 768px Tablet invisible, visible en el escritorio, que es el valor predeterminado.
.hidden-teléfono, un ancho de 767px y esconderse en el siguiente teléfono no está visible, en el 979px a 768px Tablet visible, visible en el escritorio, que es el valor predeterminado.
.hidden-tableta, un ancho de 767px y menos visibles en el teléfono, en la Tableta 979px a 768px oculta invisible, visible en el escritorio, que es el valor predeterminado.
.hidden-escritorio, con un ancho de 767px y por debajo de la visibilidad del teléfono de 979px a 768px Tablet visible, oculto desde el escritorio, que es el valor predeterminado.
Haga clic aquí para descargar el tutorial para utilizar todo el HTML, CSS, JS y archivos de imagen.