Zunächst möchte ich allen meinen Freunden für ihre Unterstützung danken. Ich werde meine Studienzusammenfassung weiterhin auf Bootstrap aktualisieren. Wenn mit dem Schreiben etwas nicht stimmt, korrigieren Sie mich bitte. In Bezug auf den vorherigen Artikel sind festes Layout und Streaming -Layout sehr wichtig. Wenn Sie nicht klar sind, können Sie sich ansehen, was ich geschrieben habe: Bootstrap -Studiennotizen: CSS -Stil Design (1)
Lassen Sie uns diesmal einige bestimmte und wichtige Klassen über Stile in Bootstrap und die Verwendung dieser Klassen, die Unterschiede zwischen den Klassen und einigen verwandten Klassen ansehen, die bei der Auflistung erklärt werden.
1. Form
1.Form-Kontrollklasse: Die Breite der <eingabe> <Ewich> <textArea> -Tags, die diese Klasse enthalten, wird Breite: 100%, und in der Form wird die Steuerung normalerweise in der Formgruppe mit dem Etikett-Tag enthalten.
<Formrolle = "Form"> <!-Alle Eingaben, textarea, Elemente mit Form-Kontroll-Klasse-Set werden auf Breite ausgewählt: 100%-> <div>-Form-Gruppe: Im Allgemeinen werden Bezeichnungen und Space-Wraps in Form einer Form-Gruppe für = "Beispielinputimail". for = "examplePUPEMail"> E -Mail -Name </label> <textarea> 11111 </textarea> </div> <div> <label für = "Select"> Formular auswählen </label> </select> <option> 111 </option> </option> 222 </option> </select> </div> </Form>
Nach dem obigen Code können wir ihn nacheinander betrachten. Fügen Sie die Formin-Inline-Klasse hinzu (geben Sie das Steuerelement in eine Zeile) | Form-Horizontale Klasse (das Etikett befindet sich links und die Steuerung befindet sich rechts), das die Hilfe des Etiketts verwendet.
<!-Form-Inline-Klasse lässt das Formular horizontal vorhanden-> <form>-Sekundenjährlich gibt es Check-inLine, Radio-Inline usw. <Div> <Label für = "exampleInputAMount"> Betrag </Label> <div>-Inputgruppe: Eingabegruppe <Div>@</div> --addon: Refins zum hinzugefügten Text oder Taste <Eingabe-Typ "text" text "text <div>@</div> </div> </div> <button type = "enden"> suche </button> </form>
Die Effekte sind wie folgt:
Wenn nicht hinzugefügt, wird die Taste in die nächste Zeile gepresst. Hier werden keine Bilder mehr veröffentlicht, Sie können Code einfügen und selbst testen.
<!--Horily arranged form control-label: means that the text is right-aligned--><form > <div> <label for="inputEmail">Email:</label> <div> <input type="email" id="inputEmail" placeholder="email"> </div> </div> <div> <label for="inputPassword">Password:</label> <div> <input type="password" id="inputPassword" Placeholder = "Passwort"> </div> </div> </div> </form>
Die Effekte sind wie folgt:
( Hinweis: Das Textfeld Eingabetaste hier sollte für 5/6 berücksichtigt werden. Ich habe seine Breite auf 20%berechnet)
Hier sollte es in Bezug auf Form-Horizontal in Verbindung mit dem Gittersystem von Bootstrap durchgeführt werden.
Die Verwendung des Klassennamens "Form-horizontal" im Element <Form> hat die folgenden Funktionen:
1: Stellen Sie die Polster- und Randwerte der Formularsteuerung ein. Der obige Code ist in der Debug-Konsole, Padding-Links: 50px zu sehen.
2: Ändern Sie den Ausdruck der "Formgruppe", ähnlich der "Zeile" des Gittersystems.
2. Die Funktion der Etikett
<Label für = "hello1"> Hallo </label> <Eingabe type = "text" id = "hello"> <br> --- Der blaue Halo wird generiert <Label für = "1111"> Hallo </label> <Eingabe type = "text" id = "jiang"> <br> --- Die ID entspricht nicht. Es gibt keine Antwort. Erst wenn die Maus auf die Kontrolle platziert wird, wird es einen blauen Heiligenschein geben
Basierend auf dem obigen Code siehe: Das für das Attribut in Etikett in der Label sollte der ID im Steuerelement entsprechen. Funktion: Stellen Sie sicher, dass die entsprechende Steuerung, wenn die Maus auf das Etikett platziert wird, einen blauen Halo erzeugt.
3. Rolle der Rolle
Finden Sie es seltsam, warum Sie beim Schreiben von Formularen oder einigen Kontrollen eine Rolle hinzufügen müssen?
Funktion: Stellen Sie sicher, dass die Bildschirmlesesoftware erkannt werden kann. Die Bildschirmlese -Software ist eine Software, mit der mental verzögerte Personen auf das Internet zugreifen können. Es vermittelt Bilder, Text usw. an mental zurückgebliebene Menschen in Form von Stimme. Um sicherzustellen, dass die Bildschirmlese -Software erkannt werden kann, gibt es normalerweise keine semantischen Tags oder Tags mit speziellen Funktionen, die darauf geschrieben werden müssen. Zum Beispiel:
<a href = "#" rollen = "button"> link </a> <!-Wenn Link a als Taste verwendet wird und verwendet wird, um bestimmte Funktionen auf der aktuellen Seite auszulösen, anstatt eine Verbindung zu anderen Seiten oder dem Rest der aktuellen Seite herzustellen, stellen Sie sicher, dass die Rolle = "Taste"-> ursprünglich ein Tag darstellt. Die Bildschirmlese -Software kann sie nicht erkennen, daher muss Rollen = "Schaltfläche" hinzugefügt werden, um die Software für die Bildschirmlese zu informieren, dass dies eine Schaltflächenschaltfläche ist.
4. Was ist der Unterschied zwischen Etikett, Aria-Label, Aria-labeled?
<Div> <Eingabe type = "text" id = "idcard" aria-label = "id card"> <p> Beispiel Block-Level </p>--Help-Block: Text zur Aufforderung zur Erklärung </div> <div> <Label für = "IDCard"> ID-Karte </Label> <Eingabe type = "Text" id = "idcard"> <p> block-blockes "</p> <plEVEL"> <p> blockiert.
Die Effekte sind wie folgt:
Ersteres hat nicht das Wort "ID -Karte" visuell, die beide für die Bequemlichkeit der Bildschirmlesesoftware zur Identifizierung dienen. Es ist nur so, dass Aria-Label verborgen ist.
Schauen wir uns an, wie man Aria-markiert benutzt. Wenn der Etikettstext bereits in einem bestimmten Element existiert, verwenden Sie normalerweise Aria-markierte und sein Wert ist die ID aller Leseelemente. Schauen wir uns die folgenden Subs an:
<div> <button type = "button" id = "DropdownMenu1" data-toggle = "Dropdown"> Wählen Sie die folgenden Optionen <spannung> </span> </button> <ul rollen = "Menü" aria-labelledby ROLLE = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> 22222 </a> </li> <li rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> 2222 </a> </li> <li <li. href = "#"> 33333 </a> </li> </ul> </div>
Zu diesem Zeitpunkt enthält die UL Li und wird in der Taste gesteuert, sodass es zu diesem Zeitpunkt angemessener ist, Aria-markiert zu verwenden. Einfach ausgedrückt, der Gebrauchsumfang zwischen den drei ist unterschiedlich, und die grundlegenden Funktionen sind gleich, alle für die Bequemlichkeit der Erkennung von Software für Bildschirmlesen. Wenn es um versteckte Klassen geht, müssen wir die Nur-SR-Klasse erwähnen. Schauen wir uns an.
<Label für = "Inputemail"> E -Mail: </label>
<Label für = "Inputemail"> E -Mail: </label>
Der Effekt zu diesem Zeitpunkt ist: Der obige Text ist verborgen, und nur dieser Unterschied bleibt unverändert.
5. Behinderte Klasse
In der Form müssen Sie dieser Klasse achten. Vergleichen wir sie hier.
<!-Führen Sie ein Formular mit Fieldset ein. id = "deaktiviertSelect"> <option> Deaktivieren Sie nicht ausgewählbar </option> </select> </div> <div> <label> <Eingabe type = "Kontrollkästchen"> Deaktivierung kann nicht </label> </div> <schalttype = "Senden"> Senden </button> </fieldset> </Form> auswählen
Wenn Sie dem Dateiensatz eine deaktivierte Klasse hinzufügen, wird das deaktivierte Formular nur für die Schaltfläche "Eingabetaste auswählen usw." deaktiviert und funktioniert nicht für andere Elemente -Legendenattribute. Im Vergleich dazu Legendattribut hinzufügen
<!-Langzeitgefügte Eigenschaft-> <Formrolle = "Form"> <fieldset deaktiviert> <Legend> <Eingabe type = "text" placeholder = "Die Farbe wird grau, aber nicht deaktiviert"> </legend>-Hier kann die Maus in das Eingabefeld platziert werden </label: placeholder="disabled"> </div> <div> <label for="disabledSelect">Disabled drop-down box</label> <select id="disabledSelect"> <option>Not selectable</option> </select> </div> <div> <label> <input type="checkbox"> Unable to select</label> </div> <button type="submit">Submit</button> </fieldset></form> <!-- Deaktivierte Formulare werden nur für die Schaltfläche deaktiviert. Wählen Sie Eingabe usw. und eignen sich nicht für andere Elemente Legend->
6.Data-Toggle Data-Target Data-Spy-Attribut
Mit HTML5 können Entwickler ihre Tags frei hinzufügen, und dieses benutzerdefinierte Attribut beginnt im Allgemeinen mit "Data-".
Data Toggle: Zeigt die Dateninteraktion an. Klicken Sie in der obigen Spalte auf die Schaltfläche, um zum Dropdown-Menü zu wechseln.
Der Datenspy gibt an: Überwachung
Daten Traget: Ziel.
Dies beinhaltet Ereignisse in JS, und ich werde sie nicht im Detail erklären. Ich werde mich diese Probleme ansehen, wenn ich das JS -Lernen in Bootstrap eingehe. Es gibt immer noch viele Dinge in der Form, und es gibt fast so viele Zusammenfassungen. Es gibt auch Ergänzungen. Bitte hinterlassen Sie mir eine Nachricht unten.
2. Knopfklasse
Dies ist nicht schwierig, denken Sie nur an die Attributklasse, es ist leicht zu verstehen.
<a href = "#" rollen = "button"> link </a> <button type = "sure" deaktiviert = "deaktiviert"> Standard </button> <button type = "subieren"> primär </button> <button type = "subieren"> Erfolg </button> <button type = "arranging"> button </button </button </button </button </button. value = "input"> <input type = "button" value = "subieren">
Die Effekte sind wie folgt:
3. Bildkategorie
<!-Zentrum des Bildmitte-Blocks: Zentrum den Inhalt, um iMG-Rund anzuzeigen: Mit abgerundeten Ecken img-circle: Ring img-Thumbnail: Fügen Sie dem Bild einen äußeren Rand hinzu->
<img src = "111.png">
<img src = "111.png">
<img src = "111.png">
Die Effekte sind wie folgt:
Zusammenfassend bin ich persönlich der Meinung, dass die Rolle von Formen immer noch sehr wichtig ist. Es ist einfacher, einige andere grundlegende Kategorien hier zu erklären. Der nächste Artikel wird auf das Lernen der CSS -Komponente übertragen: Bootstrap -Lernnotizen CSS -Komponente (3)
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.