¿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.
Habiendo escrito este artículo, quiero escribir los siguientes contenidos de este artículo:
1. Basado en mi comprensión de Bootstrap, haré un pequeño resumen.
2. Voy a embellecer y optimizar la interfaz de usuario y el código para los ejemplos de Bootstrap de aprendizaje (2) desde cero, principalmente para hablar sobre cómo tuve el efecto que quería.
3. Es mejor enseñar a las personas cómo pescar que enseñar a las personas cómo pescar. Use sus propios ejemplos (porque también es un novato, y lo que escribe puede ser más adecuado para principiantes), y hable sobre las dificultades encontradas durante el proceso de escritura de código y los puntos que deben prestarse atención.
Sin más preámbulos, comencemos:
1. Un pequeño resumen de Bootstrap
Basado en la descripción de la documentación oficial de Bootstrap (http://v3.bootcss.com/), Bootstrap se divide en tres bloques grandes: estilo CSS, componentes y complemento JavaScript.
En primer lugar, está claro que Bootstrap es un marco, lo que significa que si otros hacen ruedas, puede usarlas directamente, para no construir ruedas solo. Por lo tanto, necesitamos aclarar dos puntos: qué tipo de ruedas son estas ruedas y cómo usarlas.
1. Estilo CSS: presenta principalmente el estilo global del sistema Raster y Bootstrap. Implementado estableciendo el valor de la clase.
1.1 Sistema de cuadrícula:
Esto nos permite implementar fácilmente el diseño de las páginas HTML (http://v3.bootcss.com/css/#grid).
Creo que el sistema de cuadrícula es muy importante. Debido a que el diseño de las páginas HTML es una tarea importante y engorrosa (puede echar un vistazo a la introducción al diseño en w3school http://www.w3school.com.cn/html/html_layout.asp, mire el código en el ejemplo y lo comprendirá), y la compatibilidad de los distintos browsers y los dispositivos debe tenerse en cuenta.
El sistema Raster ha simplificado enormemente esto. Abra la conexión anterior sobre el sistema de la cuadrícula, y encontrará que solo necesita asignar el valor correspondiente al atributo de clase de elemento HTML de acuerdo con el efecto que desea lograr, y también puede establecer diferentes efectos en dispositivos de diferentes tamaños de pantalla.
1.2 Bootstrap Global Style:
Así es como Bootstrap embellece elementos HTML de uso común (por ejemplo: DIV, botón, P, Tabla, IMG, etc.). Al asignar el valor correspondiente al atributo de clase del elemento HTML, puede obtener el efecto deseado.
Demos el ejemplo más simple:
Como se muestra en la figura anterior, Bootstrap le permite cambiar el valor de clase del elemento del botón para cambiar el tamaño del botón sin tener que tener que modificar el archivo CSS o incrustar el valor de estilo del elemento.
2. Componente: Creo que el componente es Bootstrap que combina algunos elementos (elementos HTML y código JavaScript) en componentes, y proporciona muchos iconos prácticos y muy buenos. Estos componentes se usan básicamente en común en el desarrollo HTML. Implementado estableciendo el valor de la clase. (http://v3.bootcss.com/components/)
Demos el ejemplo más simple:
Como se muestra en la figura anterior, cuando necesitamos implementar la función de navegación. Encuentre los componentes correspondientes en Boostrap y asigne los valores de clase, UL y LI correspondientes de acuerdo con sus propias necesidades.
3. Complemento de JavaScript: Creo que el complemento JavaScript de Bootstrap es la "rueda" que encapsula las funciones comunes de interacción web. Solo necesita establecer el atributo de clase y el atributo de datos para implementar funciones de interacción web comúnmente utilizadas sin tener que escribir mucho código JavaScript usted mismo.
En primer lugar, hablemos de un pequeño episodio. Los novatos pueden pensar erróneamente que "JavaScript" y "Java" tienen una conexión profunda, e incluso pueden pensar que JavaScript es una variante de Java. De hecho, este no es el caso. JavaScript es un lenguaje de secuencias de comandos desarrollado por Netscape para Internet. De hecho, su primer nombre es "Livescript". Más tarde, Netscape alcanzó una cooperación con Sun (es decir, la compañía que inventó Java, que luego fue adquirida por Oracle). En ese momento, el idioma Java estaba en su apogeo y era muy famoso. Para viajar en el viaje, cambió su nombre a JavaScript. Tanto es así que algunas personas bromearon: la diferencia entre "Java" y "JavaScript" es la misma que la diferencia entre "Lei Feng" y "Lei Feng Tower".
Volviendo al tema, sabemos que JavaScript existe para dar capacidades de interacción de la página web. Por lo tanto, los ricos complementos de JavaScript en BootsRipt pueden hacer que implementa las funciones de interacción web comúnmente utilizadas sin tener que concentrarse en "hacer ruedas".
Como se muestra en la figura anterior, utilizando el complemento Carousel de Bootstrap (http://www.runoob.com/bootstrap/bootstrap-carusel-plugin.html, el documento oficial de arranque oficial no se transluce en chino aquí, pero hay una traducción china muy detallada en runoob, y puede modificar el código en línea en línea para sumar el efecto de observación, lo cual es altamente recomendado, que está altamente se recomienda. Puede implementar fácilmente la función Picture Carousel que ahora usan muchos sitios web. Aquí solo necesita asignar los valores SRC de clase e imagen correspondientes de acuerdo con el tutorial en el enlace anterior, y ni siquiera necesita establecer el valor de datos.
2. Embellece y optimiza la interfaz de usuario y el código para los ejemplos de arranque de aprendizaje (2) desde cero
La siguiente figura muestra los efectos logrados en el tutorial anterior:
Podemos ver que existen las siguientes deficiencias que deben corregirse:
(1) Haga clic en el compañero de clase específico y muestre su información, y no está seleccionada. (Cuando haga clic al principio, estará en el estado seleccionado, pero ese es solo el efecto de clic del botón. Si hace clic en el espacio en blanco, el estado seleccionado desaparecerá)
(2) Los colores son monótonos y no muy hermosos.
(3) El diseño debe ajustarse. El cuadro de información es el lugar donde necesitamos información y debe ser lo más grande posible. Es mejor ocultar la caja innecesaria cuando se muestra.
(4) Para el código, el código JavaScript en Bootstrap (2) desde cero se escribe en la página HTML, y hay segmentos de código duplicados. Los segmentos de código duplicados deben escribirse en funciones, lo que puede reducir el tamaño del código. Al modificar el código, puedo modificar la función correspondiente directamente, sin buscar un lugar a la vez. El código JavaScript se puede escribir en archivos JS para separar las páginas HTML y el código JavaScript.
Selección técnica (inclinándose, incluido, es pensar en cómo usar lo que ya está en el marco de arranque para lograr el efecto deseado):
1. Primero ajuste el diseño, ajuste el cuadro de información y el cuadro de clase, y muestre el cuadro de clase en la parte superior.
Obviamente, solo necesitamos colocar el DIV donde se encuentra el cuadro de información y el DIV del cuadro de clase en la misma fila en el DIV, y modificar el valor de atributo de clase "Col-MD" relacionado con el sistema de cuadrícula para lograrlo. Por ejemplo, si queremos que muestren una relación de 2: 1, entonces el atributo de clase del cuadro de información debe tener Col-MD-8, mientras que el cuadro de clase debe ser COL-MD-4.
Vale la pena señalar que el front-end nunca puede ser un desarrollo de un solo paso. A menudo, el código inicial no es el resultado perfecto que queremos, y debe ajustarse con cuidado. Como ejemplo, todos deberían aprender a buscar por sí mismos, intentar hacer ajustes continuos (los ajustes posteriores no se explicarán en el proceso específico):
Después de modificar el código, el efecto presentado es el siguiente:
Obviamente, solo se muestra una clase en cada línea anterior, que es un poco de espacio de espacio. Las dos partes a continuación no están alineadas.
Elimine el "btn-group-verical" en el atributo de clase del componente DIV anterior, y agregue Col-MD-6 al atributo de clase de TMP_Button en el código JS. Además, se observa que después de establecer esto, la primera línea tiene una extraña sangría en comparación con la segunda línea:
No hay duda de que este tipo de apariencia y cambios de diseño están relacionados con CSS. En este momento, podemos echar un vistazo al CSS específico del elemento.
Tome Chrome como ejemplo:
Haga clic derecho en este elemento y seleccione Inspeccionar, lo que significa revisión. Encontrará el código correspondiente en el cuadro a la derecha. A través de la comparación, encontramos que es un problema de margen izquierdo. Esta propiedad es el valor predeterminado en el marco Bootstrap y se hereda del elemento superior. Algunos son -1px y otros son 0px. Solo necesitamos cambiarlo a lo mismo, por ejemplo, todos se cambian a 0px:
En el TMP_Button en el código JS, modifique el atributo de estilo y agregue "margen-izquierda: 0px;". Algunas personas piensan que la fuente no es buena para mirar en el centro, por lo que pueden agregar texto alineado: a la izquierda y configurar el texto en el botón para comenzar desde la izquierda.
Efectos corregidos:
2. Agregue un botón de pliegue para que los usuarios puedan ocultar/abrir el cuadro de clase a través de este botón. Al hacer clic en ClassMate para mostrar información detallada, la ocultará automáticamente para guardar mucho espacio para que se muestre el cuadro de información.
Para agregar un botón de pliegue, puede consultar http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html.
Además, podemos agregar un icono de buen aspecto al botón plegable, y se puede lograr fácilmente referiéndose al tutorial http://v3.bootcss.com/components/#glyphicons.
Al hacer clic en ClassMate para mostrar información detallada, se ocultará automáticamente. Debe modificar el evento de clic del botón ClassMate, es decir, el código JS correspondiente.
Verificamos el uso del complemento de plegado de Bootstrap http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html (esto es mejor, la parte oficial aún no se ha traducido) y encontró el siguiente contenido:
Resulta que aplaudir y en los valores de la clase controlan las funciones ocultas y de visualización. Entonces solo necesitamos modificar el atributo de clase correspondiente del elemento HTML para realizar la operación "Mostrar/ocultar" en el código JS del evento Click Botton. Así que agregue la siguiente declaración a la función de clic del botón de compañero de clase:
$ ("#colapso"). attr ("clase", "colapso de colapso de panel");
3. Se corrigió el error que "haga clic en estudiantes específicos y muestre su información, y no hay un estado seleccionado".
Al verificar el documento, http://www.runoob.com/bootstrap/bootstrap-button-plugin.html, establecemos la propiedad de toggle de datos del botón en "botón", que puede representar automáticamente el estado seleccionado después de hacer clic.
Por lo tanto, agregamos el atributo Data-Toggle = "Botón" al botón de ClassMate.
En este momento, ocurrió otro problema. Creo que cuando hago clic en otros compañeros de clase a continuación, el clic original todavía estaba en el estado activo. ¿Qué tengo que hacer?
Al verificar http://www.runoob.com/bootstrap/bootstrap-buttons.html, el estado seleccionado aparecerá cuando la asignación de clase del botón esté activa. Es decir, la configuración anterior, es decir, Bootstrap hace algo como esto: cuando se hace clic en el botón de datos de datos = "botón", el activo se agrega automáticamente a la clase y el estado seleccionado está presente. Cuando se hace clic nuevamente, el activo se elimina automáticamente de la clase y se presenta el estado no seleccionado.
En otras palabras, solo necesitamos hacer esta operación nosotros mismos. Por ejemplo, al hacer clic en ClassMate, puedo eliminar todos los botones activos de clase de clase del atributo de clase. Después de completar el clic, solo el botón en el que hice clic está en el estado activo.
Por lo tanto, solo necesita agregar tales declaraciones a la función de clic del botón de clase de compañero:
La copia del código es la siguiente:
$ (". Btn-ClassMate"). attr ("clase", "btn btn-default btn-clasmate btn-info");
El efecto es el siguiente:
4. Embellece la apariencia del botón
Encuentre la sección del botón CSS en Bootstrap:
http://www.runoob.com/bootstrap/bootstrap-buttons.html
Siguiendo el tutorial para modificarlo, simplemente he modificado el color del botón aquí, y puede cambiarlo usted mismo de acuerdo con sus necesidades. El efecto es el siguiente:
5. Separación de páginas HTML y código JavaScript
De hecho, se divide en dos pasos:
Paso 1: Coloque el código JavaScript en el archivo JS y enléelo en el archivo HTML.
Paso 2: Escriba bloques de código con JavaScript o Clare las funciones en una función y llame directamente a la función.
Dado que ambos pasos son relativamente simples, cualquiera que haya aprendido un lenguaje de programación debería hacerlo. No me expandiré y escribiré.
Vale la pena señalar que al vincular archivos JS, preste atención al pedido.
Por ejemplo, el archivo JS en Bootstrap se basa en jQuery y utiliza muchas funciones jQuery, por lo que el archivo jQuery JS debe declarar el enlace antes del archivo js en bootstrap.
Del mismo modo, nuestro archivo JS se basa en Bootstrap, por lo que debe ser después de Bootstrap, de lo contrario el código no funcionará.
Finalmente, publicamos el código relevante:
GetClassMate.html:
<! 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"> <title> title <tatle <title! -> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-html5 shim y responden.js para el soporte de IE8 de html5 elementos y consultas de medios-> <!-advertencia: responden.js no funciona si ve la página a través de un archivo: //-<! src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src =" // cdn.bootcss.com/dponder.js/1.4.2/expond.min.js" >/script><! escarmplante type = "text/css">#btn-group-vertical-classes {overflow-y: auto; Overflow-x: auto; altura: 100px;}#btn-group-vertical-classmates {Overflow-y: auto; Overflow-x: auto; altura: 500px;} botón {Text-Overflow: ellipsis; desbordamiento: Hidden; border-radius: 0px;}#context_div {overflow-y: auto; Overflow-x: auto; altura: 500px;} </style> </head> <body> <div> <div> <div> <hy h4 style = "text-align: right;"> <a id = "colapse_a" data-toggle = "colapse" data-parent = "#acorcion" href = "#colapsoeone"> <lan </h4> </div> <div id = "colapseone"> <div id = "div1-classes-classmates"> <div role = "grupo" aria-label = "..." id = "btn-group-vvertical-classes"> <!-donde las clases muestran-> </div> </div> </div> </div> <br> </br> <divsiv> <divsi id = "btn-group-vertical-classmates" role = "grupo" aria-label = "..."> <!-donde muestran los compañeros de clase-> <botón type = "botón" estilo = "border-radius: 0px;"> Clase Clase para mostrar clase de clase. </botón> </div> <div> <div ID = "context_div"> <p> Clase ClassMate para mostrar un compañero para mostrar Detalles. </p> </div> </div> </div> <!-jQuery (necesario para los complementos JavaScript de Bootstrap)-> <script src = "js/jQuery-3.0.0.min.js"> </script> <!-Incluya todos los complementos compilados (abajo) o incluyen archivos individuales según sea necesario-> <script src = "js/bootstrap.min.js"> </script> <script src = "js/script_getclassmate.js"> </script> </body> </html>script_getclassmate.js:
$ (documento) .Ready (function () {$. elegido_state = 0> </boton> '). Text (i); tmp_button.attr ("title", i); $ ("#btn-group-vertical-classes"). append (tmp_button);}); $ (". btn.btn-default.btn-class"). tmp_chosen = number ($ (this) .attr ("elegido_state"))^1; $ (this) .attr ("elegido_state", string (tmp_chosen)); showclassmates (resultado); $ (". btn.btn-default.btn-class-class"). click () {$ ($ ("btn-clasmate"). btn-default btn-classmate btn-info "); $ ("#colapso "). attr (" class "," colapso de colapso panel "); var seleccionado_classmate = $ (this) .Text (); showclassMatedetail (resultado, seleccionado_classass);});});});}) función showclassmates (resultado) {$ ("#btn-group-verical-classmates"). vacía (); var elegido_list = nuevo Array (); $ (". Btn.btn-default.btn-class"). Filtre (function () {juzgarflag = false; if ($ (this) .Attr ("elegido_state") == "1") {juzgar = true; nist.push ($ (this) .Text ());} juzga de juzgar;}); $. chosen_list_x;for (chosen_list_x in chosen_list){if(chosen_list[chosen_list_x]==i){$.each(field,function(j,field2){var tmp_button=$('<button type="button" style="border-radius: 0px;" data-toggle="button" elegido_state = 0> </boton> '). Text (j); tmp_button.attr ("title", j); $ ("#btn-group-vertical-classmates"). append (tmp_button);});}}});} Función ShowClassMatedetail (resultado, seleccionado) {var var classmate_context_item; $ ("#context_div"). vacía (); $. Cada (resultado, function (i, field) {$. cada uno (campo, function (j, campo2) {if (j == selected_classmate) {$. cada uno (campo2, function (k, field3) {// alerta (k); // alerta (field3); classmate_contontontEmemem. tmp_p = $ ('<p> </p>'). Text (classmate_context_item); $ ("#context_div"). append (tmp_p);});}});});});});});});});});});});Classesmates.json:
{"Class 001": {"Xiao Wang": {"Gender": "Male","Age": "18","Interest": "Football","Hometown": "Shanghai","Chinese": "78","Math": "90","English": "66","Physics": "81","Chemistry": "88","History": "69","Geography": "92"},"Xiao Li": {"Gender": "Male","Age": "20","Interest": "Basketball","Hometown": "Beijing","Chinese": "98","Math": "77","English": "97","Physics": "72","Chemistry": "73","History": "88","Geography": "81"}},"Class 002": {"Xiao Cai": {"Gender": "Female","Age": "19","Interest": "Dance","Hometown": "Gaoxiong","Chinese": "93","Math": "80","English": "92","Physics": "82","Chemistry": "77","History": "89","Geography": "83"}},"Class 003": {"Xiao Ma": {"Gender": "Male","Age": "18","Interest": "Reading","Hometown": "Taibei","Chinese": "91","Math": "93","English": "96","Physics": "97","Chemistry": "100","History": "94","Geography": "92"}},"Class 005": {"Xiao Zhang": {"Gender": "Male","Age": "20","Interest": "Running","Hometown": "Guangzhou","Chinese": "67","Math": "70","English": "66", "Física": "80", "Química": 68, "Historia": "79", "Geografía": "93"}}Lo anterior es el tutorial de introducción para la introducción de Bootstrap Zero-Basic (III) presentada por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!