Wie man grundlegende Webseiten-Elemente mit Bootstrap - Dummies

< Zusätzlich zu reinen Layouts kann Bootstrap auch Webseitenkomponenten erstellen, die auf fast jeder Website zu finden sind. Die Idee ist die gleiche wie bei der Arbeit mit Layouts - anstatt das Rad jedes Mal neu zu erstellen, indem Sie Ihre eigene Schaltfläche oder Symbolleiste entwerfen, ist es besser, vorgefertigten Code zu verwenden, der bereits für mehrere Browser und Geräte getestet wurde.

Die folgenden Beispiele zeigen, wie Sie schnell Webkomponenten erstellen können.

Entwerfen von Schaltflächen

Schaltflächen sind ein grundlegendes Element auf vielen Webseiten, können aber in der Regel schwierig einzurichten und zu formatieren sein. Wie hier gezeigt, können Schaltflächen verschiedene Typen und Größen haben.

Bootstrap-Code zum Erstellen von Schaltflächen

Attribut

Klassenpräfix	Beschreibung	Schaltflächentyp
btn-defaultbtn-primarybtn-successbtn-danger	Standardschaltflächentyp mit Schwebeeffekt	Blaue Taste mit Schwebeeffekt Grüne Taste mit Schwebeeffekt Rote Taste mit Schwebeeffekt Tastengröße
btn-lgbtn-defaultbtn-sm	Große Taste Größe	Standardschaltflächengröße Kleine Schaltflächengröße Um eine Schaltfläche zu erstellen, schreiben Sie den folgenden HTML-Code:

Beginnen Sie mit dem HTML-Element

1. button . In der öffnenden << -Taste>
2. -Tag einschließen Typ = "Schaltfläche" . Schließen Sie das Klassenattribut mit dem Klassenattributwert btn
3. ein, und fügen Sie basierend auf dem gewünschten Effekt zusätzliche Klassenpräfixe hinzu. Um weitere Stile hinzuzufügen, fügen Sie den Präfixnamen class
4. weiterhin zum Attribut class der HTML-Klasse hinzu. Der folgende Code kombiniert sowohl den Schaltflächentyp als auch die Schaltflächengröße:

Große primäre Schaltfläche

Große Standardschaltfläche

Standardmäßige Erfolgstaste

Standardmäßige Standardschaltfläche

Kleine Gefahrenschaltfläche

Kleine Standardschaltfläche

Bootstrap-Schaltflächen und -größen.

Überprüfen Sie den zusätzlichen Schaltflächentyp, die Schaltflächengröße und andere Schaltflächenoptionen.

Navigieren mit Symbolleisten

Webseiten mit mehreren Seiten oder Ansichten verfügen in der Regel über eine oder mehrere Symbolleisten, um Benutzern bei der Navigation zu helfen. Hier sind einige Symbolleistenoptionen.

Bootstrap-Code zum Erstellen von Navigations-Symbolleisten

Attribut

Klassenpräfix

Beschreibung	Symbolleistyp	Navigations-Tabs
nav-pills	Tabbed-Navigationsleiste Pille, oder Schaltfläche "Solid button" Navigationsleiste	Symbolleistenschaltfläche Dropdown-Liste
Caret-Dropdown-Menü	Schaltfläche oder Registerkarte als Dropdown-Menü Dropdown-Menü Dropdown-Menü	Menüelemente Um eine Pill- oder Solid-Button-Navigations-Symbolleiste zu erstellen, schreiben Sie den folgenden HTML-Code: Beginnen Sie mit dem Element

ul

1. eine ungeordnete Liste. Fügen Sie in das Tag der Eröffnung
2. class = "nav nav-pills"
   ein. Erstellen Sie Schaltflächen mit dem Tag . Schließen Sie
   • class = "active"
   • in ein Tag ein, um festzulegen, welche Registerkarte in der Hauptsymbolleiste angezeigt werden soll, wenn Sie mit der Maus über die Schaltfläche fahren. Um ein Dropdown-Menü zu erstellen, verschachteln Sie eine ungeordnete Liste. Siehe den Code neben "More" mit den Klassenpräfixen
   • "dropdown"
   • , "caret" und "dropdown-menu" . Sie können mithilfe des Tags in Ihrem Dropdown-Menü zu anderen Webseiten verlinken.

     Der folgende Code erstellt eine Symbolleiste mit Bootstrap: Timeline

Über

• Fotos
• Freunde
• Mehr
• Orte

• Sport

  • Musik
  • Bootstrap-Symbolleiste mit Dropdown-Menüs.
  • Die

Dropdown-Toggle

-Klasse und das data-toggle = "dropdown" -Attribut und der Wert arbeiten zusammen, um Dropdown-Menüs zu Elementen wie Links hinzuzufügen. Überprüfen Sie zusätzliche Symbolleistenoptionen. Hinzufügen von Symbolen Symbole werden häufig mit Schaltflächen verwendet, um eine bestimmte Art von Aktion zu vermitteln. Beispielsweise verwendet Ihr E-Mail-Programm wahrscheinlich eine Schaltfläche mit einem Papierkorbsymbol, um E-Mails zu löschen. Symbole kommunizieren Benutzer ohne große Erklärung schnell mit einer vorgeschlagenen Aktion.

Diese Symbole werden

Glyphen genannt, und Glyph Icons liefert die Glyphen, die in Bootstrap verwendet werden. Bootstrap unterstützt mehr als 200 Glyphen, die Sie mit dem -Tag zu Schaltflächen oder Symbolleisten hinzufügen können. Im folgenden Beispielcode werden drei Schaltflächen mit einem Stern, einer Büroklammer und einem Papierkorb-Glyphen erstellt.

Stern Anhängen von

Trash

Bootstrap-Schaltflächen mit Symbolen.

Überprüfen Sie hier die Namen aller Bootstrap-Glyphen.