Bootstrap es el marco HTML, CSS y JS más popular para desarrollar diseños receptivos, proyectos web móviles primero. - Documentación china de arranque
Bootstrap se ha convertido en el marco de desarrollo front-end más popular debido a su soporte para el diseño receptivo, la prioridad del dispositivo móvil y fácil de usar y fácil de aprender.
También vale la pena aprender el diseño receptivo de Bootstrap, el desarrollo de componentes y el desarrollo del complemento de JavaScript y los métodos de desarrollo de scripts de preprocesamiento.
código fuente
Descarga y compilación del código fuente
Se recomienda descargar el último y más completo código fuente de Bootstrap en GitHub.
GitHub es un repositorio de alojamiento de código fuente de Bootstrap que contiene no solo el código fuente, sino también los archivos fuente de la documentación de Bootstrap. Por lo tanto, puede explorar documentos en la máquina local compilando y ejecutando el código fuente del documento sin una red.
Directorio de código fuente
El directorio de código fuente de Bootstrap contiene:
• Documentar el código de implementación subdirectorio_gh_pages/
• Documento del código fuente del subdirectorio Docs/
• Subdirectorio DIST/ Subdirectorio Dist/
• Subdirectorio de script bootstrap JS/
• Subdirectorio de estilo Bootstrap menos/
• Fuentes de subdirectorio de fuentes de bootstrap/
• Subdirectorio de script de herramienta de construcción de gruñidos Grunt/
• Subdirectorio NUGET NUGET NUGET/ Administrador de paquetes NUGET/
• muchos archivos de configuración
Punto de entrada
El código fuente del marco Bootstrap es muy complejo, y sin duda es difícil de analizar desde la perspectiva del marco de desarrollo del autor. El problema se puede simplificar, sin prestar atención a cómo se construye o implementa el marco, pero solo se centra en cómo funciona el marco, a saber, las piezas HTML, CSS/Less y JS.
A través de la idea de la división y la gobernanza, los problemas complejos se dividen en muchos problemas simples y se resuelven. Cuando se resuelven todos los problemas pequeños, los problemas complejos se resolverán fácilmente.
Divida todo el marco de arranque en componentes, tome componentes como punto de entrada, comprenda su principio de trabajo y luego analice gradualmente todo el marco.
Análisis de componentes
menú desplegable Desendo
Código HTML
<!-componente: menú desplegable-> <div> <!-botón de activación-> <botón type = "botón" data-toggle = "desplegable"> desplegable <span> </span> </botón> <!-menú desplegable-> <ul> <li> <a href = "#"> Acción </a> </li> <li> <a href = "#"> otra acción </a> </li> href = "#"> algo más aquí </a> </li> </ul> </div>
Nota: El atributo accesible aria-* En el código fuente se elimina del código para un análisis fácil. No se puede omitir en aplicaciones prácticas. El estilo del botón no se expande aquí para el análisis
Código CSS
// Dropdown Arrow/Caret.Caret {Display: Inline-Block; Ancho: 0; Altura: 0; margen-izquierda: 2px; Align vertical: medio; Border-top: @Caret-Width-Base Dable; Border-top: @caret-width-base sólido ~ "/9"; // IE8 Border-Right: @Caret-WiDth-Base Solid Transparent; Border-izquierda: @Caret-Width-Base Solid Transparent;} // El contenedor desplegable (div) .dropup, .dropdown {posición: relativo; // Posicionamiento relativo del elemento principal} // Evite el enfoque en el desplegable al final al cierre desplegable. // Posicionamiento absoluto de elementos infantiles Top: 100%; // El menú desplegable está cerca del borde inferior del elemento principal izquierdo: 0; Index Z: @zindex-dropdown; Pantalla: ninguno; // se esconde de forma predeterminada, cuando se muestra el botón de activación (Display: Block) Float: Left; Min-Width: 160px; relleno: 5px 0; margen: 2px 0 0; // anular el estilo de lista UL predeterminado: ninguno; Font-size: @font-size-base; text-align: izquierda; Color de fondo: @Dropdown-Bg; Border: 1px sólido @Dropdown-Fallback-Border; // borde de alojamiento IE8: 1px sólido @dropdown-border; Border-Radius: @Border-Radius-Base; .Box-Shadow (0 6px 12px RGBA (0,0,0, .175)); Clip de fondo: Box de relleno; // alinea el menú desplegable a la derecha y .pull-right {Right: 0; Izquierda: Auto; } // divisor horizontal con altura de 1px.divider {.nav-divider (@dropdown-divider-bg); } // enlaces dentro del menú desplegable> li> a {display: block; relleno: 3px 20px; claro: ambos; Font-peso: Normal; Line-HEight: @Line-Hevight-Base; Color: @Dropdown-Link-Color; White-Space: Nowrap; // evitar que los enlaces envuelvan}} // Hover/Focus State.dropdown-Menu> li> a {&: Hover, &: Focus {Text-Decoration: None; Color: @Dropdown-Link-Hover-Color; Color de fondo: @Dropdown-Link-Hover-Bg; }} // Active State.dropdown-Menu> .Active> a {&, &:: Hover, &: Focus {Color: @Dropdown-Link-Active-Color; Decoración de texto: ninguna; Esquema: 0; Color de fondo: @Dropdown-Link-Active-Bg; }} // Mostrar el menú desplegable.open {> .dropdown-Menu {display: block; // show} // elimina el esquema cuando: el enfoque se activa> a {contorno: 0; }} // Posicionamiento de menú.dropdown-Menu-Right {izquierda: auto; // restablecer el valor predeterminado de `.Dropdown-Menu` Right: 0;} //` .Pull-Right` Componente Nav..DropDown-Menu-left {Left: 0; Derecha: auto;} // encabezados de sección desplegable.dropdown-header {display: block; relleno: 3px 20px; Font-size: @font-size-small; Line-HEight: @Line-Hevight-Base; Color: @Dropdown-Header-Color; White-Space: Nowrap; // como con> li> a} // área de menú no dropdown.dropdown-backdrop {posición: fijo; Izquierda: 0; Derecha: 0; Abajo: 0; arriba: 0; Index Z: (@zindex-dropdown-10); // Asegúrese de que el menú desplegable no se cierre al hacer clic en el menú desplegable} // desplegable alineado a la derecha.pull-right> .dropdown-menu {Right: 0; Izquierda: Auto;} // Permitir que los desplegables se pongan de abajo hacia arriba (también conocido como, dejar-Menu) //// solo agregar .dropup después de la clase .dropdown estándar y está configurado, Bro.// toDo: resumir esto para que los estilos de Navbar fijado no estén colocados aquí? Border-Bottom: @Caret-Width-Base Dable; Border-Bottom: @Caret-Width-Base Solid ~ "/9"; // Contenido IE8: ""; } // Posición diferente para el menú de abajo hacia arriba .Dropdown-Menu {top: auto; Abajo: 100%; Botón de margen: 2px; }} // Alineación de componentes //// reiterar por navbar.less y la alineación de componentes modificados allí. @Media (min-width: @grid-float-breakpoint) {.navbar-right {.dropdown-nebe {.dropdown-menu-right (); } // necesario para las anulaciones del menú alineado por la derecha predeterminada. // eliminará V4 V4 con toda probabilidad. .dropdown-Menu-left {.dropdown-Menu-left (); }}}El comportamiento de este componente de menú desplegable es: cuando se hace clic en el botón de activación, el menú desplegable se muestra debajo y cuando se hace clic en el área de menú sin caída, el menú desplegable está oculto.
Principio de implementación:
1. Solo se muestra el botón de activación al principio, el menú desplegable predeterminado .Dropdown Wrapper está cerrado y .Dropdown-Menu Hides Pantalla: Ninguno de forma predeterminada
2. Cuando se haga clic en el botón de activación, agregue la clase. En .open, el valor de visualización de .dropdown-Menu es bloque. Entonces, agregue/elimine la clase abierta significa mostrar/ocultar el menú desplegable.
3. Al hacer clic en el área del menú que no es de Dropdown, .Dropdown elimina la clase. El principio de implementar el área del menú sin arrastre es que el posicionamiento, el mosaico y el índice Z corregido son más pequeños que el menú desplegable, de modo que el menú desplegable no se oculta al hacer clic en el menú desplegable.
Código JavaScript
/* ================================================================== ====================================================================== ================================================================== ====================================================================== ================================================================ ====================================================================== ====================================================================== ====================================================================== Licenciado en MIT (https://github.com/twbs/bootstrap/blob/master/license) * =================================================================== =================================================================== var fondo = '.dropdown-backdrop' var toggle = '[data-toggle = "desplegable"]' var desplegable = function (element) {$ (elemento) .on ('click.bs.dropdown', this.toggle)} Dropdown.version = '3.3.6' Function getParent ($ this) {var selector = $ this.attr ('data-target') $ this.attr ('href') selector = Selector && /#ima-za-zfont>/.test(selector) && selector.replace (/.*(?=#•^/ s]*$)/, '') // Strip para IE7} var $ parent = selector && $ (selector) return $ parent && $ $ parent: $ this.parent ()} function clearMenus (e) {if (e && e. which ==== 3) return $ (backdrop) .remove () $ (toggle) .each (function () {var $ this = $ (this) var $ parent = getparent ($ this) var relacionado = {relatiTarget: this} if (! e.type == 'hacer clic' && /input|TextArea/i.test(e.target.tagname) && $ .contains ($ parent [0], e.target)) return $ parent.trigger (e = $. .event ('hide.bs.dropdown', relatedTarget)) si (e.isdefefaultprevent ()) return $.attre ('aria', ',', ',', eptims-aria, ',', eptims-aria, ',', eptimys ',', ',', eptimnyry 'falso') $ parent.removeclass ('open'). thrigger ($. event ('hidden.bs.dropdown', relatiTTarget))})} desplazante $ parent.hasclass ('open') ClearMenus () if (! Isactive) {if ('OnTouchStart' en document.DocumentElement &&! $ Parent.Closest ('. Navbar-Nav'). Longitud) {// Si Mobile usamos un backdrop porque los eventos de clics no deleguen $ (document.createElement ('div') .addclass ('' ' .instafter ($ (this)) .On ('click', clearMenus)} var relatedTarget = {RelationTarget: this} $ parent.trigger (e = $ .event ('show.bs.dropdown', relatiTtarget)) if (e.isdefaultPreventent ()) return $. .TogglecLass ('Open') .trigger ($. Event ('Shows.bs.dropdown', RelationTarget))} return false} Dropdown.prototype.keydown = function (e) {if (!/(38 | 40 | 27 | 32)/. $ (this) e.preventDefault () e.stoppropagation () if ($ this.is ('. Diable,: discapacitado')) return var $ parent = getParent ($ this) var isactive = $ parent.hasclass ('open') if (! isactive && e.which! = 27 || isactive && e. which == 27) {if (whichhchhch) $ parent.find (toggle) .trigger ('focus') return $ this.trigger ('click')} var desc = 'li: no (.disable): visible a' var $ elementos = $ parent.find ('. Dropdown-Menu' + Desc) if (! $ items.length) Var índice = $ items.index (e.target) if (e.whichich &= 38 && 38 && 38 && index. (E.which == 40 && index <$ items.length - 1) índice ++ // down if (! ~ index) index = 0 $ items.eq (index) .trigger ('focus')} // definición de complemento desplegable // ========================================================================= Plugin (opción) {return this.each (function () {var $ this = $ (this) var data = $ this.data ('bs.dropdown') if (! Data) $ this.data ('bs.dropdown', (data = new dropdown (this))) if (typeOf Option == 'String') data [opción] .call ($)})} Var = $. = Complemento $ .fn.dropdown.constructor = desplegable // desplegable sin conflicto // =================================== $ .fn.dropdown.noconflict = function () {$. ================================================================================= ================================================================================= $ (documento) .on ('click.bs.dropdown.data-api', clearMenus) .on ('click.bs.dropdown.data-api', '.dropdown form', function (e) {e.stoppropagation ()}) .on ('click.bs.drope.data-api', toggle, showdown.pototype.toggle) .on ('keydown.bs.dropdown.data-api', toggle, dropdown.prototype.keydown) .on ('keydown.bs.dropdown.data-api', '.dropdown-menu', desplegable.prototype.keydown)} (jquery);La estructura del código JavaScript se puede dividir en tres partes:
1. Líneas de definición de clase 1-125
2. Líneas de definición de complemento 126-144
3. Resolver líneas de conflicto 148-153
4. Aplicar a las líneas de elementos de menú desplegable estándar 155-166
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.