Wie verwende ich das Bootstrap-Framework? Einführung in die Verwendung des Bootstrap-Frameworks

Bootstrap ist eines der beliebtesten Frontend-Frameworks von Twitter. Es ist einfach und flexibel und macht die Webentwicklung jedoch nicht schneller >So verwenden Sie das Bootstrap-Framework, im folgenden Artikel erfahren Sie, wie Sie das Bootstrap-Framework verwenden.

Lassen Sie uns ohne weitere Umschweife direkt zum Text übergehen~

(Kostenlose Kursempfehlung: Bootstrap-Tutorial)

1 , einige in Bootstrap verwendete HTML-Elemente und CSS-Attribute müssen die Seite auf den HTML5-Dokumenttyp einstellen, d. h. oben auf der Seite hinzufügen

2 . Layout-Container: Bootstrap muss einen .container- oder Container-Fluid-Container (Container, der das gesamte Ansichtsfenster einnimmt) für den Seiteninhalt und das Rastersystem umschließen.

3 Rastersystem: Bootstrap bietet ein flüssiges Rastersystem mit bis zu 12 Spalten. Sie können schnell ein Rasterlayout erstellen, indem Sie .row für Zeilen und .col-xs-4 verwenden, eine Spalte für die Breite.

4 , Bootstrap-Typografie und Link-Stile legen grundlegende globale Stile fest.

Die Schriftgröße ist auf 14 Pixel und die Zeilenhöhe auf 1,428 eingestellt. Das Element

e388a4556c0f65e1904146cc1a846bee (Absatz) wird ebenfalls mit einem unteren Rand festgelegt, der der Hälfte der Zeilenhöhe entspricht (d. h. 10 Pixel).

Grundlegender Stil

Schriftsatz:

1. Titel, kann in den Kategorien .h1 bis .h6 verwendet werden Der Text des zugehörigen Attributs erhält einen Titelstil und der Untertitel wird im Titel durch das Tag d015d241ae6d34c34210679b5204fe85 oder ein Element mit der Klasse .small markiert.

Textkörper: Die .lead-Klasse markiert Absätze.

2. Inline-Text, verwenden Sie f920514e6447cf1d171079d1371f007f Die Beschriftung stellt den Anmerkungstext dar: 823db3943044a0a9a620ada8d4b1d965delete, 2e44d2d3284d23d932e1fd85f3d4cf3auseless, 426be984ffbbb815d7d88e3543a85d91insert, 88f336217b3880082bb52d49b5de60a5underline, d015d241ae6d34c34210679b5204fe85small (die Schriftgröße des übergeordneten Containers). 85 %), 8e99a69fbe029cd4e2b854e244eab143Hervorhebung, 907fae80ddef53131f3292ee4f81644bkursiv.

3. Textausrichtungsklasse, Text-Links, Text-Mitte, Text-Rechts, Text-Ausrichtung, Text-Nowrap

4 -lowercase, text-uppercase, text-capitalize

5. Legen Sie das Titelattribut für das Element 8a7974376be5f6c00c121222b727adb9 fest und verwenden Sie die Klasse .initialism, um die Schriftgröße festzulegen etwas kleiner werden. Beispiel: 3d9b10a8a4853b7790248fb60477a8e3attr4f2d06a7b2d26e0ad682bc6a608fa811

6 Die Adresse wird im Format für den täglichen Gebrauch angezeigt. Fügen Sie einfach 0c6dc11e160d3b678d68754cc175188a hinzu Stil.

7. Zitat: Schließen Sie das HTML-Element in b8a712a75cab9a5aded02f74998372b4 ein, um den Zitatstil anzuzeigen. Für direkte Zitate empfiehlt sich die Verwendung des e388a4556c0f65e1904146cc1a846bee-Tags.

8. Liste, Liste ohne Stil entfernt den Standardlistenstil Eine Reihe von Elementen mit Stilen und linken Rändern (nur direkte untergeordnete Elemente). Die list-inline-Klassensätze zeigen Folgendes an: inline-block; Und fügen Sie etwas Abstand hinzu, um alle Elemente auf derselben Linie zu platzieren. Die dl-horizontal-Klasse richtet Phrasen und ihre Beschreibungen innerhalb von 5c69336ffbc20d23018e48b396cdd57a aus.

Code:

ffbe95d20f3893062224282accb13e8f umschließt Codeausschnitte im Inline-Stil

5e4e803d53d659f332070b5d4aa430db markiert den vom Benutzer über die Tastatur eingegebenen Inhalt

e03b848252eb9375d56be284e690e873 Mit der Pre-Scrollable-Klasse können bis zu 350 Pixel mit vertikaler Bildlaufleiste eingerichtet werden.

b7f90f73cad438258bf67e62f79b2113 Label-Tag-Variable

162cd570ab1483e383d78dcb7f452f7c

Tabelle:

