¿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.
Este artículo se centra en la introducción del tutorial introductorio básico de Bootstrap (2). Los detalles específicos son los siguientes:
Sitios web que con frecuencia revisan la información durante el proceso:
http://www.w3school.com.cn/ Este es un sitio web establecido por la Alianza W3C para difundir el estándar W3C. Hay muchas tecnologías en el lado web, y puede verlo como una enciclopedia de tecnología web.
http://v3.bootcss.com/ No hace falta decir que el documento oficial de Bootstrap3
http://www.runoob.com/ Esto es realmente similar a W3School, pero es un poco más complicado que W3School. Gran parte del contenido se traduce del sitio web original de W3C English y los documentos oficiales de inglés de la bootstrap original, pero creo que su calidad de traducción es más alta (porque los dos primeros sitios web también se tradujeron sin rodeos), y algunos casos son más fáciles de entender.
Sin más preámbulos, comencemos:
(1) lograr claramente los objetivos
Como se muestra en la figura a continuación, este es un sitio web simple que queremos implementar. El diseño es simple y no hay un efecto deslumbrante. Sin embargo, es necesario implementar una función: lea información relevante del archivo JSON (puede consultar el sitio web anterior para conocer el conocimiento sobre JSON) y mostrarla en el sitio web.
Contenido del archivo JSON:
{"Clase 001": {"xiao wang": {"género": "masculino", "edad": "18", "interés": "fútbol", "ciudad natal": "shanghai", "xiao li": {"género": "masculino", "edad": "20", "interesante": "baloncesto", "hometown": "beiJing"}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} classy "}}} class"}} »} rift"} rift} 002 ": {" Xiao Cai ": {" género ":" femenino "," edad ":" 19 "," interés ":" danza "," ciudad natal ":" gaoxiong "}}," clase 003 ": {" xiao ma ": {" género ":" masculino "," edad ":" 18 "," interés ":" lectura "," hometown ":" hometown " "Taibei"}}, "Clase 005": {"Xiao Zhang": {"género": "masculino", "edad": "20", "interés": "ejecutando", "ciudad natal": "guangzhou"}}}Ahora mismo:
disposición:
Hay tres bloques principales: el lado izquierdo de la primera línea es la lista de clases, el lado derecho de la primera línea es la lista de nombres de compañeros de clase, y la segunda línea es la información relevante de los compañeros de clase.
Función:
1. Haga clic en una clase en la lista de clases para actualizar qué estudiantes de la clase están dinámicamente en la lista de clases y pueden seleccionar la clase.
2. Haga clic en un compañero de clase en la lista de compañeros de clase y muestre dinámicamente la información del compañero de clase en la segunda línea. Solo se puede mostrar la información de un compañero de clase a la vez.
(2) Técnicas requeridas para el análisis
disposición:
Bootstrap: se usa para implementar este simple diseño de dos filas, así como la verificación de las columnas de clase, y las barras de desplazamiento (algunos son fáciles de implementar directamente con Bootstrap, mientras que otros no pueden. ¿Cómo saber? Vaya a los tres sitios web anteriores para encontrar y verificar)
Función:
Use JavaScript y AJAX para lograr la adquisición de datos y la interacción dinámica (en un método de actualización local).
(3) Análisis de selección técnica
1. Implementar el diseño.
Al buscar la documentación (http://www.runoob.com/bootstrap/bootstrap-grid-system-example3.html), descubrí que Bootstrap se presenta utilizando un sistema de ráster. Al establecer atributos de clase específicos para el DIV, puedo lograr el efecto de diseño que quiero. Y puede establecer diferentes efectos en teléfonos móviles, tabletas y computadoras de escritorio. Los atributos de clase de las etiquetas HTML y las etiquetas HTML se pueden encontrar en W3School.
Vale la pena señalar que los atributos de clase del elemento pueden tener múltiples atributos de clase.
Por ejemplo: <div role = "grupo" aria-label = "..." id = "btn-group-verical-classes">
Use intervalos de "espacio" entre diferentes atributos, créanme, esto le permitirá escribir fácilmente scripts de JavaScript y ajustar CSS.
2. Realice la disposición vertical de los números de clase y las selecciones múltiples.
Consulte http://www.runoob.com/bootstrap/bootstrap-button-groups.html para saber cómo configurar grupos de botones verticales. Es decir, establezca la clase del DIV donde el grupo de botones se encuentra a BTN-Group-Vértico, de modo que se convierta en el contenedor para almacenar el grupo de botones.
Consulte http://www.runoob.com/bootstrap/bootstrap-button-plugin.html y saber cómo hacer que la verificación del grupo de botones. La implementación se realiza agregando el atributo de datos Data Toggle = "Botones" al DIV del atributo de clase al grupo BTN.
3. Implemente las esquinas del botón que se redefinirán desde las esquinas redondeadas a los ángulos rectos, agregue barras de desplazamiento al grupo de botones y agregue restricciones al texto que se muestra en el botón para que no exceda el botón. La parte excesiva se muestra como "...", y cuando el mouse se mueve y se detiene en el botón, se muestra todo el texto:
Una pequeña parte (las esquinas redondeadas se convierten en ángulos rectos, el mouse rondado para mostrar texto) debe establecerse directamente en la etiqueta HTML.
La mayoría de las implementaciones están escritas con un CSS:
<style type = "text/css">#btn-group-vertical-classes {overflow-y: auto; overflow-x: auto; altura: 150px;}#btn-group-vertical-classmates {overflow-y: auto; overflow-x: auto; altura: 150px;} butote {text-overflow: ellelsis; oculto; border-radio: 0px;} </style>La parte <style> del código se coloca en la cabeza, es decir, entre <fead> y </head>.
El método general es usar primero el selector CSS para seleccionar la etiqueta para establecer el CSS y luego establecer el estilo correspondiente en los aparatos ortopédicos.
El llamado selector de CSS es el "#BTN-Group-Classes verticales" y el "botón" en el código anterior, es decir, una línea de código en los aparatos ortopédicos. Existen múltiples métodos para usar el selector CSS, y puede encontrar los métodos relevantes a través del sitio web W3School.
Debido a que las hojas de estilo CSS tienen tres métodos de carga (archivo CSS; <head> etiqueta, atributo de estilo en el elemento HTML, y el orden de prioridad efectivo es: "Estilo en el elemento"> "Elemento de estilo en el encabezado del archivo"> "El estilo de estilo externo", también nos referimos al CSS de Bootstrap, por lo que los cuestiones de sobrescrito, es decir, que algunos CS CS están establecidos en el estilo <estilo en el estilo de la sede. La configuración del botón Border-Radius en el anterior <Syle> no funciona).
<1> Escriba el atributo de estilo directamente en la etiqueta del elemento. Este es el más preferido, por lo que definitivamente funcionará.
<2> Modifique el archivo CSS Bootstrap al que vinculó, de una vez por todas, y agregue nuevos elementos en el futuro, sin tener que reescribir el atributo de estilo uno por uno. Esto requiere que descargue el archivo CSS en lugar de referirse al enlace.
Como nuestra página es muy pequeña, tomé el método uno.
4. Use AJAX para lograr la adquisición de datos, interacción y carga dinámica.
Pregúntame cómo usar Ajax. Busque en Baidu o pregunte a las personas que conocen la tecnología front-end.
Lo más central de AJAX es que se puede actualizar parcialmente sin refrescar toda la página. Aquí primero debemos consultar los documentos relevantes sobre la tecnología AJAX (los tres sitios web anteriores, así como varios Baidu). Dado que desea obtener datos del archivo JSON, se refiere al manual de AJAX http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp en jQuery (porque JS de Bootstrap se basa en jQuery, y todos los métodos de jQuery están funcionando, y este punto de conocimiento también se encontró cuando estaba buscando información). Se seleccionó la función getJson. Además, consulte http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html Seleccione cada función como el método de análisis.
En la implementación del código, implica principalmente transversal (para la declaración), el juicio (if declaración), las operaciones en elementos HTML, agregar elementos infantiles, modificar los valores de los atributos, etc.
Con respecto a cómo escribir la página específica, es aburrido escribirla en detalle, por lo que acabo de pegar el código.
Algunos puntos a los que prestar atención al ejecutar la demostración: Chrome parece restringir la lectura directa del contenido del archivo localmente, por lo que debe colocar todo el proyecto en la carpeta HTDOCS de Apache. Luego corre. Con respecto a cómo instalar Apache, mi blog anterior tiene una introducción muy detallada. Cómo usarlo, por favor Baidu.
<! 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: 150px;}#btn-group-vertical-classmates {Overflow-y: Auto; Overflow-x: auto; altura: 150px;} botón {Text-Overflow: Ellipsis; Overflow: Hidden; Border-Radius: 0px;} </ystye> </head> <body> <div> <br> </br> <Div ID = "Div1-Classes-Classmates"> <Div Role = "Grupo" ARIA-LABEL = "..." ID = "BTN-GROUP- VERECTICALES" Classes " mostrar-> </div> <div id = "btn-group-vertical-classmates" role = "grupo" aria-label = "..."> <!-Donde los compañeros de clase muestran-> <button type = "botón" style = "border-radius: 0px;"> Clase de clic para mostrar clase id = "context_div"> <p> Clase ClassMate para mostrar detalles. </p> </div> </div> <!-jQuery (necesario para los complementos JavaScript de Bootstrap)-> <script src = "js/jQuery-3.0.0.0.min.js"> </script> <!-Incluya todos los complementos (a continuación), o incluyen archivos individuales-> <script <script " src = "js/bootstrap.min.js"> </script> <script> $ (documento) .Ready (function () {$. getJson ("resource/classmates.json", function (resultado) {$. cada uno (resultado, function (i, field) {var tmp_button = $ ('<button type = "Botton" Botton "Border =" border-radius: 0px; "data =" data = "data =" Botón " 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)); $ ("#btn-group-classmates"). vacía (); var elegido_list = neweN 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;}); $. elegido_list_x; for (elegido_list_x en elegido_list) {if (elegido_list [elegido_list_x] == i) {$. Cada (campo, función (j, campo2) {var tmp_button = $ ('<button type = "button" style = "border-radius: 0px"; ";" elegido el elegido seleccionado_classmate = $ (this) .Text (); var classmate_context_item; $ ("#context_div"). vacío (); $. Cada uno (resultado, function (i, campo) {$. Cada (campo, function (j, campo2) {if (j == selection_classsmate) {$. cada uno (campo2, function (k, field3) {classmate_contion Field3; var tmp_p = $ ('<p> </p>'). Text (classmate_context_item); $ ("#context_div"). append (tmp_p);});});});});});});});}) </script> </body> </hml>