Hier gibt es viele Fragen zu Bootstrap. Ich sehe viele Leute, die es benutzen. Also habe ich versucht, es zu recherchieren, und ich habe die offizielle Bootstrap-Site gefunden , aber es gab nur einen Download-Bereich und ein paar Worte danach. Nichts, was erklärt, wofür es ist ... Ich habe nur verstanden, dass es ein Front-End-Helfer ist. Ich habe versucht, etwas durch Googeln zu finden, aber nichts Bestimmtes gefunden. Alles, was ich gefunden habe, hängt mit der Definition der Informatik zusammen.

Meine Fragen sind also:

• Was ist Bootstrap überhaupt?
• Wofür wird es verwendet und wie hilft es bei der Front-End-Entwicklung?
• Ich möchte auch einige Details, die es erklären.

Es handelt sich um ein Open-Source-Framework für HTML, CSS und JavaScript (ursprünglich von Twitter erstellt), das Sie als Grundlage für die Erstellung von Websites oder Webanwendungen verwenden können.

• Weitere Informationen und Links zum Download

• Loslegen

• Beispiele

• Themen

• Bootply - Bootstrap-Editor und Builder

Aktualisieren

Die offizielle Bootstrap-Website wird aktualisiert und enthält eine klare Definition.

"Bootstrap ist das beliebteste HTML-, CSS- und JS-Framework für die Entwicklung reaktionsschneller, mobiler Erstprojekte im Web."

"Entworfen und gebaut mit der ganzen Liebe der Welt von @mdo und @fat ."

Bootstrap ist ein Open-Source-Javascript-Framework, das vom Team von Twitter entwickelt wurde. Es ist eine Kombination aus HTML-, CSS- und Javascript-Code, mit deren Hilfe Benutzeroberflächenkomponenten erstellt werden können. Bootstrap wurde auch so programmiert, dass es sowohl HTML5 als auch CSS3 unterstützt.

Es wird auch als Front-End-Framework bezeichnet.

Bootstrap ist eine kostenlose Sammlung von Tools zum Erstellen von Websites und Webanwendungen.

Es enthält HTML- und CSS-basierte Entwurfsvorlagen für Typografie, Formulare, Schaltflächen, Navigation und andere Schnittstellenkomponenten sowie optionale JavaScript-Erweiterungen.

Einige Gründe für Programmierer bevorzugten das Bootstrap Framework

1. Einfach loszulegen

2. Tolles Rastersystem

3. Basisstil für die meisten HTML-Elemente (Typografie, Code, Tabellen, Formulare, Schaltflächen, Bilder, Symbole)

4. Umfangreiche Liste der Komponenten

5. Gebündelte Javascript-Plugins

Entnommen aus About Bootstrap Framework

Bootstrap ist, wie ich es kenne, ein gut definiertes CSS. Obwohl Sie Bootstrap verwenden, können Sie auch JavaScript, jQuery usw. verwenden. Der Hauptunterschied besteht jedoch darin, dass Sie mit Bootstrap einfach den Klassennamen aufrufen können und dann die Ausgabe im HTML-Formular erhalten. für zB. Färben von Schaltflächen Formen von Text mithilfe von Layouts. Für all dies müssen Sie keine CSS-Datei schreiben, sondern müssen nur den richtigen Klassennamen für die Gestaltung Ihres HTML-Formulars verwenden.

In einfacheren Worten, Sie können Bootstrap als Front-End-Webframework verstehen, das von Twitter erstellt wurde, um schneller auf Geräte reagierende Webanwendungen zu erstellen. Bootstrap kann auch meistens als eine Sammlung von darin definierten CSS-Klassen verstanden werden, die einfach direkt verwendet werden können. Im Hintergrund werden CSS, Javascript, jQuery usw. verwendet, um den Stil, die Effekte und die Aktionen für Bootstrap-Elemente zu erstellen.

Möglicherweise wissen Sie, dass wir CSS zum Stylen von Webseitenelementen verwenden, Klassen erstellen und Webseitenelementen Klassen zuweisen, um den Stil auf sie anzuwenden. Bootstrap hier vereinfacht das Entwerfen, da wir nur Bootstrap-Dateien einschließen und die vordefinierten Klassennamen von Bootstrap für unsere Webseitenelemente erwähnen müssen. Diese werden automatisch über Bootstrap gestaltet. Auf diese Weise müssen wir keine eigenen CSS-Klassen mehr schreiben, um Webseitenelemente zu gestalten. Am wichtigsten ist, dass Bootstrap so konzipiert ist, dass Ihr Website-Gerät reagiert, und das ist der Hauptzweck davon. Andere Alternativen für Bootstrap könnten sein - Foundation , Materialise usw. Frameworks.

