Twitter Bootstrap ist eine Sammlung kostenloser Softwaretools zur Erstellung von Websites und Anwendungen.
Es ist ein Rahmen zur Förderung der Konsistenz durch interne Tools. Vor Bootstrap wurden mehrere Bibliotheken für die Entwicklung von Benutzeroberflächen verwendet, was zu Inkonsistenzen und einem hohen Wartungsaufwand führte.
Bootstrap ist modular aufgebaut und besteht im Wesentlichen aus einer Reihe von Stylesheets, die die verschiedenen Werkzeugkomponenten implementieren. Ein Stylesheet namens bootstrap.less enthält die Komponenten von Stylesheets. Entwickler können dieselbe Bootstrap-Datei anpassen und die Komponenten auswählen, die sie in ihrem Projekt verwenden möchten.
In Bootstrap verfügbare Tools und Klassen
Gangsystem und reaktionsschnelles Design
Bootstrap wird mit einem Standard-Gruppenlayout von 940 Pixeln geliefert. Alternativ kann der Entwickler ein Design mit variabler Breite verwenden. Dadurch wird die Breite der Spalten automatisch angepasst.
Das CSS-Stylesheet
Bootstrap bietet eine Reihe von Stylesheets, die grundlegende Stildefinitionen für alle HTML-Komponenten enthalten. Dies verleiht dem Browser und dem Breitensystem eine Einheitlichkeit und verleiht ein modernes Erscheinungsbild für die Formatierung von Textelementen, Tabellen und Formularen.
Wiederverwendbare Komponenten
Die regulären Elemente von HTML, Bootstrap, enthalten eine weitere Schnittstelle häufig verwendeter Elemente. Dies umfasst Schaltflächen mit erweiterten Funktionen wie Schaltflächengruppen oder Schaltflächen mit Dropdown-Menüoption, Navigationslisten, horizontale und vertikale Beschriftungen, Navigationspfad, Seitenwechsel, Beschriftungen, erweiterte typografische Miniaturisierungsfunktionen, Warnmeldungsformate und Fortschrittsbalken .
J & amp; # 097; v & amp; # 097; Skript- und jQuery-Plugins
Die Komponenten des J & amp; # 097; v & amp; # 097; -Skripts für Bootstrap basieren auf der jQuery-Bibliothek des J & amp; # 097; v & amp; # 097; -Skripts. Die Plug-Ins befinden sich im jQuery-Plug-In-Tool. Sie bieten zusätzliche Elemente der Benutzeroberfläche wie Dialoge, QuickInfos und Karussells.
Sie erweitern auch die Funktionalität einiger vorhandener Oberflächenelemente, einschließlich beispielsweise einer selbstvervollständigenden Funktion für Eingabefelder. Version 2.0 unterstützt die folgenden Skript-Plug-Ins: Modal, Dropdown, Scrollspy, Tab, QuickInfo, Popover, Warnung, Schaltfläche, Reduzieren, Karussell und Typeahead.
Um Bootstrap in einer HTML-Seite zu verwenden, sollte der Entwickler nur das CSS-Bootstrap-Stylesheet herunterladen und mit der HTML-Datei verknüpfen.
Laden Sie den CSS-Code und das kompilierte Skript J & amp; # 097; v & amp; # 097; herunter. Dies ist der einfachste Weg, um Bootstrap zu verwenden. Der Nachteil ist, dass diese Version nicht die Originaldateien oder die Dokumentation enthält. Um diese Version herunterzuladen, gehen Sie zu getbootstrap.com und klicken Sie auf die Schaltfläche Download Bootstrap.
Wir können auch auf folgende Weise eine Verknüpfung zu den Bootstrap-Dateien von externen Servern herstellen:
Um diese Dateien zu verwenden, ändern Sie die folgenden Links auf Ihren Seiten
<! - Kompilierte und komprimierte Version von Bootstrap CSS -> <link rel = "stylesheet" href = "// netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> <! - Optionales Thema -> <link rel = "stylesheet" href = "// netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css"> <! - Kompilierte und komprimierte Version des Bootstrap-Skripts -> & lt; script src = "// netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"> </ script>
Nach dem Entpacken der Datei, die Sie mit der kompilierten Version von Bootstrap heruntergeladen haben, wird die folgende Struktur von Dateien und Verzeichnissen angezeigt:
Bootstrap /
├── css /
│ │ bootstrap.css
│ ├── bootstrap.min.css
│ │ bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js /
│ │ bootstrap.js
│ │ bootstrap.min.js
└── Schriften /
├── Glyphicons-Halblinge-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halblings-regular.ttf
└── Glyphicons-Halblinge-Regular.woff
Diese Dateien sind die Bibliotheken, aus denen sich der Bootstrap zusammensetzt. Später werden die Komponenten und ihre Verwendung beschrieben.