Con el número creciente de usuarios móviles, la arquitectura del sistema web tradicional no es compatible con el uso normal de muchos terminales móviles. En el trabajo, también encontraré que muchos clientes ahora tienen la necesidad de usar sistemas de gestión en terminales móviles, como teléfonos móviles y tabletas. Si la página web de respuesta correspondiente se desarrolla por separado para cada terminal, esto inevitablemente aumentará el costo del proyecto y la presión sobre los desarrolladores. En este momento, es necesario comprender el diseño receptivo, que nace para resolver problemas múltiples. Esta vez presentamos livianos, de código abierto y bootstrap gratis.
Construir un entorno de desarrollo
Primero, descargue el paquete de código fuente Boostrap del sitio web oficial: http://www.bootcss.com/. Para desarrollar proyectos simples, no tiene que agregar todos los CS, JS, fuentes, etc. en el código fuente. Según las necesidades de su proyecto, puede adaptar el entorno que necesita.
Los archivos requeridos son los siguientes: jQuery.min.js, bootstrap.min.js, bootstrap.css. Si necesita usar algunos de los estilos de fuentes, también debe agregar archivos relacionados con la fuente, como se muestra en la figura a continuación:
[Nota] Al cargar JS, primero debe cargar jQuery.min.js, porque en bootstrap.min.js, usará métodos relacionados con jQuery, es decir, boostrap.min.js, depende de jQuery.min.js.
Entorno de prueba de arranque
Escriba un archivo de prueba index.html. El contenido del archivo de prueba es el siguiente:
<!DOCTYPE html><html><head> <title>Test the boostrap environment</title> <link rel="stylesheet" type="text/css" href="./css/bootstrap.css"> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type = "text/javaScript" src = "./ js/bootstrap.min.js"> </script> </head> <body> </body> </html>
Lo anterior es un entorno de desarrollo de bootsrap. ¡Es muy simple!
Lo que debe saber al usar Boostrap es el sistema de ráster de Boostrap. Se debe precisamente a este sistema de cuadrícula lo que lo hace mejor compatible con los dispositivos terminales con diferentes resoluciones.
El sitio web oficial del sistema de cuadrícula específico tiene una introducción clara: http://v3.bootcss.com/css/. Se encuentra la siguiente imagen del sitio web oficial:
Al usar Boostrap, utilizamos principalmente algunos estilos que se han definido en él. Esto es útil para un programa que no tiene la capacidad de arte, construyendo rápidamente una página bastante buena.
Cuando realmente usamos Bootstrap, a menudo verificamos algunos documentos de ayuda en el sitio web oficial: http://v3.bootcss.com/css/#tables.
Personalmente, le recomiendo que copie directamente el código relevante en su propia página web en los ejemplos del sitio web oficial, y luego haga modificaciones relevantes basadas en esto. De esta manera, la velocidad de desarrollo será más rápida y la precisión será mayor.
Demuestre algunos estilos de boostrap --- estilos de mesa.
<!DOCTYPE html><html><head> <title>Test boostrap environment</title> <link rel="stylesheet" type="text/css" href="./css/bootstrap.css"> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type = "text/javaScript" src = "./ js/bootstrap.min.js"> </script> <body> <table> <tr> <td> test form </td> <td> test form </td> <td> Test Form </td> <td> Test Form </td> <TD> Test Form </td> <TD> formulario </td> <td> test </td> <td> test </td> </tr> <tr> <td> test </td> <td> test </td> <td> test </td> <td> test <//td> <td> test </td> <td> test </td> <td> test </td> <td> test> test </td> <tr> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> </tr> <tr> <tr> <td> test </td> <td> test </td> <td> test </td> <td> test </td </td </td </td> <TD> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> <td> test </td> </tr> </table> </body> </html>
Los resultados de visualización de la página web son los siguientes:
Se introducen los atributos en clase:
1) Tabla más esto ya tiene el estilo de mesa de bootsrap
2) El ritmo de la tabla indica que el fondo de la fila del mouse de la tabla permanece brillante
3) La tabla bordada de la tabla aparece en las fronteras
4) rayas de mesa con rayas de mesa
[Nota] Cuando se agregan múltiples atributos, hay espacios entre cada atributo.
2. Botón
<!-botón-> <a href = "#" role = "botón"> enlace </a> <botón type = "enviar"> botón </boton> <input type = "button" value = "input"> <input type = "enviar" value = "enviar"> <!-botón estándar-> <botón de botón = "botón"> (estilo predeterminado) predeterminado </button> <!-proporciona un peso visual adicional e identifica la acción principal de un botón de botón de botón de botón de botón-(botón predeterminado) type = "Button"> (Preferences) Primary </boton> <!-indica una acción exitosa o positiva-> <button type = "button"> (éxito) éxito </boton> <!-Botón contextual para mensajes de alerta informativa-> <button type = "botón"> (información general) información </button> <!-indica que se debe tomar la precaución con esta acción-> <button type = "botón"> (advertencia) warning <button <button </botón </botón </! Acción-> <botón type = "botón"> (peligro) peligro </boton> <!-Defase un botón haciendo que parezca un enlace mientras mantiene el comportamiento del botón-> <button type = "botón"> (enlace) enlace </botón>
Los resultados de la página web son los siguientes:
Para muchos otros estilos y componentes, se recomienda referirse a la documentación oficial de ayuda.
Resumir
Este artículo es una guía, que presenta brevemente para qué es Boostrap y cómo usarlo. No hay una lista detallada de todos los componentes y estilos, pero ... ¡lee!
Este es un artículo muy mágico, debe hacer clic y echar un vistazo: Tutorial de aprendizaje de bootstrap que vale la pena compartir y recopilar
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntar dos temas emocionantes a usted: Tutorial de aprendizaje Bootstrap Bootstrap Tutorial práctico
Espero que aquellos que estén interesados en Bootstrap puedan probar manualmente los efectos de cada estilo y cómo usar cada componente por sí mismos, y realmente sentir la diversión traída por Bootstrap.