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:
Grundlegende HTML -Vorlagen
Wir müssen eine grundlegende HTML -Vorlage verwenden, damit wir die erforderliche Bootstrap -Datei aufnehmen 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: <link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel = "Stylesheet">
Es ermöglicht allen Twitter -Bootstrap -CSS, in unseren Vorlagen wirksam zu werden.
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.
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.
<P> Lorem Ipsum Dolor Sit Amet, Abschnitt Apiscing Elit, SED -Diam Nicht -Nibh Euismod Tincidunt Ut Laoreet Dolore Magna Aliquam Erat Volutpat. Ut wisi enim ad minimum venia, quis nostrud -Übung Sta Ullamcorper Suscipit lobortis nisl ut aliquip ex ea comodo 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 uns Twitter Bootstrap hier zur Verfügung stellt.
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.
abschließend
Mit den Funktionen von Twitter Bootstrap haben wir dieses sehr schnelle grundlegende Bootstrap -Tutorial gegeben. Nehmen Sie sich jedoch etwas Zeit, um mehr offizielle Dokumente zu üben und zu lesen, und Sie werden bald ein Bootstrap -Experte werden.
Nach dem Lesen dieses Tutorials sollten Sie verstehen, wie Sie Rastersysteme verwenden, die Grundprinzipien verschiedener Arten von Navigation und reaktionsschnellem Design.
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.