Mit Bootstrap können Sie nicht viel CSS-Code schreiben und Zeit sparen, die Sie für die Gestaltung der Webseiten aufwenden.

Bootstrap ist ein Open-Source-CSS-JavaScript-Framework, das ursprünglich vom Twitter-Team aus Designern und Entwicklern für Twitter-Anwendungen entwickelt wurde. Dann veröffentlichten sie es für Open Source. Als langjähriger Benutzer von Twitter Bootstrap finde ich, dass es eines der besten ist, um mobile, reaktionsschnelle Websites zu entwerfen. Viele CSS- und Javascript-Plugins stehen für die Gestaltung Ihrer Website in kürzester Zeit zur Verfügung. Es ist eine Art Rapid Template Design Framework. Einige Leute beschweren sich, dass die Bootstrap-CSS-Dateien schwer sind und Zeit zum Laden benötigen, aber diese Behauptungen werden von faulen Leuten gemacht. Sie müssen nicht die vollständige bootstrap.css auf Ihrer Website behalten. Sie haben immer die Möglichkeit, die Stile für Komponenten zu entfernen, die Sie für Ihre Website nicht benötigen. Zum Beispiel, Wenn Sie nur grundlegende Komponenten wie Formulare und Schaltflächen verwenden, können Sie andere Komponenten wie Akkordeons usw. aus der CSS-Hauptdatei entfernen. Um sich mit Bootstrap zu beschäftigen, können Sie die grundlegenden Vorlagen und Komponenten von herunterladengetbootstrap site und lass die Magie geschehen.

Haftungsausschluss: Ich habe in der Vergangenheit Bootstrap verwendet, aber ich habe nie wirklich gewürdigt, was es eigentlich ist. Diese Beschreibung stammt von meiner heutigen Definition. Ich weiß, dass Bootstrap v4 nicht verfügbar ist, aber ich fand die Dokumentation zu Bootstrap v3 viel klarer, also habe ich das verwendet. Die Bibliothek wird das, was sie bietet, nicht grundlegend ändern.

Kurz

Bootstrap ist eine Sammlung von CSS- und Javascript-Dateien, die ein ansprechendes Standard-Styling für Standard-HTML-Elemente und einige gängige Webinhaltsobjekte bieten, die keine Standard-HTML-Elemente sind.

Um eine Analogie zu erstellen, ist es so, als würde man ein Thema in Powerpoint anwenden, aber für Ihre Website: Es lässt die Dinge ohne großen Aufwand ziemlich gut aussehen.

Woraus besteht es?

Die offizielle v3-Dokumentation gliedert sich in drei Abschnitte:

• CSS
• Komponenten
• Javascript

Diese entsprechen in etwa den drei wichtigsten Funktionen von Bootstrap:

