Verwenden der Bootstrap-Komponenten

Bootstrap Es hat zwei großartige solide Grundlagen, die uns einen Standard-Ausgangspunkt für die verschiedenen Webdesign-Lösungen geben, die wir brauchen oder machen möchten, dies sind das Grid und das Basis-CSS. Mit diesen beiden Tools können wir eine große zentrale Basis aufbauen, wo wir können Platzieren Sie es so, dass all die verschiedenen Elemente, aus denen unsere Benutzeroberfläche besteht, ruhen.
Wie alle Bases machen diese selbst den Rest der Konstruktion nicht aus, um einen höheren Grad an Raffinesse und Detail zu erreichen, ist es notwendig, zusätzliche Komponenten zu verwenden, die sich auf unserer Base befinden und deren Leistung natürlich durch die Solidität beeinträchtigt wird. buchstäblich.
Im Falle des Bootstrap Wir haben mehrere Komponenten, die uns helfen, die Details unserer Designs zu maximieren, Komponenten, die von Symbolen, Bedienfeldern bis hin zu Kopfzeilen reichen. Elemente, die uns helfen, unsere Anwendung von anderen zu unterscheiden und hervorzuheben.
Die Komponenten in Bootstrap Sie können innerhalb unserer Seiten unabhängig vom Rest verwendet werden, d. h. wir können beliebig viele Komponenten in einem einzigen Dokument generieren, ohne dass sie mit den anderen in Konflikt geraten.
Darüber hinaus ist der Basisstil standardmäßig bereits vordefiniert, sodass wir unsere Anwendung schnell und ohne großen Aufwand erstellen können, wobei wir am Ende unsere gesamte Anwendung anpassen können, indem wir den Basisstil für unsere eigenen Stile ändern.
Die Komponenten können aus CSS, JavaScript oder beides, also einige außer dem Basis-CSS Sie benötigen Bibliotheken von Drittanbietern, wie z jQuery, dies mag etwas unangenehm erscheinen, aber die Realität ist, dass die Implementierung so einfach ist, dass wir nicht einmal bemerken, dass wir mehr Dinge verwenden, als standardmäßig bereitgestellt werden Bootstrap.
Eine der ersten Komponenten, die wir verstehen müssen, sind die Symbole, da wir mit diesen kleinen Bildstücken dem Benutzer die Funktionalität jedes Teils unseres Designs verständlich machen können, also wenn wir ein großes Symbol sehen x wir wissen, dass es mit dem Schließen des aktuellen Abschnitts zusammenhängt oder für den Fall, dass wir ein Symbol in Form von . sehen + wir werden wissen, dass es etwas hinzuzufügen ist.
GlyphiconsIn Bootstrap Es gibt eine Bibliothek mit Symbolen Glyphicons, sehr beliebt im Webdesign und bietet uns praktisch ein Symbol für jede Aktion, die wir auf einer Webseite ausführen können diese Zwecke.
Im folgenden Bild sehen wir die Icons, die wir direkt auf der Website von . haben Bootstrap:

VERGRÖSSERN

Dies ist nur eine kleine Auswahl der verfügbaren Symbole, aber wenn wir die offizielle Seite durchsuchen, sehen wir alle Optionen, die wir für unsere Verwendung haben.
Die Verwendung dieser Symbole ist sehr einfach, wir müssen nur die Klasse hinzufügen glyphicon zum Element HTML und fügen Sie dann die Klasse des entsprechenden Symbols aus der verfügbaren Liste hinzu. Symbole werden normalerweise zu Elementen hinzugefügt wie oder weil wir auf diese Weise sicherstellen, dass sie nur optisch sind, um das bestmögliche Ergebnis zu erzielen. Sehen wir uns dann im folgenden Code ein Beispiel für die Verwendung dieser Komponente in . an HTML.

 Verwenden der Glyphicons in Bootstrap
Einzahlen
E-Mail
Benutzer
Papierkorb
Abmelden

In diesem Code haben wir einfach die Einschlüsse aus unseren Bibliotheken von . platziert Bootstrap entsprechend, hinzufügen jQuery als Drittanbieterbibliothek und fügen Sie dann die Bibliothek hinzu js von Bootstrap, ist es wichtig, diese Reihenfolge beizubehalten, da die js-Bibliothek von Bootstrap brauchen jQuery und wenn es enthalten ist, erhalten wir einen Fehler bei der Implementierung.
Dann haben wir in unserem einige Abschnitte erstellt, in denen wir die hinzugefügt haben GlyphiconsFür unsere Zwecke war es ausreichend, die Symbole innerhalb des Etiketts zu platzieren. Wenn wir in unserem Browser ausführen, erhalten wir folgendes Ergebnis:

