Bootstrap von Twitter ist derzeit das beliebteste Front-End-Frontwork. Bootstrap basiert auf HTML, CSS und JavaScript. Es ist einfach und flexibel und macht die Webentwicklung schneller.
Schlüsselpunkte für das Lernen:
1. Tisch
2. Knopf
In dieser Lektion lernen wir hauptsächlich die Bootstrap-Tabellen- und -buttonfunktionen kennen und zeigen verschiedene reiche Effekte durch die integrierte CSS-Definition.
eins. Blatt
Bootstrap bietet Entwickler einige reichhaltige Tischstile.
1. Grundformat
// Basic Table Style <Tabelle> implementieren
Hinweis: Wir können das entsprechende CSS durch Firebug anzeigen.
2. Form gestreifte Form
// Lassen Sie die Linien in <tbody> eine Zeile nach einer anderen und einen monochromen Hintergrundeffekt <Tabelle> produzieren
HINWEIS: Der Tabelleneffekt muss auf dem grundlegenden Format basieren.table
3. Tisch mit Grenzen
// Fügen Sie der Tabelle <Tabelle> einen Rand hinzu
4. Bewegen Sie die Maus
// Lassen Sie die Tabelle unter <Tbody> die Maus bewegen, um Hintergrundeffekt <tabelle> zu erreichen
5. Statusklasse
// Der Hintergrundstil jeder Zeile kann separat eingestellt werden <tr>
Hinweis: Es stehen fünf verschiedene Stile zur Auswahl.
Stilbeschreibung:
Aktive Maus schwebt über Zeile oder Zelle
Erfolgszeichen erfolgreicher oder positiver Maßnahmen
Infos markiert normale Eingabeaufforderungsinformationen oder Aktionen
Warnlogo Warnung oder Benutzeraufmerksamkeit ist erforderlich
Die Gefahr zeigt gefährliche oder potenzielle negative Handlungen an
6. eine Linie verstecken
// Zeile ausblenden <tr>
7. Reaktionstabelle
// Es gibt eine reaktionsschnelle Form für das übergeordnete Element der Tabelle, weniger als 768px, und der Rand erscheint <body>
zwei. Taste
Bootstrap bietet Entwicklern viele reiche Schaltflächen.
1. Beschriftungen oder Elemente, die als Tasten verwendet werden können
// zur Normal -Taste konvertieren <a href = "###"> Link </a> <taste> Taste </button> <Eingabe type = "Schaltfläche" value = "input">
Es gibt drei Dinge zu beachten:
(1). Dinge zu beachten über Komponenten
Obwohl die Schaltflächenklasse auf die Elemente <a> und <button> angewendet werden kann, unterstützen die Navigations- und Navigationsleistenkomponenten nur die <tasten> Elemente.
(2). Zu beachten, wann der Link als Taste verwendet wird
Wenn das <A> -Element als Schaltfläche verwendet wird - und verwendet wird, um bestimmte Funktionen auf der aktuellen Seite auszulösen, anstatt andere Seiten zu verknüpfen oder andere Teile der aktuellen Seite zu verknüpfen, sollten Sie die ROLE = "-Baste" -Schance dafür festlegen.
(3). Cross-Browser-Anzeige
Die Best Practice, die wir zusammengefasst haben, ist, dass es dringend empfohlen wird, das <tasten> Element zu verwenden, wann immer dies möglich ist, um übereinstimmende Zeichnungseffekte auf jedem Browser zu erhalten.
Darüber hinaus haben wir einen Fehler auf dem Browser in Firefox <30 entdeckt, der zeigt, dass wir das Leitungshöheattribut für Schaltflächen, die basierend auf dem <eingabe> -Element erstellt wurden, einstellen, wodurch der Firefox-Browser nicht vollständig mit anderen Schaltflächen übereinstimmt.
2. Vordefinierte Stile
// Allgemeine Information <Button> Schaltfläche </schaltet>
Stilbeschreibung
BTN-Default-Standardstil
BTN-Success-Stil
BTN-INFO Allgemeiner Informationsstil
BTN-Warnwarnstil
Btn-danger gefährlicher Stil
BTN-Primärpräferenzstil
Btn-Link-Linkstil
3. Größe
// Größe von groß bis kleiner <taste> Schaltfläche </button> <tasten> Schaltfläche </button> <tasten> Schaltfläche </schaltet> <taste> Schaltfläche </schaltet> Button>
4. Block Level -Taste
// Block Level Line Break <Staste> Schaltfläche </Schaltfläche> <taste> Schaltfläche </schaltet>
5. Aktivierungsstatus
// Schaltfläche "Taste </button> aktivieren
6. Status deaktivieren
// Schaltfläche "Schaltfläche" (Schaltfläche "(Schaltfläche" </button>
Das obige ist die Bootstrap -Tabelle und die vom Editor vorgelegten Schaltflächenfunktionen. Ich hoffe, es wird für alle hilfreich sein!