Wie verwende ich das Bootstrap-Framework? Einführung in die Verwendung des Bootstrap-Frameworks-js-Tutorial-php.cn

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

不言

Freigeben： 2018-10-16 11:43:32

Original

3858 Leute haben es durchsucht

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

(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 oder ein Element mit der Klasse .small markiert.

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

2. Inline-Text, verwenden Sie Die Beschriftung stellt den Anmerkungstext dar: delete, useless, insert, underline, small (die Schriftgröße des übergeordneten Containers). 85 %), Hervorhebung, kursiv.

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 fest und verwenden Sie die Klasse .initialism, um die Schriftgröße festzulegen etwas kleiner werden. Beispiel: attr

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

7. Zitat: Schließen Sie das HTML-Element in
ein, um den Zitatstil anzuzeigen. Für direkte Zitate empfiehlt sich die Verwendung des
-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
aus.

Code:
umschließt Codeausschnitte im Inline-Stil markiert den vom Benutzer über die Tastatur eingegebenen Inhalt Mit der Pre-Scrollable-Klasse können bis zu 350 Pixel mit vertikaler Bildlaufleiste eingerichtet werden. <var> Label-Tag-Variable <samp> 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 <input>, <textarea> Bei <select>-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: <form> 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 hinzu. 6. Steuerelementstatus .disabled-Klasse deaktiviert Steuerelemente. Wenn „disabled“ auf <fieldset> 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 <a>, <button> angewendet werden, es wird jedoch empfohlen, das <button>-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. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"> Nach dem Login kopieren