Bootstrap ist das beliebteste HTML-, CSS- und JS-Framework für die Entwicklung reaktionsschneller Layouts und mobile Webprojekte. - Bootstrap Chinesische Dokumentation
Bootstrap ist aufgrund seiner Unterstützung für Responsive Layout, Priorität des mobilen Geräts und einfach zu bedienende und leicht zu lernen.
Das Responsive Design, die Komponentenentwicklung und die JavaScript-Plug-in-Entwicklung sowie die Vorverarbeitungskriptentwicklungsmethoden sind ebenfalls lernend.
Quellcode
Quellcode -Download und -Kompilation
Es wird empfohlen, den neuesten und vollständigsten Bootstrap -Quellcode auf GitHub herunterzuladen.
GitHub ist ein Bootstrap -Quellcode -Hosting -Repository, das nicht nur den Quellcode, sondern auch die Quelldateien der Bootstrap -Dokumentation enthält. Daher können Sie Dokumente auf dem lokalen Computer durch das Kompilieren und Ausführen des Dokumentenquellcode ohne Netzwerk durchsuchen und ausführen.
Quellcode -Verzeichnis
Das Bootstrap -Quellcode -Verzeichnis enthält:
• Dokumentbereitstellungscode subdirectory_gh_pages/
• Dokument -Quellcode -Unterverzeichnis Dokumente/
• Bootstrap -Bereitstellungscode -Unterverzeichnis dist/
• Bootstrap -Skript -Unterabzeichnung JS/
• Bootstrap -Style -Unterverzeichnis weniger/
• Bootstrap -Schriftart -Verzeichnis -Schriftarten/
• Grunzen -Build -Toolskript -Unterabführungsverzeichnis grunzen/
• Paketmanager NUGET SUBDAURECTORY NUGET/
• Viele Konfigurationsdateien
Eintrittspunkt
Der Quellcode des Bootstrap -Frameworks ist sehr komplex, und es ist zweifellos schwierig, aus der Perspektive des Entwicklungsrahmens des Autors zu analysieren. Das Problem kann vereinfacht werden, ohne darauf zu achten, wie das Framework erstellt oder bereitgestellt wird, aber nur darauf konzentriert, wie das Framework funktioniert, nämlich die Teile HTML, CSS/LEWS und JS.
Durch die Idee von Aufteilung und Governance werden komplexe Probleme in viele einfache Probleme unterteilt und gelöst. Wenn alle kleinen Probleme gelöst werden, werden komplexe Probleme leicht gelöst.
Teilen Sie das gesamte Bootstrap -Framework in Komponenten, nehmen Sie Komponenten als Einstiegspunkt, verstehen Sie ihr Arbeitsprinzip und analysieren dann allmählich das gesamte Framework.
Komponentenanalyse
Dropdown -Menü Dropdown
HTML -Code
<!-Komponente: Dropdown-Menü-> <div> <!-Trigger-Taste-> <button type = "button" data-toggle = "Dropdown"> Dropdown <span> </span> </button> <!-Dropdown-Menü-> <ul> <li> <a href = "#"> Action </a> <li> <a href = " href = "#"> Etwas anderes hier </a> </li> </ul> </div>
Hinweis: Das zugängliche Attribut-Aria-* wird im Quellcode aus dem Code entfernt, um eine einfache Analyse zu erhalten. Es kann nicht in praktischen Anwendungen weggelassen werden. Der Button -Stil wird hier zur Analyse nicht erweitert
CSS -Code
// Dropdown-Pfeil/Caret.Caret {Anzeige: Inline-Block; Breite: 0; Höhe: 0; Rand-Links: 2px; vertikaler Align: Mitte; Border-Top: @Caret-Width-Base gestrichelt; Border-Top: @Caret-Width-Base Solid ~ "/9"; // IE8 Border-Light: @Caret-Width-Base Solid Transparent; Border-Links: @Caret-Width-Base Solid Transparent;} // Der Dropdown-Wrapper (Div) .dropup, .dropdown {Position: Relativ; // Relative Positionierung des übergeordneten Elements} // Verhindern Sie den Fokus auf den Dropdown-Umschalter beim Schließen von Dropdowns.dropdown-toggle: Focus {umriss: 0;} // Das Dropdown-Menü (UL) .dropdown-menu {Position: Absolut; // absolute Positionierung von Kinderelementen Top: 100%; // Das Dropdown -Menü befindet sich in der Nähe der unteren Kante des übergeordneten Elements links: 0; Z-Index: @Zindex-Dropdown; Anzeige: Keine; // standardmäßig ausblenden, wenn die Triggertaste angezeigt wird (Anzeige: Block) Float: Links; Min-Width: 160px; Polsterung: 5px 0; Rand: 2px 0 0; // Standard-UL-Listenstil überschreiben: keine; Schriftgröße: @font-size-Base; Text-Align: links; Hintergrundfarbe: @Dropdown-Bg; Grenze: 1PX Solid @Dropdown-Fallback-Border; // IE8 Fallback Grenze: 1PX Solid @Dropdown-Border; Border-Radius: @Border-Radius-Base; .box-shadow (0 6px 12px rgba (0,0,0, .175)); Hintergrund-Clip: Padding-Box; // richtet das Dropdown-Menü nach rechts und .pull-right {rechts: 0; Links: Auto; } // Horizontaler Teiler mit Höhe von 1px.divider {.nav-divider (@Dropdown-Divider-Bg); } // Links im Dropdown -Menü> li> a {display: block; Polsterung: 3px 20px; klar: beides; Schriftgewicht: normal; Zeilenhöhe: @Line-Height-Base; Farbe: @Dropdown-Link-Color; weißer Raum: Nowrap; // Verhindern, dass Links einwickeln}} // Hover/Focus state.dropdown-menu> li> {&: hover, &: Focus {Textdekoration: Keine; Farbe: @Dropdown-Link-Hover-Color; Hintergrundfarbe: @Dropdown-Link-Hover-BG; }} // active state.dropdown-menu> .active> a {&,: schwebe, &: fokus {color: @Dropdown-link-active-color; Textdekoration: Keine; Umriss: 0; Hintergrundfarbe: @Dropdown-Link-Active-BG; }} // Zeigen Sie das Dropdown-Menü an. // anzeigen} // Entfernen Sie den Umriss, wann: Fokus ausgelöst wird> A {umriss: 0; }} // Menüpositionierung.dropdown-menu-right {links: auto; // Die Standardeinstellung von `.dropdown-menu` rechts zurücksetzen: 0;} //` .pull-right` nave-component..dropdown-menu-left {links: 0; Rechts: auto;} // Dropdown-Abschnitt Header.Dropdown-Header {Anzeige: Block; Polsterung: 3px 20px; Schriftgröße: @font-size-small; Zeilenhöhe: @Line-Height-Base; Farbe: @Dropdown-Header-Color; weißer Raum: Nowrap; // wie bei> li> a} // Nicht-Dropdown-Menübereich.Dropdown-Backdrop {Position: behoben; links: 0; Rechts: 0; unten: 0; Top: 0; Z-Index: (@Zindex-dropdown-10); // Stellen Sie sicher, dass das Dropdown-Menü beim Klicken auf das Dropdown-Menü nicht geschlossen wird. Links: auto;} // Dropdowns zulassen, nach unten zu gehen (auch bekannt als Dropup-moenu) //// einfach. Border-Bottom: @Caret-Width-Base gestrichelt; Border-Bottom: @Caret-Width-Base Solid ~ "/9"; // IE8 Inhalt: ""; } // unterschiedliche Positionierung für das unterste Menü .dropdown-menu {top: auto; unten: 100%; Randboden: 2px; }} // Komponentenausrichtungen ////. wiederholen Sie per navbar.less und die modifizierte Komponentenausrichtung dort. @Media (min-width: @grid-float-breakpoint) {.navbar-right {.dropdown-menu {.dropdown-menu-right (); } // für Überschreibungen des rechts ausgerichteten Standardmenüs erforderlich. // wird COME V4 höchstwahrscheinlich entfernen. .dropdown-menu-links {.dropdown-menu-links (); }}}Das Verhalten dieser Dropdown-Menükomponente lautet: Wenn die Schaltfläche Trigger klickt, wird das Dropdown-Menü darunter angezeigt. Wenn der Menübereich ohne Drop-Down-Menü klickt, wird das Dropdown-Menü versteckt.
Implementierungsprinzip:
1. Die Taste Trigger wird zu Beginn angezeigt, das Dropdown-Menü .dropdown-Wrapper-Standard wird geschlossen und .Dropdown-Menu-Häute Anzeige: Keine standardmäßig standardmäßig
2. Wenn auf die Schaltfläche Trigger geklickt wird, fügen Sie die Klasse hinzu. Open nach .dropdown. In .Open ist der Anzeigewert von .dropdown-menu Block. Fügen Sie also add/REMED.OPEN-Klasse bedeutet, das Dropdown-Menü anzeigen/auszublenden.
3.. Wenn Sie auf den Menübereich ohne Dropdown klicken, löscht .Dropdown die Klasse. Open, dh das Dropdown-Menü. Das Prinzip der Implementierung des nicht-drop-down-Menübereichs besteht darin, dass die feste Positionierung, Fliesen und Z-Index kleiner als das Dropdown-Menü sind, sodass das Dropdown-Menü beim Klicken auf das Dropdown-Menü nicht versteckt ist.
JavaScript -Code
/* =================================================================== ====================================================================== =================================================================== ====================================================================== =================================================================== ====================================================================== ====================================================================== ====================================================================== Lizenziert unter MIT (https://github.com/twbs/bootstrap/blob/master/license) * ====================================================================== ====================================================================== var backdrop = '.dropdown-backdrop' var toggle = '[data-toggle = "dropdown"]' var Dropdown = Funktion (Element) {$ (Element) .on ('click.bs.dropdown', this.toggle) Dropdown.version = '3.3. $ this.attr ('href') selector = selector && /#..a-za- zlowl. $ Elternteil: $ this.Parent ()} Funktion clearmenus (e) {if (e && e.Which === 3) return E.Type == 'Click' && /Input| 'false') $ parent.removeclass ('open'). Trigger ($. Ereignis ('Hidden.bs.dropdown', RelatedTarget)}) Dropdown.Prototype.Toggle = Funktion (e) {var $ this = $ (this) Wenn ($ this.is ('. ('. $ parent.hasclass ('open') clearMenus () if (! isActive) {if ('ontouchstart' in document.documentElement &&! .insertafter ($ (this)) .on ('click', clearMenus)} var relatedTarget = {relatedTarget: this} $ parent.trigger (e = $ .event ('show.bs.dropdown', relatedTarget)) if (e.isDefaultPrevented () return $ this .trigger ('truigy'). .ToggleClass ('Open') .Tigger ($. Ereignis ('teamd.bs.dropdown', verwandtes Target)} return false} Dropdown.Prototype.Keydown = Funktion (e) {if (!/(38 | 40 | 27 | 32)/. test (e.hich) || /inputupuTextAra | $ (this) e.preventDefault () E.Stoppropagation () if ($ this.is ('. Behindert,: Behindert') return var $ parent = getParent ($ this) var isactive = $ parent.hasclass ('Open') if (! $ parent.find (Toggle) .Tigger ('Focus') return $ this.trigger ('click')} var desc = 'li: nicht (.Dialabled): sichtbar a' var $ items = $ parent.find ('. Dropdown-menu' + Desc) if (! == 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 ('bsropdown') if (! data) $ that.data ('Bs.dropdown', (data = new Dropdown (this))) if (typeof option == 'String') Data [option]. USD. =============================================================================== =============================================================================== $(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-api', toggle, Dropdown.prototype.toggle) .on ('keydown.bs.dropdown.data-api', Toggle, Dropdown.Prototype.KeyDown) .on ('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.Prototype.Keydown)} (jQuery);Die JavaScript -Codestruktur kann in drei Teile unterteilt werden:
1. Klasse Definition Zeilen 1-125
2. Plugin Definition Zeilen 126-144
3.. Konfliktlinien auflösen 148-153
4. Anwenden Sie auf Standard-Dropdown-Menüelemente Zeilen 155-166
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.