.table-Klasse gibt den Grundstil an,

.table-striped gestreifter Stil,

.table-bordered-Klasse hat einen Rahmenstil,

.table-hover-Klasse hat einen Maus-Hover-Stil,

.table-confided-Klasse kompakter Stil.

Statusklasse (Zeilen- oder Zelleneinstellungsfarbe): aktiv, Erfolg, Info, Warnung, Info.

Umschließen Sie jedes .table-Element mit einem auf .table reagierenden Element, um eine reaktionsfähige Tabelle zu erstellen, die auf Geräten mit kleinem Bildschirm (weniger als 768 Pixel) horizontal scrollt. Die horizontale Bildlaufleiste verschwindet, wenn der Bildschirm größer als 768 Pixel ist.

Formular:

1. Einfaches Beispiel:

Alle .form-control ist eingestellt Die Klassen d5fd7aea971a85678ba271703566ebfd, 4750256ae76b6b9d804861d8f69e79d3 Bei 221f08282418e2996498697df914ce4e-Elementen ist das Breitenattribut standardmäßig auf 100 % eingestellt.

Wickeln Sie das Beschriftungselement und die zuvor erwähnten Steuerelemente ein Die beste Anordnung erhalten Sie in .form-group.

Formulargruppen nicht direkt mit Eingabefeldgruppen mischen. Es wird empfohlen, die Eingabefeldgruppe in der Formulargruppe zu verschachteln.

form-group, input-group, control-group,

2. Inline-Formular:

ff9c23ada1bcecdd1a0fb5d5a0f18437 Die Klasse -inline bewirkt, dass ihr Inhalt linksbündig ausgerichtet ist und sich wie ein Steuerelement auf Inline-Blockebene verhält. Gilt nur, wenn das Ansichtsfenster mindestens 768 Pixel breit ist (jede kleinere Breite des Ansichtsfensters führt dazu, dass das Formular ausgeblendet wird).

Die Breite des Radio-/Mehrfachauswahlfeld-Steuerelements im Inline-Formular ist auf Breite eingestellt:

Wenn Sie die Beschriftung nicht für jedes Eingabesteuerelement festlegen, wird der Bildschirmleser wird nicht in der Lage sein, sich richtig zu identifizieren. Bei diesen Inline-Formularen können Sie es ausblenden, indem Sie die .sr-only-Klasse für die Beschriftung festlegen.

3. Horizontal angeordnete Formulare : Ändern Sie das Verhalten von .form-group, indem Sie die Klasse .form-horizontal zum Formular hinzufügen, sodass es sich wie eine Zeile im Rastersystem verhält

4 : .radio, .radio-inline, .checkbox, .checkbox-inline.

5. Statische Kontrollen : Wenn Sie in einem horizontal angeordneten Formular eine Zeile mit einfachem Text und das Beschriftungselement in derselben Zeile platzieren müssen, fügen Sie einfach die Klasse .form-control-static zum Element e388a4556c0f65e1904146cc1a846bee hinzu.

6. Steuerelementstatus

.disabled-Klasse deaktiviert Steuerelemente. Wenn „disabled“ auf 2b5469ab79cf842344327415c3b3bb95 eingestellt ist, sind alle enthaltenen Steuerelemente deaktiviert.

a-Tags sind hiervon nicht betroffen. Das Attribut

readonly kann Benutzereingaben verhindern. Fügen Sie einfach die Klassen

.has-warning, .has-error oder .has-success zum übergeordneten Element hinzu Kontrollen. Alle in diesem Element enthaltenen .control-label-, .form-control- und .help-block-Elemente akzeptieren die Stile für diese Validierungszustände.

Sie können dem Eingabefeld für den Verifizierungsstatus auch zusätzliche Symbole hinzufügen (beachten Sie, dass dies vom Label-Tag abhängt). Legen Sie einfach die entsprechende .has-feedback-Klasse fest und fügen Sie das richtige Symbol hinzu.

7. Steuerelementgröße

Sie können die Höhe für das Steuerelement über die ähnlichen Klassen .input-lg und .input-sm festlegen, und Sie können die Höhe für das Steuerelement über festlegen .col-lg-* und ähnliche Klassen. Legen Sie die Breite für Beschriftungselemente und Formularsteuerelemente fest, die in .form-horizontal eingeschlossen sind, indem Sie .form-group-lg oder .form- hinzufügen. Gruppen-SM-Klasse.

Sie können die Breite des Eingabefelds oder eines seiner übergeordneten Elemente einfach festlegen, indem Sie es mit einer Spalte im Rastersystem umschließen.

8. Hilfstext: Hilfsblockklasse, Hilfstext auf „Block“-Ebene für Formularsteuerelemente.

Schaltfläche:

1. Basisstil, BTN, BTN-Standard, BTN-Primär, BTN-Erfolg, BTN-Info, BTN-Warnung, btn-danger, aktiv

