¿Qué es Bootstrap?
Bootstrap es un marco front-end para el rápido desarrollo de aplicaciones web y sitios web. Bootstrap se basa en HTML, CSS y JavaScript.
historia
Bootstrap fue desarrollado por Mark Otto y Jacob Thornton de Twitter. Bootstrap es un producto de código abierto lanzado en Github en agosto de 2011.
Tengo mucho tiempo libre recientemente. Hoy te presentaré un marco de "estilo" front -end: Bootstrap.
1. Bootstrap Arquitectura general
¿Por qué en la introducción llamo Bootstrap como un marco de estilo front-end? Tal vez ese título no sea muy preciso, pero creo que tal título puede permitir que algunos principiantes entiendan y comprendan qué bootstrap es más rápido. No me gusta usar algunas palabras de alta gama para profundizar la comprensión de un determinado conocimiento, sino que prefiero usar algunas palabras fáciles de entender para describir los puntos de conocimiento. Aunque tal descripción puede ser un poco inexacta, creo que no es gran cosa, porque tales descripciones pueden permitir a los principiantes comprender este conocimiento más rápido. Debido a que estaba confundido cuando estaba aprendiendo puntos de conocimiento, algunos documentos oficiales de conocimiento eran muy de alta gama. De hecho, para decirlo sin rodeos, fueron solo algunas cosas del pasado, y luego encapsulado para facilitar el desarrollo y más rápido. Así que aquí comparto que el marco Bootstrap es el mismo. Además, la organización de contenido también está destinada a permitir a los principiantes dominarlo. Porque cuando comencé a entrar en contacto con él, también fui un principiante. Creo que esta forma de organizar puede ayudarlo a comprender el conocimiento más rápido y mejor.
Para Bootstrap, primero debemos introducir su arquitectura general: qué consiste exactamente en la que consiste. Creo que puedes entender rápidamente de qué se compone exactamente en Bootstrap mirando la imagen a continuación.
De la figura anterior, podemos ver claramente que Bootstrap consiste principalmente en las siguientes partes:
12 Sistema de cuadrícula: es dividir la pantalla en 12 copias (columnas).
Use filas para organizar elementos (cada fila incluye 12 columnas) y luego coloque el contenido en la columna.
Compensación de columna de control por col-md-ofset-*.
Componentes básicos de diseño: Bootstrap proporciona una variedad de componentes básicos de diseño. Tales como tipos de compensación, código, formularios, botones, formularios, etc.
JQuery: Bootstrap Todos los complementos de JavaScript dependen de jQuery. Si desea usar estos complementos JS, debe consultar la biblioteca jQuery. Esta es también la razón por la que necesitamos hacer referencia a la biblioteca jQuery además de referirnos al archivo JS y el archivo CSS de Bootstrap, los cuales son dependencias.
Componentes CSS: Bootstrap ha preimplementado muchos componentes CSS para nosotros. Ensamble el cuadro, el grupo de botones, la navegación, etc. En otras palabras, el contenido de Bootstrap nos ha ayudado a definir muchos estilos CSS, y puede aplicar directamente estos estilos a elementos como cajas desplegables anteriores.
JavaScript Plug-in-Bootstrap también implementa algunos complementos JS para nosotros. Podemos usar los complementos proporcionados por él para completar algunas funciones comunes, sin exigirnos que reescribamos el código JS para lograr efectos tales como cuadros de inmediato y ventanas modales.
Diseño receptivo: este es un concepto de diseño. Responsive significa que ajustará automáticamente la página de acuerdo con el tamaño de la pantalla, para que la página delantera pueda funcionar bien en pantallas de diferentes tamaños.
Bootstrap está compuesto por las partes anteriores. Lo anterior ha dado una breve introducción a cada componente, y el siguiente contenido no es más que una introducción detallada a cada componente a través de algunos ejemplos.
2. 12 Sistema de cuadrícula
Bootstrap define un sistema de 12 cuadrícula para un mejor diseño. Lo primero que debe definir es el sistema de diseño para cada marco frontal. En Bootstrap, usa filas y columnas para crear el diseño de la página. Hay varios principios para su diseño:
La fila debe incluirse en .Container (ancho fijo) o .Container-fluid (100% de ancho)
Cada fila contiene 12 columnas
Coloque el contenido en cada columna
En el sistema de trama de Bootstrap, los navegadores se dividen en 4 tipos de acuerdo con su ancho. Los valores son: automático (100%), 750px, 970px y 1170px.
Los estilos correspondientes son ultra pequeños (XS), pequeños (SM), pantalla de tamaño mediano (MD) y grande (LG)
Originalmente se implementa definiendo el ancho mínimo a través de la consulta de medios. ¡Por lo tanto, las páginas web hechas por Bootstrap son compatibles con las grandes y las pequeñas!
Dentro del marco Bootstrap, el valor de delimitación del tamaño de la pantalla ha sido predefinido y el valor de delimitación se define a través de consultas de medios. Su definición es la siguiente:
/* Pantalla Ultra-Small (móvil, menos de 768px)* //* no hay código relacionado con la consulta de medios, porque este es el valor predeterminado en Bootstrap (recuerde que Bootstrap es móvil-First?)* //* Pantalla pequeña (plana, mayor que o igual a 768px)*/ @Media (Min-width: @Screen-Smin) {...}/* pantalla media (escritorio (de escritorio igual 992px) */ @media (min-width: @screen-md-min) {...}/ *pantalla grande (pantalla de escritorio grande, mayor o igual a 1200px) */ @media (min-width: @screen-lg-min) {...}De hecho, las consultas de los medios también se usan en el desarrollo de aplicaciones WIN8 para realizar aplicaciones receptivas. Entonces, si escucha el sistema receptivo en el futuro, no piense que es muy profundo. De hecho, el marco define consultas de medios para nosotros. Si el ancho mínimo definido en las consultas de los medios excede el ancho mínimo definido en las consultas de medios, de esta manera, puede reducir el tamaño del elemento entre diferentes pantallas para adaptarse a la pantalla. Sin embargo, el concepto propuesto por Bootstrap se prefiere para dispositivos móviles, por lo que las páginas diseñadas por Bootstrap solo pueden ser compatibles con lo grande y pequeño incompatible con lo pequeño.
3. Componentes básicos de diseño
El componente de diseño básico es que el marco Bootstrap define algunos estilos unificados para algunas etiquetas de diseño básicas. Como tabla, botón, forma, etc. Veamos un ejemplo de tabla:
<! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua compatible" content = "ie = edge"> <meta name = "viewport" content = "width = dispositivo-width, inicial-scale = 1" <<r!-el 3 meta * Mets * viewport "debe colocar primero * * cualquier otro contenido * debe * seguirlos! -> <title> Bootstrap 101 Plantilla </title> <!-Porque no hay un complemento JS para Bootstrap, no hay referencia al componente jQuery-> <!-Bootstrap-> <Link rel = "Stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h3> tabla de estilo predeterminada </h3> <labin> <tacttion> Título de la tabla. </titer> <!- Encabezado de tabla, combinado con T+Head, T representa el significado de significado de significado de significado de tabla-> <thead> <tr> <th> id </th> <th> nombre de primer nombre </th> <th> apellido </th> </tr> </thead> <tbody> <tr> <th scope = "fila"> 1 </th> <td> Tommy </td> <td> li </td> </tr> <tr> <tr> scope = "fila"> 2 </th> <td> bob </td> <td> san </td> </tr> <tr> <th scope = "row"> 3 </th> <td> sam </td> <td> wang </td> </tbody> <h3> Table con el borde </h3> <caption> table. t+cabeza, t representa el significado de la tabla-> <thead> <tr> <th> id </th> <th> nombre de primer </th> <th> apellido </th> </tr> </thead> <tbody> <tr> <th scope = "fila"> 1 </th> <td> Tommy </td> <td> li </td> </tr> <tr> <tr> <tr> Scope = "Row"> 2 </th> <td> bob </td> <td> san </td> </tr> <tr> <th scope = "row"> 3 </th> <td> sam </td> <td> wang </td> </tr> </bbody> <!- Para más referencias de estilo de mesa: http://v3.bootcss.com/css/#tables --><!-- jQuery (necesario para los complementos javascript de bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <!-Incluye todos los platos compensados (se necesitan a continuación (se necesitan a continuación (se necesitan a continuación (se necesitan los archivos a continuación (se necesitan a continuación (es necesario, o se incluya a continuación (se necesitan, o todos los archivos (se necesitan a continuación), a continuación), se necesiten, se necesiten todos los archivos (se necesitan a continuación), a continuación), a continuación, se incluya. -> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
El código de ejemplo para el botón y el formulario no se publicará aquí. Puede usar el enlace a continuación para ver el efecto de ejecución y el código fuente. También puede descargar todos los códigos fuente de este tema a través del último archivo de descarga.
IV. Componentes CSS
Los componentes CSS son similares a los componentes básicos de diseño, es decir, Bootstrap define algunos estilos existentes para algunas etiquetas, y el efecto de estos estilos es muy hermoso, por lo que cada empresa o desarrollador no necesita escribir otro estilo, acelerando así la eficiencia de desarrollo. Echemos un vistazo a un ejemplo de navegación aquí. Para decirlo sin rodeos, si usa demasiado esta cosa, naturalmente se familiarizará con él.
<! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua compatible" content = "ie = edge"> <meta name = "viewport" content = "width = dispositivo-width, inicial-scale = 1" <<r!-el 3 meta * Mets * viewport "debe colocar primero * * cualquier otro contenido * debe * seguirlos! -> <title> Bootstrap 101 Template </title> <!-Bootstrap-> <Link rel = "Stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h3> barra de navegación </h3/h3 Toggle se agrupe para una mejor pantalla móvil-> <div> <botón type = "botón" data-toggle = "colapse" data-target = "#bs-example-navbar-colapse-1" aria-expandy = "false"> <span> Toggle navegati href = "#"> home </a> </div> <!-recopile los enlaces de navegación, formularios y otro contenido para alternar-> <div id = "bs-exame-navbar-colapse-1"> <ul> <li> <a href = "#"> home <span> (actual) </span> </a> </li> <li> <i <a a a a href = "#"> sobre </a> </li> </ul> <ul> <li> <a href = "#"> enlace </a> </li> <li> <a href = "#" data-toggle = "desplegable" rol = "botón" aria-haspopup = "verdade" ARIA-expandeny = "falso"> desple href = "#"> Acción 1 </a> </li> <li> <a href = "#"> Acción 2 </a> </li> <li> <a href = "#"> Acción 3 </a> </li> <li> <a href = "#"> Acción separada </a> </li> </li> </ul> </div> </iv> < -> </div> <!-/.container-fluid-> </ar Nav> <!-jQuery (necesario para complementos javascript de bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> < -> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
Los efectos de operación de otros componentes son los siguientes:
5. complemento de JavaScript
Por defecto, todos los complementos JS se pueden implementar configurando el código HTML específico y las propiedades correspondientes sin escribir una línea de código JavaScript. La esencia de su implementación es que Bootstrap implementa el código JavaScript correspondiente para estas propiedades.
Echemos un vistazo a un ejemplo de una ventana modal:
<! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua compatible" content = "ie = edge"> <meta name = "viewport" content = "width = dispositivo-width, inicial-scale = 1" <<r!-el 3 meta * Mets * viewport "debe colocar primero * * cualquier otro contenido * debe * seguirlos! -> <title> Bootstrap 101 Plantilla </title> <!-bootstrap-> <link rel = "stylesheet" href = "http://cdn.bootcss.s.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h3> Window </h3> </h3> type = "Button" data-toggle = "modal" data-target = "#mymodal"> haga clic en mí </boton> <div id = "mymodal"> <div> <div> <div> <div> <button type = "botón" data-dismiss = "modal" aria-label = "cerrar"> <span aria-hidden = "true"> × </span> </boton> <h H4> Título </h4> </div> <viv> <p> Test Body ... </p> </div> <div> <botón tipo = "botón" data-dismiss = "modal"> cerrar </boton> <button type = "button"> Guardar cambios </boton> </div> <!-/.modal-content-> </diviv> <!-/.modal-dialog-> <biv> <! jQuery (necesario para los complementos JavaScript de Bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <!-Incluya todos los complementos compilados (a continuación), o incluya archivos individuales según sea necesario-> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
Después de leer todo el contenido anterior, ¿sientes instantáneamente que Bootstrap es en realidad solo un marco de estilo? Con esto podemos construir páginas web rápida y fácilmente. Además, después de leer el contenido anterior, no se confundirá por qué el documento oficial de Bootstrap es el siguiente:
¿No son las entradas en la barra de navegación de la bootstrap oficial documentan los componentes principales de nuestra introducción anterior?
6. Resumen
En este punto, todo el contenido de este artículo ha terminado. Espero que a través de este artículo, los principiantes puedan entender rápidamente y dominar Bootstrap. Además, este artículo es equivalente a los puntos clave de Bootstrap. Para obtener contenido más detallado, puede consultar el sitio web oficial chino de Bootstrap. Pero no creo que ya no lo quiera. Es mejor practicarlo directamente si tienes ese tiempo. La aplicación web VS2013 ya admite el marco Bootstrap de forma predeterminada. Puede crear inmediatamente una aplicación web a través de VS2013 para experimentar la aplicación de Bootstrap en ASP.NET MVC antes de leerla.