Mit dem Hauptzweck dieses Artikels können Sie lernen, die Twitter -Bootstrap innerhalb von 20 Minuten zu erstellen. Der Bau einer Website wird unten eingeführt:
Das erste, was zu sagen ist, ist, dass Twitter Bootstrap ein sehr ausgezeichnetes Front-End-Open-Source-Framework ist. Es bietet detaillierte Anwendungsfälle für alle wichtigen Gruppierungen, sodass Sie durch Kopieren und Einfügen problemlos an Ihr Design angebracht werden können.
Grundlegende HTML -Vorlagen
Wir müssen eine grundlegende HTML -Vorlage verwenden, damit wir die benötigte Bootstrap -Datei einfügen können. Hier ist der Beginn unseres Twitter -Bootstrap -Projekts, kopieren Sie diese Codes in eine Datei und nennen es IT Index.html.
<! DocType html> <kopf> <titels> Twitter -Bootstrap -Tutorial - Ein reaktionsschnelles Layout -Tutorial </title> <style type = 'text/csS'> Body {Background -Color: #ccc; } </style> </head> <body> </body> </html>In diesem Code haben wir einige CSS hinzugefügt, um den Hintergrund der Seite hellgrau zu machen, da wir auf diese Weise verschiedene Spalten in unserem Design leicht sehen können, was das Verständnis erleichtert.
Stellen Sie die Twitter -Bootstrap -Datei vor
Um Twitter Bootstrap zu verwenden, müssen wir nur eine Datei in unsere Vorlage einführen. Es gibt viele Möglichkeiten, Dateien einzuführen. Wenn Sie diese Methoden kennen möchten, konsultieren Sie bitte die entsprechenden Dokumente.
Basierend auf dem Ausgangspunkt dieses Tutorials werden wir die Datei mit Bootstrap-combiniert.min.css über CDN vorstellen, ohne Dateien herunterzuladen.
Die Codekopie lautet wie folgt: href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel = "Stylesheet">
Twitter Bootstrap CSS wirkt sich in unseren Vorlagen in Kraft.
Container von Twitter Bootstrap
Die Containerklasse von Bootstrap ist sehr nützlich. Es kann einen zentrierten Bereich auf der Seite erstellen, und dann können wir den Inhalt anderer Standorte einsetzen. Die Containerklasse entspricht der Erstellung einer zentrierten Div -Box mit statischer Breite und einem Maginwert von Auto. Der Vorteil der Containerklasse von Twitter -Bootstrap besteht darin, dass sie reaktionsschnell ist und die beste Breite basierend auf der aktuellen Bildschirmbreite für praktische Zwecke berechnet.
Verwenden Sie im Body -Tag die Containerklasse, um eine DIV zu erstellen. Es dient als Haupt -Außenverpackung für andere Codes auf der Seite.
Wenn Sie die Höhe dieses DIV anpassen und seine Hintergrundfarbe auf Weiß setzen, ist der Effekt, den Sie sehen, wie folgt:
Titel und Navigation
Nachdem wir nun einen Ort zum Hinzufügen eines zusätzlichen HTML -Codes haben, können wir den Titeltext hinzufügen und dann die Hauptnavigationsleiste für die Website erstellen.
Fügen Sie den folgenden Text oder den Text hinzu, den Sie ausgewählt haben, zum Div -Tag der Containerklasse.
<h1> Twitter Bootstrap Tutorial </h1>
Es gibt jetzt nicht viel Neues, es ist nur ein Titel. Lassen Sie uns zu dem interessanteren Aspekt der Twitter -Bootstrap -Navigation übergehen.
Bootstrap verfügt über eine NAV -Klasse, mit der wir verschiedene Navigationselemente erstellen können. Sie können den folgenden Code nach dem H1 -Tag hinzufügen.
<div class = 'navbar navbarinvers'> <div class = 'nave-collapse' style = "height: Auto;
Die Navi-Klassen haben alle Stile der Navigationsleiste. Das Hinzufügen der Navi-Invers-Klasse wendet einen coolen schwarzen Stil an, der eine häufige Kombination aus Twitter-Bootstrap ist. Ich schlage vor, diesen Stil zu erweitern, um Ihre einzigartige Navigation zu erstellen. In diesem Tutorial werden wir jedoch immer noch den grundlegenden Bootstrap -Stil verwenden.
In einem DIV mit Klassen-Navigh fügen wir ein weiteres DIV mit Klassennavolapse hinzu und fügen Inline-Stilhöhe hinzu: Auto; Dies gibt Bootstrap mit, dass diese Seite, wenn sich diese Seite in einem Browserfenster mit einer Breite von weniger als 970px befindet, eine komprimierte Schalteransicht bietet.
Wenn Sie die Datei index.html speichern und im Browser öffnen, können Sie diese Änderung feststellen, wenn Sie die Breite des Browserfensters anpassen, wie in der Abbildung gezeigt.
Größer als 979px:
Weniger als 979px:
Darüber hinaus können wir einem HTML -Listenelement eine NAV -Klasse hinzufügen, um mehr Stile aus der Bootstrap -CSS -Datei anzuwenden, oder wir können dem Listenelement "Home" eine aktive Klasse hinzufügen.
Teilen Sie wundervolle Artikel über die Bootstrap -Navigation mit: "Navigation, die jeden Tag von Bootstrap gelernt werden muss", "Navigation, die jeden Tag von Bootstrap gelernt werden muss"
Hauptinhalt und Seitenleiste
Wir haben die Hauptnavigation der Website abgeschlossen, und jetzt müssen wir den Hauptinhaltsbereich und eine Seitenleiste hinzufügen, um weitere Links oder Navigationspfade zu unterstützen. Bitte fügen Sie den folgenden Code zur Navigationsleiste hinzu.
<div id = 'content' class = 'row-fluid'> <div class = 'span9 main'> <h2> Hauptinhaltsabschnitt </h2> </div> <div class = 'span3 SideBar'> <h2> Seitenleiste </h2> </div> </div>
Genau das müssen wir über das Rastersystem von Bootstrap verstehen. Natürlich deckt die offizielle Bootstrap -Dokumentation weitere Details ab, aber wir werden mit den Grundlagen beginnen und Sie besser verstehen lassen.
Das Rastersystem verwendet ein 12-Spal-Layout, was bedeutet, dass eine Seite in 12 identische Spalten aufgeteilt werden kann. Das folgende Bild des offiziellen Bootstrap -Dokuments ergibt eine gute Anzeige.
In dem Code, den wir gerade in der Navigationsleiste eingefügt haben, sehen Sie die Klassen mit dem Namen Span9 und Span3. Sie teilen die Seite in zwei Teile der 9 Spalten links und 3 Spalten rechts auf und bilden unseren Inhaltsbereich und unsere Seitenleiste. Einer der Vorteile der Verwendung eines Rastersystems besteht darin, dass es die Breite der Spalte dynamisch basierend auf der Fensterbreite berechnet, sodass Sie keine Medienabfragen schreiben müssen, damit Ihre Website bei einer beliebigen Bildschirmauflösung funktioniert.
Sie können ihren Effekt beobachten, indem Sie die Anzahl der Spannweiten ändern und die Größe Ihres Browsers einstellen. Sie werden feststellen, dass diese Spalten vertikal gestapelt sind, wenn der Inhaltsbereich weniger als 724px ist.
Jetzt setzen wir den folgenden Text oder einen anderen Text hinter dem H2 -Tag im Hauptinhaltsbereich ein, um die Seite ein wenig zu verlängern.
Kopieren Sie den Code wie folgt: PSUM Dolor Sit Amet, Abschnitt Adipiscing Elit, SED -Diam Nonummy Nibh Euismod Tincidunt Ut Laoreet Dolore Magna Aliquam Erat Volutpat. Ut wisi enim ad mindestens veniam, quis nostrud -Übung Sta Ullamcorper Suscipit lobortis nisl ut aliquip ex ea commodo Folg. Duis Autem vel eum iriure dolor in hendrerit in vulputater velit esse -matestie konsequenz Nam liber liber tempor cum Soluta nobis eleifend Option Congue Nihil Imperdiet Doming ID Quod Mazim Placerat Facer Possim Annahme. </P>
<p> Typi Non -Hubent Clariitatem Insitam; est useus legitis in iis qui facit eorum clariitatem. Untersuchungen Demonstratestraverunt Clariitres Legende Me Lius Quod II Legunt Saepius. Claritas est etiam Process dynamicus, Qui Sequenzer Mutationem Consruetudium legorum. Mirum est Notare Quam Littera Gothica, Quam nunc putamus parum claram, Anneposuerit Litterarum Format Humanitatis pro Seaha Quarta Decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </P>
Jetzt wird die Website wie folgt angezeigt:
Seitenleiste Navigation
Sie können alle Navigationselemente sehen, die Twitter Bootstrap uns hier bietet (Twitter.github.com/bootstrap/components.html#navs).
Wir werden die vertikale Registerkarte verwenden, um einen zusätzlichen Navigationsbereich zu erstellen. Kopieren und fügen Sie den folgenden Code in das H2 -Tag der Seitenleiste ein und fügen Sie sie ein.
<ul> <li> <a href = '#'> Ein anderer Link 1 </a> </li> <li> <a href = '#'> Ein anderer Link 2 </a> </li> <li> <a href = '#'> Ein anderer Link 3 </a> </li> </ul>
Dies ist eine einfache Anzeige! Der obige Code ist buchstäblich nur eine nicht ordnungsgemäße Liste mit Klassen Nav-Tabs und Navigationsstapel, erstellt jedoch ein Navigationspanel für uns.
Wenn man sich den endgültigen Effekt ansieht, ist eine auf Twitter -Bootstrap basierende Seite abgeschlossen.
Nachdem Sie dieses Tutorial gelesen haben, sollten Sie in der Lage sein, Bootstrap zu verwenden, um eine grundlegende Reaktions -Layout -Seite zu erstellen, das Netzsystem zu verstehen und Bootstrap zu verwenden, um zu navigieren, Navigationsbalken zu navigieren und die Grundlagen des reaktionsschnellen Designs zu verstehen.
Weitere Inhalte über Bootstrap finden Sie auch in speziellen Themen: "Bootstrap Learning Tutorial".
Alle oben genannten sind das Wissen, das für die Verwendung von Twitter -Bootstrap erforderlich ist. Ich hoffe, es wird für das Lernen aller hilfreich sein. Ich hoffe, Sie können mehr Zeit verbringen und perfekt machen. In naher Zukunft können Sie Experte für Bootstrap werden.