• Einfache CSS-Dateien, die Standard-HTML-Elemente formatieren. Mit Bootstrap sehen Ihre Standardelemente also hübsch aus. zB HTML:<input class="btn btn-default" type="button" value="Input">Click me</button>
• CSS - Dateien , die auf Standard - HTML - Elemente verwenden Styling , um sie in etwas, das keine Standard - HTML - Element ist , sondern ist ein Standard - Bootstrap - Element (zB https://getbootstrap.com/docs/3.3/components/#progress ). Auf diese Weise erweitert Bootstrap die Liste der "Standard" -Webelemente auf visuell konsistente Weise. zB HTML:<span class="glyphicon glyphicon-align-left"></span>
• Die CSS-Klassen wurden unter Berücksichtigung von jQuery entwickelt. Intern verwendet Bootstrap jQuery-Selektoren, um die Stile im laufenden Betrieb zu ändern und mit dem DOM zu interagieren, und bietet dem Benutzer somit die gleichen Funktionen. Ich glaube, das bedarf weiterer Erklärungen, also ...

Verwenden von Javascript / jQuery

Bootstrap erweitert jQuery erheblich. Wenn wir uns den Quellcode ansehen, können wir sehen, dass er jQuery verwendet, um Dinge zu tun wie: Richten Sie Listener für das Keydown-Ereignis ein, um mit Dropdowns zu interagieren . Das gesamte jQuery-Setup wird ausgeführt, wenn Sie es in Ihr <script>Tag importieren. Sie müssen daher sicherstellen, dass jQuery geladen ist, bevor Bootstrap ausgeführt wird.

Darüber hinaus wird das Javascript enger mit dem DOM verknüpft als mit einfachem jQuery, wodurch eine Javascript- Klassenschnittstelle bereitgestellt wird. zB eine Taste programmgesteuert umschalten . Denken Sie daran, dass CSS nur definiert, wie eine Sache aussieht. Daher besteht die Hauptaufgabe dieser Vorgänge darin, zu ändern, welche CSS-Klassen zu diesem Zeitpunkt auf das Element angewendet werden. Diese Art von Änderung, basierend auf Benutzereingaben, kann nicht mit einfachem CSS durchgeführt werden.

Es gibt andere Standardinteraktionen mit einem Benutzer, an die wir Internetnutzer gewöhnt sind und die nicht von CSS abgedeckt werden. Klicken Sie beispielsweise auf einen Link, mit dem Sie eine Seite nach unten scrollen, anstatt die Seiten zu ändern. Mit Bootstrap können Sie dieses Verhalten auf einfache Weise auf Ihrer eigenen Website implementieren.

Standards

Ich habe das Wort "Standard" hier oft erwähnt, und das aus gutem Grund. Ich denke, das Beste, was Bootstrap bietet, sind gut aussehende Standards. Sie können das Standardthema beliebig ändern, aber es ist eine bessere Basis als rohes HTML, CSS und JS. Und deshalb heißt es "Framework".

Unterschiedliche Webbrowser haben unterschiedliche Standardstile und können unterschiedlich funktionieren. Sie benötigen unterschiedliche CSS-Präfixe und ähnliches. Ein Hauptvorteil von Bootstrap ist, dass es viel zuverlässiger ist, als all das browserübergreifende Zeug selbst zu schreiben (Sie werden sicher immer noch Probleme haben, aber es ist einfacher).

Ich denke, dass Bootstrap mehr bevorzugt wurde, wenn Schluck und Babel nicht so beliebt waren. Wenn man sich Bootstrap ansieht, scheint es aus einer Zeit zu stammen, bevor alle ihr Javascript kompiliert haben. Es ist immer noch relevant, aber Sie können jetzt einige der Vorteile aus anderen Quellen nutzen.

_{In neueren Versionen von CSS können Sie Übergänge zwischen diesen statischen Listen definieren, wenn sie sich ändern. Die ursprüngliche Version von Bootstrap ist älter als die weit verbreitete Einführung dieser Funktion in Browsern, sodass sie weiterhin über eigene Animationsklassen verfügen. Es gibt ein paar Teile von Bootstrap, die so aussehen: Das andere Zeug ist aufgetaucht und lässt es ein bisschen überflüssig aussehen.}

Bootstrap ist ein HTML-, CSS- und JS-Framework mit vielen Komponenten, mit denen Sie sehr schnell schöne und moderne Websites oder Webanwendungen erstellen können.

Die folgenden Websites enthalten Beispiele, Elemente und wiederverwendbare Komponenten, die Sie mithilfe des Bootstrap-Frameworks in Ihr Projekt integrieren können

bootsnipp.com

startbootstrap.com

bootdey.com

Bootstrap ist das weltweit beliebteste und am weitesten verbreitete Open-Source-Framework für die Entwicklung mit HTML, CSS und JS. Es ist ein Front-End-Framework von HTML. Bootstrap hilft beim Erstellen reaktionsfähiger Websites oder Webanwendungen und eines 12-Spalten-Rastersystems, mit dessen Hilfe die Website dynamisch an eine geeignete Bildschirmauflösung angepasst werden kann. Die aktuelle Version von Bootstrap ist 4.3.1 und das Bootstrap-Team hat auch offiziell die Bootstrap 5- Version angekündigt und Änderungen wie das Entfernen von jquery aus dem Bootstrap vorgenommen. Einige der entscheidenden Gründe, warum das Bootstrap-Framework am meisten bevorzugt wird, sind:

• Es ist einfach zu bedienen
• Bootstrap hat eine große Community-Unterstützung
• Anpassungen können einfach vorgenommen werden
• Es erhöht die Entwicklungsgeschwindigkeit

• Empfänglichkeit

  Weitere Informationen finden Sie auf der offiziellen Website: https://getbootstrap.com/

Quelle: https://vmokshagroup.com/blog/bootstrap-advantages/

Nach den heutigen Standards und der Web-Terminologie würde ich sagen, dass Bootstrap eigentlich kein Framework ist , obwohl dies auf der Website behauptet wird. Die meisten Entwickler betrachten Angular-, Vue- und React-Frameworks, während Bootstrap allgemein als " Bibliothek " bezeichnet wird.

Um genau und korrekt zu sein, ist Bootstrap eine Open-Source- Sammlung von CSS-, JavaScript- und HTML- Design-Dienstprogrammen, die darauf abzielt, häufig verwendete Webelemente wesentlich schneller (und intelligenter) zu entwickeln, als sie von Grund auf neu codieren zu müssen .

Einige Grundprinzipien, die zum Erfolg von Bootstrap beigetragen haben:

• es ist wiederverwendbar
• Es ist flexibel (dh es ermöglicht benutzerdefinierte Rastersysteme, das einfache Ändern von Reaktionspunkten, Spaltenrinnengrößen oder Statusfarben; als Faustregel gilt, dass die meisten Einstellungen von globalen Variablen gesteuert werden).
• es ist intuitiv
• Es ist modular (sowohl JavaScript als auch (S) CSS verwenden einen modularen Ansatz; man kann leicht Tutorials zum Erstellen von benutzerdefinierten Bootstrap-Builds finden, die nur die Teile enthalten, die sie benötigen).
• ist überdurchschnittlich browserübergreifend kompatibel
• Webzugriff sofort einsatzbereit (Screenreader bereit)
• es ist ziemlich gut dokumentiert

Es enthält Entwurfsvorlagen und Funktionen für: Layout, Typografie, Formulare, Navigation, Menüs (einschließlich Dropdown-Listen), Schaltflächen, Bedienfelder, Abzeichen, Modalitäten, Warnungen, Registerkarten, zusammenklappbare Elemente, Akkordeons, Karussells, Listen, Tabellen, Paginierungen, Medienprogramme (einschließlich) Einbettungen, Bilder und Bildersetzung), Dienstprogramme für Reaktionsfähigkeit, farbbasierte Dienstprogramme (primär, sekundär, Gefahr, Warnung, Info, hell, dunkel, stummgeschaltet, weiß), andere Dienstprogramme (Position, Rand, Polsterung, Größe, Abstand, Ausrichtung, Sichtbarkeit), Scrollspy, Affix, Tooltips, Popovers.

