Wie alle Basen machen diese selbst den Rest der Konstruktion nicht aus. Um ein höheres Maß an Raffinesse und Detailgenauigkeit zu erreichen, müssen zusätzliche Komponenten verwendet werden, die auf unserer Basis platziert sind und deren Leistung natürlich von der Festigkeit abhängt der letzteren.
Im Fall von Bootstrap verfügen wir über mehrere Komponenten, mit deren Hilfe wir die Details unserer Designs maximieren können. Diese Komponenten reichen von Symbolen über Bedienfelder bis hin zu Überschriften. Elemente, die uns helfen, unsere Anwendung anderer zu unterscheiden und hervorzuheben.
Die Verwendung der Komponenten
Die Komponenten in Bootstrap können unabhängig von den anderen auf unseren Seiten verwendet werden. Das heißt, wir können so viele Komponenten wie nötig in einem einzelnen Dokument generieren, ohne dass diese Konflikte mit anderen auftreten.
Darüber hinaus ist der Standard-Basisstil bereits vordefiniert, sodass wir unsere Anwendung schnell und ohne großen Aufwand erstellen können. Am Ende können wir unsere gesamte Anwendung anpassen, indem wir den Basisstil für unsere eigenen Stile ändern.
Die Komponenten können CSS , JavaScript oder beides sein, so dass einige zusätzlich zur CSS-Basis Bibliotheken von Drittanbietern wie jQuery benötigen. Dies mag etwas unangenehm erscheinen, aber die Realität ist, dass die Implementierung so einfach ist, dass wir nicht einmal erkennen, dass wir es sind Die Verwendung von mehr Dingen als Bootstrap bringt standardmäßig.
Icons
Eine der ersten Komponenten, die wir verstehen müssen, sind die Symbole, denn mit diesen kleinen Bildelementen können wir dem Benutzer die Funktionalität eines beliebigen Teils unseres Designs geben. Wenn wir also ein Symbol eines großen X sehen , wissen wir, dass es mit dem Schließen zusammenhängt Im aktuellen Abschnitt oder wenn wir ein Symbol in Form von + sehen , wissen wir, was es heißt, etwas hinzuzufügen.
Im folgenden Bild sehen wir die Symbole, mit denen wir direkt auf der Bootstrap- Website haben:
Dies ist nur eine kleine Auswahl der verfügbaren Symbole. Wenn Sie jedoch auf der offiziellen Seite navigieren, werden alle verfügbaren Optionen angezeigt.
Verwenden Sie die Glyphicons
Die Verwendung dieser Symbole ist sehr einfach. Wir fügen einfach die Glyphicon- Klasse zum HTML- Element hinzu und fügen dann die entsprechende Symbolklasse aus der verfügbaren Liste hinzu. Normalerweise werden die Symbole Elementen wie <i> oder <span> hinzugefügt, da auf diese Weise sichergestellt wird, dass sie nur visuell sind, um auf diese Weise das bestmögliche Ergebnis zu erzielen. Sehen wir uns dann im folgenden Code ein Beispiel für die Verwendung dieser Komponente in HTML an .
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> <! - Bootstrap -> <link href = "bootstrap / css / bootstrap.min.css" rel = "stylesheet"> <link href = "bootstrap / css / bootstrap-theme.min.css" rel = "stylesheet"> <script type = "text / javascript" src = "bootstrap / js / jquery-1.11.2.min.js"> </ script> <script type = "text / javascript" src = "bootstrap / js / bootstrap.min.js"> </ script> <title> Verwenden der Glyphicons in Bootstrap </ title> <style> #estilo { Auffüllenoberteil: 23px; Polsterboden: 24px; rechts auffüllen: 51px; links auffüllen: 55px; } </ style> </ head> <body id = "style"> <div class = "row"> <div class = "col-xs-7"> <div class = "input-group"> <span class = "input-group-addon"> <span class = "glyphicon glyphicon-search"> </ span> </ span> <input type = "text" class = "form-control" placeholder = "Search"> </ div> </ div> <br> <br> <button type = "submit" class = "btn btn-success pull-right"> <span class = "glyphicon glyphicon-log-in"> </ span> Anmelden </ button> <br> <br> <button type = "submit" class = "btn btn-default"> <span class = "glyphicon glyphicon-envelope"> </ span> Mail </ button> <br> <br> <button type = "submit" class = "btn btn-default"> <span class = "glyphicon glyphicon-user"> </ span> Benutzer </ button> <br> <br> <button type = "submit" class = "btn btn-warning"> <span class = "glyphicon glyphicon-trash"> </ span> Papierkorb </ button> <br> <br> <br> <button type = "submit" class = "btn btn-danger"> <span class = "glyphicon glyphicon-logout"> </ span> Sitzung schließen </ button> <br> <br> </ div> </ body> </ html>
In diesen Code haben wir einfach die Einschlüsse unserer entsprechenden Bootstrap- Bibliotheken eingefügt , jQuery als Drittanbieter-Bibliothek hinzugefügt und dann die js- Bibliothek von Bootstrap hinzugefügt. Es ist wichtig, diese Reihenfolge beizubehalten, da die js-Bibliothek von Bootstrap jQuery benötigt und wenn sie später enthalten ist Es wird uns einen Fehler bei der Implementierung geben.
Dann haben wir in unserem <body> einige Abschnitte erstellt, in denen wir die Glyphicons hinzugefügt haben , für unsere Zwecke war das Platzieren der Icons innerhalb des <span> -Tags ausreichend. Wenn wir in unserem Browser ausführen, erhalten wir folgendes Ergebnis:
Wie wir sehen, werden die Nachrichten von Symbolen begleitet, die ihnen mehr Gewicht und Verständnis verleihen. Wenn beispielsweise im Suchfeld jemand kein Englisch spricht, wird die Nachrichtensuche nicht verstanden. Wenn Sie jedoch Computersysteme verwendet haben und das Symbol der Lupe sofort sehen, wissen Sie, dass es sich bezieht zu suchen, das ist die wahre macht dieser komponente.
Navigationsregisterkarten
Eine weitere wichtige Komponente sind die Navigationsregisterkarten, mit denen wir unseren Inhalt auf einer einzigen Seite organisieren können, um so viel Platz zu sparen und dem Benutzer das Leben zu erleichtern, da wir nicht viele Abschnitte in unserer Webanwendung lernen müssen.
Um diese Registerkarten verwenden zu können, benötigen wir die Hilfe der Klasse nav . Hierbei wird der Standard- HTML-Stil der <ul> -Elemente und ihrer untergeordneten Elemente <li> entfernt , um die Verwendung und spätere Anpassung an unser Design zu erleichtern. Dazu fügen wir einfach die Klassen nav und nav-tabs zu einem <ul> -Element hinzu und erhalten damit das entsprechende Ergebnis.
Sehen wir uns den folgenden Code an, in dem wir diese Lösung implementiert haben. Wie im vorherigen Beispiel müssen wir die Dateien bootstrap.css , bootstrap-theme.css , bootstrap.js und jquery.js einschließen . Sehen wir uns unseren Code an:
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> <! - Bootstrap -> <link href = "bootstrap / css / bootstrap.min.css" rel = "stylesheet"> <link href = "bootstrap / css / bootstrap-theme.min.css" rel = "stylesheet"> <script type = "text / javascript" src = "bootstrap / js / jquery-1.11.2.min.js"> </ script> <script type = "text / javascript" src = "bootstrap / js / bootstrap.min.js"> </ script> <title> Verwenden der Glyphicons in Bootstrap </ title> <style> #estilo { Auffüllenoberteil: 23px; Polsterboden: 24px; rechts auffüllen: 51px; links auffüllen: 55px; } </ style> </ head> <body id = "style"> <div class = "row"> <ul class = "nav nav-tabs"> <li> <a href="#"> <span class = "glyphicon glyphicon-sd-video"> </ span> Sicherheit </a> </ li> <li class = "active"> <a href="#"> <span class = "glyphicon glyphicon-book"> </ span> Datensätze </a> </ li> <li> <a href="#"> <span class = "glyphicon glyphicon-inbox"> </ span> Inhalt </a> </ li> </ ul> </ div> </ body> </ html>
Wie wir bereits bemerkt haben, können wir mit dem <ul> -Element in dieser Klasse eine normale HTML- Struktur erstellen. Das Ergebnis gibt uns jedoch eine andere Möglichkeit, die Informationen zu organisieren. Wir können einen weiteren interessanten Aspekt unseres Codes hervorheben. Es ist die Kombination der Glyphicons mit dieser Lösung, die zeigt, was wir über die Unabhängigkeit der Elemente erklären.
Dropdown-Menüs
Eine weitere sehr hilfreiche Komponente sind die Dropdown-Menüs, mit denen wir viele Optionen auf engstem Raum zusammenfassen können, insbesondere für Webseiten mit vielen Kategorien, die organisiert werden müssen.
Wir müssen zuerst ein Element haben, das die Kopfzeile der Dropdown-Liste ist, dann müssen wir das <ul> haben , das die Optionen enthält, die angezeigt werden sollen. Zu diesem Zweck werden wir das vorherige Beispiel neu formulieren, um ein Dropdown-Menü im Inhaltsregister hinzuzufügen. Auf diese Weise können wir unser Beispiel besser verstehen.
Zusammenfassend zeigen wir nur den Inhalt von <body>, da der Header derselbe ist. Sehen wir uns dann den Code für unsere Dropdown-Menü-Funktionalität an:
<body id = "style"> <div class = "row"> <ul class = "nav nav-tabs"> <li> <a href="#"> <span class = "glyphicon glyphicon-sd-video"> </ span> Sicherheit </a> </ li> <li class = "active"> <a href="#"> <span class = "glyphicon glyphicon-book"> </ span> Datensätze </a> </ li> <li class = "dropdown"> <a href="#" data-toggle="dropdown"> <span class = "glyphicon glyphicon-inbox"> </ span> Inhalt <b class = "caret"> </ b> </a> <ul class = "dropdown-menu"> <li> <span class = "glyphicon glyphicon-ok"> Videos </ li> <li class = "divider"> </ li> <li> <span class = "glyphicon glyphicon-ok"> Bilder </ li> <li class = "divider"> </ li> <li> <span class = "glyphicon glyphicon-ok"> Audio </ li> </ ul> </ li> </ ul> </ div> </ body>
Wir sehen dann, dass wir in einem <li> -Element das Dropdown mit der Dropdown- Klasse gestartet haben , definieren darin ein Element als Auslöser der Optionen beim Hinzufügen der Dropdown-Toggle- Klasse und erstellen schließlich ein <ul> mit der Dropdown- Klasse -Menü zu identifizieren, dass Sie alle Optionen haben, die wir sehen werden. Wenn wir unser Beispiel im Browser ausführen, erhalten wir folgendes Ergebnis:
Dies ist natürlich nur ein kleiner Teil dessen, was wir erreichen können, da es möglich ist, mehr Effekte und Stile zu verwenden, um das Erscheinungsbild dieser Effekte zu ändern. Damit schließen wir dieses Tutorial ab, in dem wir drei der nützlichsten Komponenten kennengelernt haben , die wir in Bootstrap verwenden können , um so eine wesentlich bessere Anpassung unserer Anwendung zu erreichen.