Bootstrap est le cadre HTML, CSS et JS les plus populaires pour développer des dispositions réactives, des projets Web d'abord mobiles. - Documentation chinoise bootstrap
Bootstrap est devenu le cadre de développement frontal le plus populaire en raison de sa prise en charge de la disposition réactive, de la priorité de l'appareil mobile et facile à utiliser et facile à apprendre.
La conception réactive de Bootstrap, le développement des composants et le développement du plug-in JavaScript et les méthodes de développement de scripts de prétraitement méritent également d'être apprises.
code source
Téléchargement et compilation du code source
Il est recommandé de télécharger le code source bootstrap le plus récent et le plus complet sur GitHub.
GitHub est un référentiel d'hébergement du code source bootstrap qui contient non seulement le code source, mais également les fichiers source de la documentation bootstrap. Par conséquent, vous pouvez parcourir des documents sur la machine locale en compilant et en exécutant le code source de document sans réseau.
Répertoire de code source
Le répertoire de code source bootstrap contient:
• Document Deployment Code Subdirectory_GH_PAGES /
• Document Docs de sous-répertoire de code source /
• Bootstrap Deployment Code Subdirectory Dist /
• Bootstrap Script Subdirectory JS /
• Subdirectory de style bootstrap moins /
• Fonts de sous-répertoire de police bootstrap /
• Grunt Build Tool Script Script Subdirectory Grunt /
• NUGET SUBDIDERCET NUGET NUGET /
• De nombreux fichiers de configuration
Point d'entrée
Le code source du cadre bootstrap est très complexe et il est sans aucun doute difficile d'analyser du point de vue du cadre de développement de l'auteur. Le problème peut être simplifié, sans prêter attention à la façon dont le cadre est construit ou déployé, mais se concentrant uniquement sur le fonctionnement du cadre, à savoir les pièces HTML, CSS / moins et JS.
Grâce à l'idée de division et de gouvernance, les problèmes complexes sont décomposés en de nombreux problèmes simples et résolus. Lorsque tous les petits problèmes seront résolus, des problèmes complexes seront facilement résolus.
Divisez l'intégralité du cadre de bootstrap en composants, prenez les composants comme point d'entrée, comprenez leur principe de travail, puis analysez progressivement l'ensemble du cadre.
Analyse des composants
Dropdown menu déroulant
Code html
<! - Composant: menu déroulant -> <div> <! - Bouton de déclenchement -> <Button Type = "Button" Data-Toggle = "Dropdown"> Dropdown <span> </span> </ Button> <! - Drop-Down Menu -> <ul> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"> href = "#"> autre chose ici </a> </li> </ul> </div>
Remarque: L'attribut accessible aRIA- * dans le code source est supprimé du code pour une analyse facile. Il ne peut pas être omis dans les applications pratiques. Le style du bouton n'est pas étendu ici pour analyse
Code CSS
// Dropdown Arrow / Caret.caret {affichage: bloc en ligne; Largeur: 0; hauteur: 0; marge-gauche: 2px; Adigne vertical: milieu; Border-top: @ Caret-Width-Base anéminé; Border-top: @ Caret-Width-Base Solid ~ "/ 9"; // IE8 Border-Right: @ Caret-Width-Base Solid Transparent; Border-Left: @ Caret-Width-Base Solid Transparent;} // Le wrapper dropdown (div) .dropup, .dropdown {position: relatif; // Positionnement relatif de l'élément parent} // Empêchez la mise au point sur la bascule de liste déroulante lors de la fermeture de Dropdown.Dropdown-Toggle: Focus {Outline: 0;} // Le menu déroulant (UL) .Dropdown-MENU {position: Absolute; // Positionnement absolu des éléments enfants en haut: 100%; // Le menu déroulant est proche du bord inférieur de l'élément parent à gauche: 0; Z-index: @ zindex-dropdown; Affichage: aucun; // Masquer par défaut, lorsque le bouton de déclenchement s'affiche (affichage: bloc) flottant: gauche; largeur min: 160px; rembourrage: 5px 0; marge: 2px 0 0; // remplacer le style de liste UL par défaut: aucun; FONT-SIZE: @ FONT-SIZE-BASE; Texte-aligne: gauche; Background-Color: @ Dropdown-BG; Border: 1px solide @ dropdown-fallback-border; // IE8 Fallback Border: 1px solide @ dropdown border; Border-Radius: @ Border-Radius-Base; .box-shadow (0 6px 12px rgba (0,0,0, .175)); Clip d'arrière-plan: Padding-Box; // aligne le menu déroulant à droite & .pull-right {droite: 0; Gauche: Auto; } // Diviseur horizontal avec une hauteur de 1px.divider {.nav-divider (@ dropdown-divider-bg); } // Liens dans le menu déroulant> Li> a {affichage: bloc; rembourrage: 3px 20px; Clear: les deux; Police-poids: normal; LINE-HEIGHT: @ line-height-base; Couleur: @ Dropdown-Link-Color; Espace blanc: Nowrap; // Empêche les liens de l'enveloppe}} // hover / focus State.dropdown-menu> li> a {&: hover, &: focus {text-decoration: aucun; Couleur: @ Dropdown-Link-Hover-Color; Background-Color: @ Dropdown-Link-Hover-BG; }} // actif state.dropdown-menu> .active> a {&, &: hover, &: focus {Color: @ dropdown-link-active-color; Décoration du texte: aucune; Aperçu: 0; Background-Color: @ Dropdown-Link-Active-BG; }} // Affichez le menu déroulant.Open {> .Dropdown-MENU {affichage: block; // Show} // supprime le contour lorsque: la mise au point est déclenchée> a {contour: 0; }} // menu positioning.dropdown-menu-right {Left: auto; // Réinitialise la valeur par défaut de `.dropdown-menu` droit: 0;} //` .Pull-right` NAV composant..dropdown-menu-left {Left: 0; Droite: auto;} // En-têtes de section déroulante.Dropdown-header {display: block; rembourrage: 3px 20px; Font-Size: @ Font-Size-Small; LINE-HEIGHT: @ line-height-base; Couleur: @ Dropdown-Header-Color; Espace blanc: Nowrap; // comme avec> li> a} // non-Dropdown menu aire.Dropdown-BackDrop {position: fixe; à gauche: 0; à droite: 0; en bas: 0; en haut: 0; Z-index: (@ zindex-dropdown - 10); // Assurez-vous que le menu déroulant ne sera pas fermé lorsque vous cliquez sur le menu déroulant} // Dropdown aligné droit.Pull-Right> .Dropdown-Menu {Right: 0; Gauche: Auto;} // permettre aux dropdowns de monter de bas (aka, dropup-menu) //// ajouter .dropup après la classe standard .dropdown et vous êtes prêt, bro.// too: abstract ceci de sorte que les styles fixes Navbar ne soient pas placés ici? .Dropup, .navbar-fixed-bottom .dropdown {// inverse the Caret .Caret {border-top: 0; Border-Bottom: @ Caret-Width-Base anéminé; Border-Bottom: @ Caret-Width-Base Solid ~ "/ 9"; // contenu ie8: ""; } // Positionnement différent pour le menu inférieur .dropdown-menu {top: auto; En bas: 100%; marge-fond: 2px; }} // Alignement des composants //// réitérer par Navbar.less et l'alignement du composant modifié là-bas. @ Media (min-width: @ grid-float-brisemberpoint) {.navbar-right {.dropdown-menu {.dropdown-menu-right (); } // nécessaire pour les remplacements du menu aligné droit par défaut. // supprimera Come V4 selon toute vraisemblance. .dropdown-menu-left {.dropdown-menu-left (); }}}Le comportement de ce composant de menu déroulant est: lorsque le bouton de déclenchement est cliqué, le menu déroulant s'affiche en dessous, et lorsque la zone de menu non-Down est cliquée, le menu déroulant est masqué.
Principe de mise en œuvre:
1. Seul le bouton de déclenchement s'affiche au début, le menu déroulant par défaut.
2. Lorsque le bouton de déclenchement est cliqué, ajoutez la classe .Open après .dropdown. Dans .Open, la valeur d'affichage de .dropdown-menu est le bloc. Ajoutez donc / supprimer.Open-Classe signifie afficher / masquer le menu déroulant.
3. Lorsque vous cliquez sur la zone de menu sans délai, .Dropdown supprime la classe.Open, c'est-à-dire cache le menu déroulant. Le principe de la mise en œuvre de la zone de menu sans drop-down est que le positionnement fixe, le carrelage et l'index z sont plus petits que le menu déroulant, de sorte que le menu déroulant ne sera pas masqué lorsque vous cliquez sur le menu déroulant.
Code javascript
/ * ========================================================================. ==========================================================================. ========================================================================. ==========================================================================. ========================================================================. ==========================================================================. ==========================================================================. ==========================================================================. Licencié sous MIT (https://github.com/twbs/bootstrap/blob/master/license) * ============================================================================. ============================================================================. var backdrop = '.Dropdown-BackDrop' var toggle = '[data-toggle = "dropdown"]' var dropdown = function (élément) {$ (élément) .on ('click.bs.dropdown', this.toggle)} dropdown.version = '3.3.6' function getParent ($ this) {select $ this.attr ('href') Selector = Selector && /#@a-za-z lodal/.test(selector) && selector.replace (/.*(?=#@^^/ S] * $) /, '') // Strip for ie7} var $ parent = Selector && $ (Selector) return $ $ & $ Parent.length? $ parent: $ this.parent ()} fonction clearmenus (e) {if (e && e.which === 3) return $ (en arrière && e.type == 'click' && /input|xtarea/i.test(e.target.tagname) && $ .Contains ($ parent [0], e.target)) return $ parent.trrigger (e = $ .event ('hide.bs.dropdown', lié 'false') $ parent.removeclass ('open'). Trigger ($. event ('Hidden.bs.dropdown', lingTarget))})} dropdown.prototype.toggle = fonction (e) {var $ this = $ (this) if ($ this.is ('. Disable $ parent.hasclass ('open') clearmenus () if (! isactive) {if ('aTouchStart' dans document.documentElement &&! $ parent.closest ('. Navbar-nav'). Length) {// si mobile nous utilisons un arrière .Insertafter ($ (this)) .on ('click', clearmenus)} var lisettarget = {lisetTarget: this} $ parent.trigger (e = $ .event ('show.bs.dropdown', lisettarget)) if (e.isdefaultpreveted ()) return $ this .trrigger ('focus') .Atrat .toggleclass ('open') .trigger ($. Event ('montré.bs.dropdown', lisetTarget))} return false} dropdown.prototype.keydown = function (e) {if (! / (38 | 40 | 27 | 32) /. test (e.which) || /Input|xtaa/i.test(e.Target.Tagname)) Retour = $ )(e.Target.Tagname)) e.PreventDefault () e.Stoppropagation () if ($ this.is ('. Disabled ,: handicap')) return var $ parent = getParent ($ this) var isactive = $ parent.hasclass ('open') if (! Isactive && e.which! = 27 || isactive && e.which == 27) {if (e.which == 27) $ parent.find (toggle) .trigger ('focus') return $ this.trigger ('click')} var desc = 'li: not (.disabled): visible a' var $ items = $ parent.find ('. dropdown-menu' + desc) if (! $.Length) return var index = $ itels.index (e.target) if (e.which == 38 & index> 0) (e.which == 40 && index < $items.length - 1) index++ // down if (!~index) index = 0 $items.eq(index).trigger('focus') } // DROPDOWN PLUGIN DEFINITION // ====================================================== function Plugin (option) {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 [option] .call ($ this)})} var old = $. $ .fn.dropdown = plugin $ .fn.dropdown.constructor = dropdown // dropdown no conflit // ============================== $. =====================================================================. =====================================================================. $ (document) .on ('click.bs.dropdown.data-api', clearmenus) .on ('click.bs.dropdown.data-api', '.dropdown form', function (e) {e.stoppropagation ()}) .on ('click.bs.dropdown.data-ap', toggle. .on ('keydown.bs.dropdown.data-api', toggle, dropdown.prototype.keydown) .on ('keydown.bs.dropdown.data-api', '.dropdown-menu', dropdown.prototype.keydown)} (jQuery);La structure de code JavaScript peut être divisée en trois parties:
1. Lignes de définition de classe 1-125
2. Lignes de définition du plugin 126-144
3. Résoudre les lignes de conflit 148-153
4. Appliquer aux éléments de menu déroulant standard Lignes 155-166
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.