¿Qué tal si usamos Bootstrap para desarrollar rápidamente una interfaz simple?
Historia
Bootstrap fue desarrollado por Mark Otto y Jacob Thornton de Twitter. Bootstrap se lanzó como código abierto en GitHub en agosto de 2011.
Últimamente he tenido mucho tiempo libre, así que hoy les presentaré Bootstrap, un marco de "estilo" de interfaz de usuario. La arquitectura general de Bootstrap
¿Por qué debería introducirse en la introducción? ¿Llamo a Bootstrap un marco de estilo front-end? Tal vez este nombre no sea muy preciso, pero creo que este nombre puede permitir que algunos principiantes comprendan y comprendan más rápidamente qué es Bootstrap. Cuando resumo algo, no me gusta usar palabras elevadas para profundizar mi comprensión de un determinado punto de conocimiento, sino que me gusta usar algunas palabras fáciles de entender para describir este punto de conocimiento. Aunque esta descripción puede ser algo inexacta, creo que no es gran cosa, porque dicha descripción puede permitir a los principiantes comprender el conocimiento más rápidamente. Porque también tengo tanta confusión al aprender conocimientos. Los documentos oficiales de algunos conocimientos son de muy alto nivel. De hecho, para decirlo sin rodeos, es solo para encapsular algunas cosas anteriores para que el desarrollo sea más simple y rápido. Entonces, el marco Bootstrap que estoy compartiendo aquí es el mismo. El contenido también está organizado para permitir que los principiantes lo comprendan mejor. Porque yo también era principiante cuando comencé. Siento que este tipo de organización puede ayudarme a comprender el conocimiento más rápido y mejor.
Para Bootstrap, lo primero que hay que presentar es su estructura general: de qué está hecho. Al mirar la imagen a continuación, creo que podrás comprender rápidamente de qué está hecho realmente Bootstrap.
En la imagen de arriba, puede ver claramente que Bootstrap consta de los siguientes componentes principales:
Sistema de 12 cuadrículas: es decir, la pantalla está dividida en 12 planos (columnas). .
Utilice filas para organizar elementos (cada fila consta de 12 columnas) y luego coloque el contenido dentro de las columnas.
Los desplazamientos de columnas se controlan mediante col-md-offset-*.
Componentes de diseño básicos: Bootstrap proporciona varios componentes de diseño básicos. Por ejemplo, composición tipográfica, código, tablas, botones, formularios, etc.
Jquery: todos los complementos de JavaScript para Bootstrap dependen de Jquery. Si desea utilizar estos complementos JS, debe hacer referencia a la biblioteca Jquery. Es por eso que, además de los archivos JS y CSS de Bootstrap, también necesitamos hacer referencia a la biblioteca Jquery.
Componentes CSS: Bootstrap viene preimplementado con muchos componentes CSS para nosotros. Por ejemplo, cuadros desplegables, grupos de botones, navegación, etc. Esto significa que el contenido de Bootstrap define una serie de estilos CSS para nosotros que puede aplicar directamente a elementos anteriores, como cuadros desplegables.
El complemento de JavaScript-Bootstrap también implementa algunos complementos de JS para nosotros. Podemos usar las funciones proporcionadas por los complementos para completar algunas funciones comunes sin que tengamos que reescribir el código JS para implementar cosas. como cuadros de aviso y plantillas. Efecto como la ventana de estado.
Diseño responsivo: este es un concepto de diseño. La capacidad de respuesta significa que la página se ajustará automáticamente según el tamaño de la pantalla, de modo que la página de inicio pueda funcionar bien en pantallas de diferentes tamaños.
Bootstrap consta de los componentes anteriores. Cada componente se presentó brevemente anteriormente y lo que sigue es solo una introducción detallada de cada componente a través de algunos ejemplos.
2. 12 sistemas de cuadrícula
Los 12 sistemas de cuadrícula definidos por Bootstrap son para un mejor diseño. Cada marco de front-end definirá primero un buen sistema de diseño.
Internamente, Bootstrap usa filas y columnas para crear diseños de página. Su diseño tiene varios principios:
Las filas deben estar contenidas en .container (ancho fijo) o .container-fluid (100% de ancho)
Cada fila contiene 12 columnas
p>Colocar contenido en cada columna
En el sistema grid de Bootstrap, se divide en 4 categorías según el ancho del navegador. Estos valores son: auto (100%), 750px, 970px, 1170px.
Los estilos correspondientes son extra pequeño (xs), pequeño (sm), pantalla mediana (md) y grande (lg).
Estos deben lograrse definiendo el ancho mínimo a través de consultas de medios. Por lo tanto, Bootstrap puede hacer que las páginas web sean compatibles con tamaños grandes pero incompatibles con tamaños pequeños.
En el framework Bootstrap, el límite de tamaño de pantalla está predefinido, el cual se define a través de consultas de medios. Se define de la siguiente manera:
/* Pantalla ultra pequeña (dispositivo móvil, menos de 768 px) */
/* No hay código relacionado con consultas de medios porque este es el valor predeterminado configuración de Bootstrap (¿Recuerda que Bootstrap es móvil primero?) */
/* Pantalla pequeña (tableta, 768 px o más) */
@media (ancho mínimo: @ screen -sm-min) { ...}
/* Pantalla mediana (monitor de escritorio, mayor o igual a 992px) */
@media (min-width: @ screen- md-min) { ...}
/* Pantalla grande (monitor de escritorio grande, mayor o igual a 1200 px) */
@media (min-width: @screen- lg-min) { ...}
De hecho, el desarrollo de aplicaciones Win8 también aplica consultas de medios a aplicaciones responsivas. Entonces, si escucha sobre el sistema receptivo en el futuro, se sentirá muy profundo. De hecho, el marco define la consulta de medios para nosotros si el ancho mínimo correspondiente a un determinado tipo de pantalla se define en la consulta de medios. Esto, puede reducir el tamaño de los elementos entre pantallas para que se ajusten a la pantalla. Sin embargo, Bootstrap propone el concepto de dar prioridad a los dispositivos móviles, por lo que las páginas diseñadas a través de Bootstrap solo pueden ser compatibles con pantallas grandes, no con pantallas pequeñas.
3. Componentes de diseño básicos
Los componentes de diseño básicos son algunos estilos unificados definidos por el marco Bootstrap para algunas etiquetas de diseño básicas. Como tablas, botones, formularios, etc. Veamos un ejemplo de Tabla:
<.meta ?/jquery/1.11.2/jquery.min.js">