2. Anzeigeformular, btn-link, btn-block, schließen

3. sm,.btn-xs.

Die Button-Klasse kann über die Elemente 3499910bf9dac5ae3c52d5ede7383485, bb9345e55eb71822850ff156dfde57c8 angewendet werden, es wird jedoch empfohlen, das bb9345e55eb71822850ff156dfde57c8-Element zu verwenden Jeder Browsereffekt.

Bild:

Bildform, img-rounded, img-circle, img-thumbnail, IE8 unterstützt das Attribut „abgerundete Ecken“ in CSS3 nicht.

Auxiliary:

text-muted, text-primary, text-success, text-info, text-warning, text-danger , BG-Primär, BG-Erfolg, BG-Info, BG-Warnung, BG-Gefahr, Dreieckssymbol, Caret , schweben , zentriert

Komponentenstil

Symbol:

200 Ein Schriftsymbol von Glyphicon Halflings. Die Symbolklasse

kann nur auf leere Elemente angewendet werden und kann nicht in Verbindung mit anderen Komponenten verwendet werden.

<span class="glyphicon glyphicon-search"></span>

Menü:

Dropdown-Menüauslöser und Dropdown-Menü in .dropdown umschließen

Menüausrichtung : Standardmäßig werden Dropdown-Menüs automatisch mit 100 % Breite am oberen und linken Rand des übergeordneten Elements positioniert. Durch Hinzufügen der Klasse .dropdown-menu-right zu .dropdown-menu kann das Menü rechtsbündig ausgerichtet werden

Menügruppierung: Beschreibungselemente der Dropdown-Header-Tabelle, deaktivierte Elemente der .disabled-Tabelle

Popup: Die .dropup-Klasse kann dafür sorgen, dass das ausgelöste Dropdown-Menü nach oben geöffnet wird

Schaltflächengruppe :

Schaltflächengruppe.btn-group, geben Sie die Schaltflächengröße in der Gruppe über .btn-group-* an.

Schaltflächenleiste.btn-toolbar

Die vertikale Stapelanordnung der Schaltflächen zeigt die BTN-Gruppe vertikal an.

Die Schaltflächengruppe ist an beiden Enden ausgerichtet -gruppengerechtfertigt

Navigation:

Tab .nav-tabs-Klasse hängt von der .nav-Basisklasse ab.

Kapsel-Registerkarte .nav-pills-Klasse, fügen Sie die .nav-stacked-Klasse hinzu, um sie auf vertikales Stapeln umzustellen. Die

.nav-justified-Klasse macht es einfach, Tabs oder Kapseln in der gleichen Breite erscheinen zu lassen.

navbar navbar-default

Für das bb9345e55eb71822850ff156dfde57c8-Element, das nicht im ff9c23ada1bcecdd1a0fb5d5a0f18437 enthalten ist, können Sie nach dem Hinzufügen von .navbar-btn erstellen Zentrieren Sie die Navigationsleiste vertikal.

Das Platzieren des Formulars innerhalb eines .navbar-form kann für eine gute vertikale Ausrichtung sorgen,

.navbar-text

.navbar-left- und .navbar-right-Dienstprogrammklassen zum Ausrichten von Navigationslinks, Formularen, Schaltflächen oder Text.

.navbar-fixed-top-Klasse kann die Navigationsleiste oben reparieren

.navbar-fixed-bottom-Klasse kann die Navigationsleiste unten reparieren

.navbar-static-top-Klasse ermöglicht das Verschwinden der Navigationsleiste, wenn die Seite nach unten scrollt.

.navbar-inverse-Klasse kann das Erscheinungsbild der Navigationsleiste ändern.

Breadcrumb erstellt eine hierarchische Navigationsstruktur (Breadcrumbs).

Paging:

Paginierung und verwenden Sie je nach Situation die Klassen .disabled und .active für die Seitenzahl.

Die Klassen .pagination-lg oder .pagination-sm bieten zusätzliche optionale Größen.

Pager Einfaches Umblättern zur vorherigen und nächsten Seite. Und kann durch vorherige und nächste Klassen markiert werden.

Label: Label-Label-Basisklasse, Sie können das Label über Label-Standard, Label-Primär, Label-Erfolg, Label-Info, Label-Warnung, Label- ändern. Gefahr Aussehen.
Badge, das neue oder ungelesene Informationselemente gut sichtbar anzeigen kann.

Andere: Miniaturansichten , Eingabeaufforderungsfeld , Fortschrittsbalken , Medienobjekte usw.

Maßgeschneiderter Stil

BootStrap bietet Komponenten und JQuery-Plug-Ins zur Anpassung an ihre eigenen Bedürfnisse. Benutzer können den Less-Quellcode auch direkt ändern.

Das obige ist der detaillierte Inhalt vonWie verwende ich das Bootstrap-Framework? Einführung in die Verwendung des Bootstrap-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!