Wie wir sehen können, begleiten die Symbole die Nachrichten und geben ihnen mehr Gewicht und Verständnis, zum Beispiel im Suchfeld, wenn jemand kein Englisch spricht, wird er die Nachricht nicht verstehen SucheWenn Sie jedoch Computersysteme verwendet haben und das Lupensymbol sofort sehen, wissen Sie, dass es sich auf Suchen bezieht, das ist die wahre Stärke dieser Komponente.
Ein weiterer wichtiger Bestandteil sind die Navigationsreiter, die es uns ermöglichen, unsere Inhalte auf einer Seite zu organisieren, so viel Platz zu sparen und dem Benutzer das Leben zu erleichtern, indem wir nicht viele Abschnitte in unserer Webanwendung lernen müssen.
Um diese Registerkarten zu verwenden, benötigen wir die Hilfe der Klasse Navi, entfernt es den Standardstil von HTML der Elemente und seine Söhne , was die Nutzung und die spätere Anpassung an unser Design erleichtert. Um dies zu verwenden müssen wir einfach die Klassen hinzufügen Navi Ja Navigations-Tabs zu einem Element und damit erhalten wir das entsprechende Ergebnis.
Sehen wir uns den folgenden Code an, in dem wir diese Lösung implementieren, wie im vorherigen Beispiel müssen wir die Dateien einschließen bootstrap.css, Bootstrap-Theme.css, bootstrap.js Ja jquery.js, sehen wir uns unseren Code an:

 Verwenden der Glyphicons in Bootstrap

Sicherheit
Aufzeichnungen
Inhalt

Wie wir die Verwendung des Elements bemerken Mit dieser Klasse können wir eine Struktur erstellen HTML normal, aber das Ergebnis, wie wir unten sehen werden, gibt uns eine andere Möglichkeit, die Informationen zu organisieren. Wir können einen weiteren interessanten Aspekt unseres Codes hervorheben und es ist die Kombination der Glyphicons mit dieser Lösung demonstrieren, was wir über die Unabhängigkeit der Elemente erklären.

VERGRÖSSERN

Eine weitere sehr hilfreiche Komponente sind die Dropdown-Menüs, die es uns ermöglichen, viele Optionen auf kleinem Raum zu verdichten, insbesondere für Webseiten mit vielen Kategorien, die sie organisieren müssen.
Dropdown-ListeDie Komponente von Bootstrap wer das handhabt heißt Dropdown-Liste und wird wie die vorherige Komponente im Element angewendet allerdings ist sein Aufbau etwas komplexer, geht aber nicht über den HTML-Arbeitsstil hinaus.
Wir müssen zuerst ein Element haben, das die Kopfzeile des Dropdown-Menüs ist, dann müssen wir das die die anzuzeigenden Optionen enthält. Dazu werden wir das vorherige Beispiel umformulieren, um ein Dropdown-Menü im Inhalts-Tab hinzuzufügen, damit wir unser Beispiel besser verstehen können.
Um es kurz zusammenzufassen, zeigen wir nur den Inhalt des, da der Header derselbe ist. Sehen wir uns dann den Code für unsere Dropdown-Menüfunktion an:

Sicherheit
Aufzeichnungen
Inhalt

Videos
Bilder
Audio

Wir sehen dann, wie in einem Element wir haben das Dropdown mit der Klasse gestartet Dropdown-Liste, dann definieren wir darin ein Element als Optionsauslöser beim Hinzufügen der Klasse Dropdown-Schalter und schließlich haben wir a . erstellt was hat die klasse Dropdown-Menü um zu erkennen, dass es alle Optionen hat, die wir sehen werden. Wenn wir unser Beispiel im Browser ausführen, erhalten wir folgendes Ergebnis:

VERGRÖSSERN

Dies ist natürlich nur ein kleiner Teil dessen, was wir erreichen können, da es möglich ist, mehr Effekte einzubinden und mit verschiedenen Stilen die Optik dieser zu ändern. Damit beenden wir dieses Tutorial, in dem wir drei der nützlichsten Komponenten gesehen haben, die wir in verwenden können Bootstrap, wodurch eine viel größere Anpassung unserer Anwendung erreicht wird.