Standardmäßig basiert es auf jQuery, aber Sie werden jQuery-freie Varianten finden, die von jedem der modernen populären progressiven JavaScript-Frameworks unterstützt werden:

• React-Bootstrap - Reagierter Bootstrap
• BootrapVue - Bootstrap mit Vue- Unterstützung
• ng-bootstrap - Winkelbetriebener Bootstrap

Die Arbeit mit Bootstrap hängt stark von der Anwendung bestimmter Klassen (oder, abhängig vom JS-Framework: Anweisungen, Methoden oder Attribute / Requisiten) und von der Verwendung bestimmter Markup-Strukturen ab.

Die Dokumentation enthält normalerweise allgemeine Beispiele, die einfach kopiert und als Startervorlagen verwendet werden können.

Ein weiterer Vorteil der Entwicklung mit Bootstrap ist die lebendige Community, die in eine Fülle von Themen, Vorlagen und Plugins übersetzt wird, von denen die meisten Open Source sind (dh Kalender, Datums- / Zeitauswahl, Plugins für die tabellarische Inhaltsverwaltung) sowie Bibliotheken / Komponentensammlungen, die auf Bootstrap basieren, wie z. B. MDB, Portfolio-Vorlagen, Admin-Vorlagen usw.)

Last but not least wurde Bootstrap im Laufe der Jahre gut gewartet, was es zu einer soliden Wahl für produktionsbereite Anwendungen / Websites macht.