Bootstrap definiert einen einfachen und benutzerfreundlichen Stil für uns. Wir brauchen nur sehr wenig Stilspezifikation, um eine einfache und elegante Seitenanzeige zu vervollständigen.
In diesem Artikel wird hauptsächlich die folgenden grundlegenden Steuerelemente vorgestellt:
1. Tisch
2. Form
3. Taste
1. Tabellen werden weiterhin verwendet, um Tabellen mit <Tabelle> <thead> <tbody> <ttr> <th> <td> darzustellen. Es gibt die folgenden Klassen, um die Eigenschaften der Tabelle zu steuern. Der Tischstil füllt den übergeordneten Container standardmäßig.
<div> <div> <div> <table> <tr> <th>Title 1</th> <th>Title 2</th> <th>Title 3</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </div> </div> </div> </div> </table> </div> </div> </div> </table> </div> </div> </tv> </tr> </table> </div> </div> </tv> </tr> </table> </div> </div> </tv> </tr>
Wickeln Sie ein. Table in .table responsive erstellt eine Responsive-Tabelle, die horizontal auf einem kleinen Bildschirmgerät (weniger als 768px) scrollt. Wenn der Bildschirm größer als 768px Breite ist, verschwindet die horizontale Bildlaufleiste.
2. Formularform, wie in mehreren Stilen definiert
Der LAC und die Kontrollen sollten mit einer Formgruppe Div eingewickelt werden. Das Standardformular ist wie folgt
<div> <form> <div> <Label für = "exampleInputemail1"> E -Mail -Adresse </Label> <Eingabe type = "E -Mail" id = "examplePUpTEMAIL1" PlaceHolder = "E -Mail eingeben"> </div> <div> <Div> <Div> <Darly "exampleppassword1"> Passwort </label> <input type = "password" id = "exitleppasses =" placepassword1 ". type = "checkbox"> check me out </label> </div> <button type = "sure"> sure </button> </form> </div>
Inline-Formular, geben Sie die Kategorie nur für SR für Etiketten an und können Sie die Beschriftungen ausblenden, aber das Label darf nicht weggelassen werden.
<div> <form> <div> <Label für = "exampleInputemail1"> E -Mail -Adresse </Label> <Eingabe type = "E -Mail" id = "examplePUpTEMAIL1" PlaceHolder = "E -Mail eingeben"> </div> <div> <Div> <Div> <Darly "exampleppassword1"> Passwort </label> <input type = "password" id = "exitleppasses =" placepassword1 ". type = "checkbox"> check me out </label> </div> <button type = "sure"> sure </button> </form> </div>
Formen des horizontalen Typs , Sie müssen die Länge für latbare und Tagsgruppen angeben und das Layout des Netzsystems verwenden. Etikett ist rechts ausgerichtet, die Etikettengruppe ist links ausgerichtet.
<div> <form> <div> <label for="exampleInputEmail1">Email address</label> <div> <input type="email" id="exampleInputEmail1" placeholder="Enter email"> </div> </div> <div> <label for="exampleInputPassword1">Password</label> <div> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> </div> <div> <label> <Eingabetyp = "Kontrollkästchen"> Überprüfen Sie mich </Label> </div> <Schaltfläche Typ "Senden"> Senden </button> </form> </div>
Formularverifizierung, Bootstrap3 unterstützt die benutzerdefinierte Überprüfung von Formularen. Hinzufügen von Requeed bedeutet, dass das Formular erforderlich ist, Knoten.
<div> <form> <div> <label for="exampleInputEmail1">Email address</label> <div> <input type="email" id="exampleInputEmail1" placeholder="Enter email" required> </div> </div> <div> <label for="password1">Password</label> <div> <input type="password" id="password1" placeholder="Password" required onchange = "checkPassword ()"> </div> </div> <div> <Label für = "password2" onChange = "checkPassword ()"> password2 </label> <div> <Eingabe type = "password" id = "password2" placeholder = "password2" Erforderlich> </div> </div> <div> <Label> <Eingabe -Taste = "pechbox"> check my> </div> </div> <label> <Eingabe -Typ = "pechbox"> check me y/div> </div> <label> <Eingabe -Typ = "pechbox"> check me y/div> </div> <Label> </label> </label> </label. type = "enden"> enden </button> </form> </div> <script> Funktion checkPassword () {var pwd1 = $ ("#password1"). val (); var pwd2 = $ ("#password2"). val (); if (pwd1! = pwd2) {document.getElementById ("password1"). setCustomvality ("Das zweimal eingegebene Kennwort ist inkonsistent"); } else {document.getElementById ("password1"). setCustomvality (""); }} </script>3. Der Stil des Knopfes
Verwenden Sie .BTN-LG, .BTN-SM und .BTN-XS, um Schaltflächen verschiedener Größen zu erhalten. Durch das Hinzufügen von .BTN-Block zur Taste kann es 100% der Breite des übergeordneten Knotens füllen, und die Taste wird auch zu einem Element auf Blockebene und der Schaltflächenklasse hinzuzufügen.
<Div> <button type = "button"> Standard </button> <button type = "button"> primär </button> <button type = "button"> Erfolg </button> <button type = "button"> info </button> <button type = "button"> WARNUNG </button> </button type ". type = "enden"> Taste </button> <Eingabe type = "button" value = "input"> <Eingabe type = "sure" value = "enden"> </div>
Wenn Sie weiterhin ausführlich lernen möchten, können Sie hier klicken, um Ihnen zu lernen und Ihnen zwei aufregende Themen anzuhängen: Bootstrap -Lern -Tutorial Bootstrap Practical Tutorial
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.