Der größte Vorteil von Bootstrap für Entwickler ist das reaktionsschnelle Layout und einige hervorragende Stile.
Jetzt werde ich einige Schritte und einige häufig verwendete Dinge einführen, um Bootstrap zu verwenden.
1. Schreiben Sie den Header
<head> <meta charset = "utf-8"> <!-Um den neuesten Rendering-Modus zu verwenden, fügen Sie dieses Tag hinzu-> <meta http-äquiv = "x-ua-kompatible" content = "dh = Edge"> <! name = "viewPort" content = "width = Gerätebreite, initial-scale = 1"> <title> Learnbootstrap </title> <!-Siehe direkt auf die Datei-> <link rel = "stylesheet" type = "text/csS" href = "css/bootstrap.min href = "// cdn.bootcs.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-Um IE9 oder unten zu unterstützen, fügen Sie diese hinzu-> <! src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <!-Lassen Sie ihn Medienabfragen unterstützen, das ist, reagieren-> <script Src = "https:/os.maxcdn.com <!-[endif]-> </head>
2. Js
Dies kann im Körper geschrieben werden
<!- JQuery-Datei. Stellen Sie sicher
3. Verwenden Sie die Containerklasse
Die Containerklasse ist eine häufig verwendete Div -Klasse
Verwenden Sie hauptsächlich die Zentrierfunktion
<div> Hallo </div>
4. Verwenden Sie ein rasterisiertes System
Rasterisiertes System ist ein sehr häufig verwendetes Layoutsystem für Bootstrap
Einfache Verwendung wie folgt
<Div> <!-xs bedeutet am Telefon, SM bedeutet auf dem Tablet und MD auf dem Desktop. Die folgenden Zahlen stellen dar, wie viele Spalten besetzt sind. Der Vollbildmodus beträgt 12 Spalten-> <!-Der Inhalt überschreitet die Höhe des Gitters, und die Höhe wird erhöht, und die Breite wird nicht erhöht-> <!-Versatz bedeutet, wie viele Säulen nach rechts bewegt werden-> <div> .col-12 .col-Sm-6 .col-Md-8.Col-x-xs-11. .col-sm-6 .col-md-4</div></div><div> <!--push moves backwards, pull moves forward-> <div>.col-xs-12 .col-sm-6 .col-md-8</div> <div>.col-xs-6 .col-md-4</div></div>
Sie können sehen, dass das rasterisierte System unterschiedliche Breiten an verschiedene Geräte anpassen kann.
5. Verwenden Sie das Formular
<Div> <!-Reaktionsabschnitte, der Inhalt ist zu lang, um nach links und rechts zu bewegen. Wenn die Maus durch die TBODY-Zeile geht, ist die Farbe dunkler und die Tabelle ist verdichtet-> <table> <Thead> <Tr> <Th> Tabelle Title </th> <Th> Table Title </th> <Table TABLE TITEL </TH> <TH> TABELLE TITEL </TH. content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> </tr> <!--The color of the row is beige--> <tr> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <th>Table content</th> <Th> Tabelleninhalt </th> <Th> Tabelle Inhalt </th> <Th> Tabelle Inhalt </th> <Th> Tabelle Inhalt </th> <Th> Tabelle Inhalt </th> <Th> Tabelle Inhalt </th> <Th> Inhalt </th> <Th> Tabelle Inhalt </th> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div>
Wenn Sie die Farbe eines bestimmten Netzes ändern möchten, können Sie Klassen wie TR im TH -Tag hinzufügen
6. Formulare verwenden
Die grundlegendste Verwendung ist wie folgt
<Div> <form> <!-Ein Teil des Elements ist ein übergeordnetes Layout der Formgruppe, mit Etikett und Eingabe-> <div> <!-Etikett für die Eingabe-ID-> <label for = "exampleInputemail1"> E-Mail-Adresse </label> <!-Eingabetaste sollte auf Form-Control-> <Eingabe type = "id =" exitlepute "-IntInpute" -Plagenhauere "placeHiLTERSELSET werden." for = "examplePpassPassword1"> kennwort </label> <Eingabe type = "password" id = "exampleInpasspassword1" placeholder = "password"> </div> <div> <label für = "exampleInputFile"> Dateieingabe </label> <Eingabe type = "Datei" id = "id =" examplepiltFile "> <! type = "checkbox"> check me out </label> </div> <button type = "sure"> sure </button> </form> </div>
Wenn Sie die Formularklasse auf Form-Inline einstellen, werden alle Elemente in derselben Zeile angezeigt
Wenn Sie die Formularklasse auf Form-horizontal einstellen, zeigt jede Formgruppe eine Zeile an, aber Sie müssen die Breite selbst einstellen
wie
<Div> <!-Jede Form-Gruppe eine Zeile anzeigen, aber jedes Form-Gruppen-Kind muss die Breite angeben-> <form> <div> <Label für = "emai"> E-Mail </Label> <!-Eingabegruppe Let-Eingabeaufforderungen und Ergänzungen in derselben Zeile angezeigt werden-> <div> <input type for = "passWor"> Passwort </Label> <div> <Eingabe type = "password" placeholder = "password" id = "passWor"> </div> </div> <button type = "subieren"> summit </button> </form> </div>
Wenn wir ein Konto registrieren, wird normalerweise, wenn die Informationen falsch oder korrekt sind, daneben auffordern, und die Farbe des Eingabefeldes ist unterschiedlich.
Bootstrap bietet uns diese sehr praktische Funktion
<div> <form> <!-Fügen Sie der Klasse des übergeordneten Divs hinzu-Erfolgsstatus-> <div> <Label für = "InputSuccess2"> Eingabe mit Erfolg </label> <Eingabe type = "text" id = "InputSuccess2" aria-dekriptiertes. <!-Diese Informationen sind versteckt und erhöhen die Lesbarkeit des Codes-> <span id = "InputSuccess2Status"> (Erfolg) </span> </div> <!-Warnstatus-> <div> <label für = "InputWarning2"> Input mit Warning </label> <input type = "Text" id = "InputWarning2. aria-hidden = "true"> </span> <span id = "inputWarning2Status"> (WARNUNG) </span> </div> <!-Fehlerstatus-> <div> <Label für = "InputError2"> Input mit Fehler </label> <input type = "text" id = "inputError2" aria-describedBy = "true =" trur2status " <span id = "inpuNError2Status"> (Fehler) </span> </div> </form> </div>
7. Knopf
Knöpfe sind unerlässlich
<!-Weißer Hintergrund-> <Button Typ = "Button"> (Standardstil) Standard </button> <!-Blauer Hintergrund-> <Button Typ = "Button"> (Einstellungen) Primär </button> <!-Grüner Hintergrund-> <Knopftyp "Button"> (Erfolg) Erfolg </button> <! (WARNUNG) WARNUNG </Button> <!-Roter Hintergrund-> <Button Typ = "Button"> (Gefahr) Gefahr </button>
Sie können der Klasse auch Dimensionen hinzufügen
<Schaltfläche type = "Schaltfläche"> (Große Schaltfläche) Große Schaltfläche </Schaltfläche> <Schaltfläche type = "Schaltfläche"> (Standardgröße) Standard -Taste </schaltet> <Schaltfläche Typ = "Button"> (kleine Schaltfläche) Schaltfläche kleiner </button> <Taste type = "Taste"> (kleine Schaltfläche) zusätzliche kleine Schaltfläche </button
Die oben genannten sind die Schritte und die übliche Verwendung von Bootstrap
Nachdem dieses Rahmen verwendet wurde, hat sich nicht nur die Entwicklungsgeschwindigkeit gestiegen, sondern die Qualität hat sich auch verbessert.
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
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.