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

(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. <p><br></p><var> Label-Tag-Variable <p><br></p><samp> <p><br></p>
<p>Tabelle: <strong></strong><br></p>.table-Klasse gibt den Grundstil an, <p><br></p>.table-striped gestreifter Stil, <p><br></p>.table-bordered-Klasse hat einen Rahmenstil, <p><br></p>.table-hover-Klasse hat einen Maus-Hover-Stil, <p><br></p>.table-confided-Klasse kompakter Stil. <p><br></p>Statusklasse (Zeilen- oder Zelleneinstellungsfarbe): aktiv, Erfolg, Info, Warnung, Info. <p><br></p>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. 
<p><strong><br></strong></p>
<p>Formular: <strong></strong><br></p>1. Einfaches Beispiel: <p></p>Alle .form-control ist eingestellt Die Klassen <input>, <textarea>
Bei <select>-Elementen ist das Breitenattribut standardmäßig auf 100 % eingestellt. <p><br></p>Wickeln Sie das Beschriftungselement und die zuvor erwähnten Steuerelemente ein
Die beste Anordnung erhalten Sie in .form-group. <p><br></p>Formulargruppen nicht direkt mit Eingabefeldgruppen mischen. Es wird empfohlen, die Eingabefeldgruppe in der Formulargruppe zu verschachteln. <p><br></p>form-group, input-group, control-group, <p><br></p>2. Inline-Formular: <p></p><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). <p><br></p>
<p>Die Breite des Radio-/Mehrfachauswahlfeld-Steuerelements im Inline-Formular ist auf Breite eingestellt: <br></p>
<p>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. <br></p>
<p>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 <br></p>
<p>4
: .radio, .radio-inline, .checkbox, .checkbox-inline. <br></p>
<p>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 <p> hinzu. <br></p>
<p>6. Steuerelementstatus <br></p>
<p>.disabled-Klasse deaktiviert Steuerelemente. Wenn „disabled“ auf <fieldset> eingestellt ist, sind alle enthaltenen Steuerelemente deaktiviert. <br></p>
<p>a-Tags sind hiervon nicht betroffen. Das Attribut <br></p>
<p>readonly kann Benutzereingaben verhindern. Fügen Sie einfach die Klassen <br></p>
<p>.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. <br></p>
<p>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. </p>
<p>7. Steuerelementgröße<br></p>
<p>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. <br></p>
<p>Sie können die Breite des Eingabefelds oder eines seiner übergeordneten Elemente einfach festlegen, indem Sie es mit einer Spalte im Rastersystem umschließen. <br></p>
<p>8. Hilfstext: Hilfsblockklasse, Hilfstext auf „Block“-Ebene für Formularsteuerelemente. <br></p>
<p><br>Schaltfläche: </p>
<p><strong>1. Basisstil, BTN, BTN-Standard, BTN-Primär, BTN-Erfolg, BTN-Info, BTN-Warnung, btn-danger, aktiv </strong></p>
<p>2. Anzeigeformular, btn-link, btn-block, schließen <br></p>
<p>3. sm,.btn-xs. <br></p>
<p>Die Button-Klasse kann über die Elemente <a>, <button> angewendet werden, es wird jedoch empfohlen, das <button>-Element zu verwenden Jeder Browsereffekt. <br></p>
<p><br>Bild: </p>Bildform, img-rounded, img-circle, img-thumbnail, IE8 unterstützt das Attribut „abgerundete Ecken“ in CSS3 nicht. <p><strong></strong><br>Auxiliary: </p>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
<p><strong></strong><strong><br></strong>Komponentenstil</p> <p><strong></strong><br>Symbol: </p> <p><strong></strong>200 Ein Schriftsymbol von Glyphicon Halflings. Die Symbolklasse <br></p>
<p> kann nur auf leere Elemente angewendet werden und kann nicht in Verbindung mit anderen Komponenten verwendet werden. <br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><span class="glyphicon glyphicon-search"></span>

Nach dem Login kopieren


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 -Element, das nicht im

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!