Wenn Sie eine Website für Ihr Unternehmen erstellen, haben Sie wahrscheinlich eine lange Wunschliste.
Sie möchten, dass das Design das Erscheinungsbild Ihrer Marke widerspiegelt. Sie möchten die erforderliche Funktionalität haben, um die Bedürfnisse Ihrer Besucher zu erfüllen, ohne das Budget zu überschreiten. Und Sie möchten responsive Layouts erstellen, die Elemente wie Schaltflächen und Formulare konsistent anzeigen, unabhängig davon, welches Gerät oder welchen Browser der Besucher verwendet.
Wenn Sie mit Bootstrap erstellen, können Sie diesen letzten Punkt von Ihrer Liste streichen. Bootstrap ist ein Open-Source-Framework zum schnellen Erstellen von responsiven Websites und Mobile-First-Webprojekten. Da es eine Sammlung wiederverwendbaren Codes bietet, müssen Sie keine Site von Grund auf neu erstellen.
Um zu verstehen, warum über 21 Millionen Websites im Internet Bootstrap verwenden , schauen wir uns genauer an, was es ist und wie man es verwendet.
Was ist Bootstrap-CSS?
Bootstrap CSS ist das führende CSS-Framework für die Entwicklung responsiver und mobiler Websites. Dieses kostenlose Open-Source-Toolkit verfügt über ein responsives Rastersystem, globale CSS-Einstellungen, umfangreiche vorgefertigte Komponenten wie Schaltflächen, Navigationsleisten und Formulare sowie optionale JavaScript-Plugins zur Beschleunigung des Entwicklungsprozesses.
Obwohl Bootstrap ein Open-Source-Toolkit für die Entwicklung mit HTML, CSS und JavaScript ist , wird es oft als CSS-Framework bezeichnet.
Um zu verstehen, warum das so ist, müssen Sie zunächst verstehen, dass CSS im Allgemeinen für Menschen mit allen technischen Erfahrungsstufen leichter zu erlernen ist und in Browsern schneller ist als JavaScript. Aus diesen Gründen haben Bootstrap-Entwickler ihre Texte, wann immer möglich, in CSS (und HTML ) statt in JavaScript geschrieben. Die in Bootstrap enthaltene CSS-Bibliothek ist daher viel größer als die JavaScript-Bibliothek.
Da Bootstrap die Erstellung responsiver Websites einfacher und schneller macht, ist es für viele Frontend-Entwickler und insbesondere Anfänger interessant. Allerdings wird es nicht von allen empfohlen. Im Folgenden sehen wir uns an, warum Bootstrap so beliebt ist und wann es ideal ist – und wann nicht.
Warum Bootstrap?
Bootstrap ist für viele Frontend-Entwickler das bevorzugte Toolkit. Laut W3Techs wird es von 22,1 % aller Websites im Internet verwendet.
Es gibt mehrere Faktoren, die die Popularität von Bootstrap begründen. In erster Linie ist es Open Source und kann daher kostenlos heruntergeladen und verwendet werden. Es ist außerdem vollständig anpassbar und mit allen modernen Browsern kompatibel. Dies gilt jedoch für viele CSS-Frameworks.
Was Bootstrap von anderen Entwicklungs-Toolkits unterscheidet, ist, dass es für mobile Endgeräte entwickelt wurde. Das bedeutet, dass der Code zuerst für mobile Geräte (also die kleinste Bildschirmgröße) optimiert und dann für die Anzeige auf größeren Bildschirmen hochskaliert wurde. Daher stellt die Entwicklung mit Bootstrap CSS sicher, dass Ihre Site für alle Geräte die richtige Darstellung und Touch-Zoom unterstützt.
Ein weiterer Grund für die Beliebtheit von Bootstrap ist seine einfache Handhabung. Es enthält Vorlagen für Typografie, Formulare , Schaltflächen, Dropdown-Menüs, Navigation und andere Schnittstellenkomponenten. Mithilfe dieser vorgefertigten Vorlagen können Sie Funktionen hinzufügen, die das Benutzererlebnis auf Ihrer Site verbessern, ohne sie von Grund auf neu programmieren zu müssen.
Wann wird Bootstrap verwendet?
Es gibt viele Gründe, Bootstrap zu verwenden. Einige davon haben wir oben besprochen, aber sehen wir uns diese Gründe im Folgenden genauer an.
1. Sie möchten eine responsive Website.
Mit Bootstrap ist es viel einfacher, eine responsive Website zu erstellen, als sie von Grund auf neu zu erstellen. Bootstrap verfügt über responsive Stile wie Container und Medienabfragen, um sicherzustellen, dass sich Ihre Website an das Ansichtsfenster anpasst. Das heißt, Sie müssen sich keine Gedanken darüber machen, ob Ihre Besucher Desktops, Tablets oder Mobilgeräte verwenden.
2. Sie möchten Zeit sparen.
Mit Bootstrap können Sie Ihre Site schnell erstellen. Nachdem Sie das Framework heruntergeladen haben, können Sie mit einer Basisvorlage beginnen und dann die benötigten Komponenten hinzufügen. Diese Komponenten sind grundlegende HTML-Elemente wie Tabellen, Formulare, Schaltflächen, Bilder und Symbole, die mit einer Basisklasse gestaltet und mit Modifikatorklassen erweitert werden. Durch die Verwendung dieser vorgefertigten Komponenten wird die Menge an benutzerdefiniertem CSS, die Sie schreiben müssen, erheblich reduziert.
Betrachten Sie beispielsweise Bootstrap-Buttons . Die Basisklasse .btn wird für alle gängigen Stile verwendet, die Sie für Ihre Buttons wünschen, wie Anzeige, Polsterung, Rahmenbreite. Mit dieser Klasse müssen Sie diese CSS-Eigenschaften nicht ständig in Ihrem Stylesheet wiederholen, um jeden einzelnen Button zu formatieren, den Sie hinzufügen.
Modifikatorklassen wie .btn-primary werden dagegen verwendet, um die spezifischeren Stile hinzuzufügen, die Sie für Ihre Schaltflächen wünschen, wie Farbe, Hintergrundfarbe und Rahmenfarbe Ihrer Schaltflächen. Dies ist nur ein Beispiel dafür, wie viel schneller die Verwendung von Bootstrap-Komponenten ist, als sie von Grund auf neu zu programmieren.
3. Sie sind mit HTML und CSS vertraut.
Obwohl Bootstrap den Prozess der Site-Erstellung vereinfacht, müssen Sie mit HTML und CSS vertraut sein, um das Framework verwenden zu können. Wenn Sie beispielsweise die Containerklasse verwenden und Ihr erstes Bootstrap-Raster erstellen, ist es wichtig , das CSS-Boxmodell zu verstehen.
Die gute Nachricht ist, dass Sie für den Einstieg nur grundlegende Programmierkenntnisse benötigen .
4. Ihre Site wird von mehreren Personen erstellt.
Wenn mehrere Personen an einer Site arbeiten, ist Konsistenz wichtig. Sie möchten nicht, dass die Schaltflächen auf Ihrer Homepage anders aussehen als die Schaltflächen auf Ihrer Zielseite oder dass in Ihrem Blog eine andere Website-Typografie verwendet wird als an allen anderen Stellen auf Ihrer Site – und so weiter. Die Verwendung von Bootstrap und seinen Standardeinstellungen, Dienstprogrammklassen und Komponentenelementen kann dazu beitragen, dass das Frontend Ihrer Site konsistent aussieht.
5. Sie möchten Teil einer Community sein.
Da Bootstrap Open Source ist, gibt es eine globale Community aus Entwicklern und Designern, die sich der Unterstützung des Frameworks widmen. Diese Entwickler und Designer ändern und verbessern die Codebasis von Bootstrap auf GitHub . Sie beantworten auch Fragen auf Twitter , Stack Overflow und in einem speziellen Slack-Raum . Wenn Sie Bootstrap verwenden, können Sie diese aktive Community nutzen, um ein besserer Bootstrap-Benutzer zu werden.
Wann Sie Bootstrap nicht verwenden sollten
Obwohl die Verwendung dieses CSS-Frameworks viele Vorteile bietet, gibt es auch einige Gründe, Bootstrap nicht zu verwenden. Sehen wir uns diese Gründe unten genauer an.
1. Sie möchten eine einzigartige Website.
Da Bootstrap mit vorformatierten Inhalten, Komponenten und Vorlagen geliefert wird, sehen Bootstrap-Sites standardmäßig meist gleich aus. Tatsächlich wird Bootstrap dafür verantwortlich gemacht, dass Websites heute alle gleich aussehen .
Sie können eine Bootstrap-Site anpassen, aber das wird einige Zeit in Anspruch nehmen. Und wenn Sie zu viele Standard-Stile überschreiben müssen, ist es vielleicht sinnvoller, zunächst Ihr eigenes Stylesheet zu erstellen.
2. Sie möchten ein Thema.
Das Bootstrap-Framework ist kein Theme, obwohl es Bootstrap-Themes gibt. Vergleichen wir das Framework beispielsweise mit einem WordPress-Theme .
Wenn Sie ein WordPress-Theme installieren und aktivieren , ändert sich das Erscheinungsbild Ihrer gesamten Site. Wenn Sie das Bootstrap-Framework herunterladen, ändern sich Aspekte des Erscheinungsbilds Ihrer Site automatisch, beispielsweise die Typografie. Sie müssen jedoch noch das HTML schreiben und die voreingestellten Layouts, Farben und Komponenten einfügen, die Sie zum Erstellen Ihrer Website benötigen.
3. Sie möchten eine Site, die schnell lädt.
Bootstrap kann sich negativ auf die Geschwindigkeit Ihrer Website auswirken. Warum? Weil es schwer ist – nicht genau in Bezug auf die KB, sondern in Bezug darauf, wie viel der durchschnittliche Benutzer nicht nutzt .
Bootstrap ist kleiner als 500 KB. Sie können auch mehrere Schritte unternehmen, um dieses Gewicht zu reduzieren und die Auswirkungen auf die Ladezeit zu verringern. Sie können beispielsweise die minimierten CSS- und JavaScript-Dateien verwenden oder nur die CSS-Dateien herunterladen, nicht die JavaScript-Dateien.
Aber selbst mit diesen Schritten kann Bootstrap für Ihre Anforderungen immer noch zu schwer sein. Die meisten Benutzer benötigen nicht alle Komponenten, Dienstprogramme und Plugins, die mit Bootstrap geliefert werden. Daher können diese Ihre Site belasten, auch wenn sie nicht verwendet werden.
4. Sie haben keine Zeit, die Bootstrap-Dokumentation zu lernen und durchzulesen.
Bootstrap gilt als benutzerfreundliche Plattform. Es bietet umfassende Dokumentation für jeden Teil seines Frameworks, vom Layout über den Inhalt bis hin zu den Komponenten und mehr. Das bedeutet, dass praktisch jeder Bootstrap lernen kann – es bedeutet aber auch, dass es Zeit braucht, die Dokumentation durchzulesen und das Framework zu lernen. Wenn Sie so schnell wie möglich eine Website erstellen möchten, ist Bootstrap möglicherweise nicht so ideal wie andere Lösungen, z. B. Website-Builder .
5. Sie möchten HTML und CSS beherrschen.
Die Verwendung der vorgefertigten Komponenten und Vorlagen, die Bootstrap bietet, macht das Erstellen einer Website viel einfacher und schneller – kann aber auch Ihre Entwicklung als Programmierer behindern. Das Erstellen mit Bootstrap ist wie das Verwenden eines Taschenrechners zum Berechnen von Algebra: Sie können das gewünschte Ergebnis erhalten, ohne genau zu verstehen, wie Sie es erhalten haben. Deshalb ist es gut, Zeit in das Erstellen Ihrer eigenen benutzerdefinierten Komponenten zu investieren, selbst wenn Sie auch Bootstrap lernen und verwenden.
Nachdem wir nun wissen, was Bootstrap-CSS ist und wer es verwenden sollte, besprechen wir kurz die verschiedenen Download-Optionen, die Ihnen zur Verfügung stehen.
So laden Sie Bootstrap CSS herunter
Bevor wir den Vorgang des Herunterladens von Bootstrap durchgehen, ist es wichtig zu wissen, dass Sie Bootstrap auch remote über BootstrapCDN oder jsDelivr laden können , anstatt es herunterzuladen. Dies erfordert allerdings, dass Besucher über eine Internetverbindung verfügen, um Ihre Site zu besuchen, und Sie müssen mehr Code posten. Aus diesem Grund ist das Herunterladen von Bootstrap die beliebtere Wahl.
Es stehen zwei verschiedene Formen von Bootstrap zum Download zur Verfügung . Jede Version – eine vorkompilierte und eine Quellcode-Version – spricht unterschiedliche Benutzer an, je nachdem, ob ihnen Benutzerfreundlichkeit oder Flexibilität wichtiger ist. Sehen wir uns die einzelnen Versionen unten genauer an.
Vorkompilierter Bootstrap
Die vorkompilierte Version ist die einfachste Form von Bootstrap. Sie laden vorkompilierte CSS- und JS-Dateien sowie minimierte CSS- und JS-Dateien herunter, die sich problemlos in nahezu jedes Webprojekt einfügen lassen.
Nach dem Download entpacken Sie den komprimierten Ordner und sehen die folgende Struktur.
Bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map
Die kompilierte Version ist einfacher und schneller zu verwenden als die Quellcodeversion, lässt sich aber schwieriger anpassen . Jede Änderung, die Sie an einem vorformatierten Element oder Layout vornehmen möchten, muss mit einer Überschreibung der aktuellen Stile angewendet werden.
Wenn Sie die in Bootstrap enthaltenen CSS- und JS-Dateien nach Ihren Wünschen anpassen möchten, laden Sie am besten die Quellcodeversion herunter.
Bootstrap-Quellcode
Die Quellcodeversion enthält die vorkompilierten CSS-, JS- und Schriftart-Assets sowie Quelldateien für die CSS-, JS- und Symbolschriftarten.
Wenn Sie den Bootstrap-Quellcode herunterladen möchten, entpacken Sie den Ordner und sehen die folgende Struktur.
Bootstrap/
├── Abstand/
│ ├── css/
│ └── js/
├── Seite/
│ └──Dokumente/
│ └── 4.6/
│ └── Beispiele/
├── js/
└── scss/
Der Ordner dist/ enthält alles, was im vorkompilierten Abschnitt oben aufgeführt ist. Der Ordner docs/ enthält den Quellcode für die Bootstrap-Dokumentation und Beispiele für die Bootstrap-Verwendung. Der Ordner js/ enthält den Quellcode für Bootstrap JS und der Ordner scss/ für Bootstrap CSS.
Da diese Version von Bootstrap Autoprefixer und einen SASS-Compiler erfordert , ist der Einrichtungsprozess länger und schwieriger als die Einrichtung der vorkompilierten Version. Nach der Einrichtung können Sie die Dateien jedoch beliebig ändern und anpassen.
Jede Version von Bootstrap eignet sich ideal für unterschiedliche Anwendungsfälle. Da die vorkompilierte Version von Bootstrap jedoch einfacher und schneller zu verwenden ist, konzentrieren wir uns im Rest des Beitrags auf diese Version.
Sehen wir uns unten an, wie Sie mit dem vorkompilierten Bootstrap eine Website erstellen können.
So verwenden Sie Bootstrap-CSS
Um Bootstrap CSS zu verwenden, müssen Sie es in Ihre Entwicklungsumgebung integrieren. Dazu müssen Sie lediglich einen Ordner auf Ihrem Computer erstellen. Speichern Sie in diesem Ordner Ihre kompilierten CSS- und JS-Dateien und eine neue HTML-Datei, in die Sie Bootstrap laden. Anschließend können Sie Bootstrap-Vorlagen verwenden, um der Seite Schnittstellenelemente hinzuzufügen.
Lassen Sie uns diesen Prozess Schritt für Schritt aufschlüsseln.
Bootstrap-CSS und -JS laden
Erstellen Sie zunächst auf Ihrem Computer einen Ordner mit dem Namen „Bootstrap“. Verschieben Sie die kompilierten CSS-Dateien aus Ihrem Bootstrap’s-Download in diesen Ordner. Wenn Sie auch den JS-Teil von Bootstrap verwenden, verschieben Sie die kompilierten JS-Dateien ebenfalls in den Ordner.
Erstellen Sie im selben Ordner eine weitere Datei und nennen Sie sie index.html. Öffnen Sie diese Datei mit einem Texteditor Ihrer Wahl, beispielsweise Notepad++ . Sie können die grundlegende HTML-Vorlage von der offiziellen Bootstrap’s-Site kopieren und in die Datei einfügen oder sie von Grund auf neu programmieren.
Unten sehen Sie ein Beispiel für eine von Grund auf neu codierte HTML-Seite.
Jetzt können Sie Bootstrap’s CSS in Ihr Projekt laden. Fügen Sie einfach die folgende Codezeile in den Header der Datei index.html ein, direkt vor dem Tag </head>.
Wenn Sie nur den CSS-Teil von Bootstrap’s verwenden möchten, sind Sie bereits fertig.
Wenn Sie auch den JS-Teil verwenden möchten, müssen Sie zwei weitere Codezeilen hinzufügen. Komponenten wie Warnungen, Umschaltflächen, Karussells und Dropdown-Menüs erfordern JavaScript, um zu funktionieren. Führen Sie diese Schritte also aus, wenn Sie Ihrer Site eines dieser Elemente hinzufügen möchten.
Zuerst müssen Sie die jQuery-Bibliothek laden. Laden Sie dazu jQuery auf Ihren Computer herunter. Entpacken Sie die Datei und speichern Sie sie zusammen mit den kompilierten CSS- und JS-Dateien und der Datei index.html im Ordner „bootstrap“.
Anschließend fügen Sie die folgende Codezeile in die Datei index.html ein. Dieses Mal fügen Sie sie der Fußzeile und nicht der Kopfzeile direkt nach dem <body>-Tag hinzu.
Um Bootstrap’s JavaScript zu laden, fügen Sie die folgende Codezeile direkt nach dem Aufruf von jQuery hinzu.
Wenn Sie diese Schritte abgeschlossen haben, sollte Ihre Datei index.html folgendermaßen aussehen:
Sobald Sie den Ordner gespeichert haben, verfügen Sie über ein grundlegendes Bootstrap’s-Layout, das folgendermaßen aussieht:
Dies kann jetzt als Homepage Ihrer Site fungieren.
Erstellen einer Basisvorlage
Um mit dem Aufbau dieser Seite fortzufahren, können Sie eine Navigationsleiste, Kopfzeile, Fußzeile, Glyphicon-Schriftart, Favicon und andere Schnittstellenkomponenten hinzufügen. Lassen Sie uns Schritt für Schritt durch das Hinzufügen einer Komponente – einer Navigationsleiste – gehen, damit Sie verstehen, wie Sie Bootstrap’s verwenden.
Angenommen, Sie möchten der Homepage eine Bootstrap’s-Navigationsleiste hinzufügen , die ungefähr so aussieht:
Jetzt kann ein Interessent auf Ihre Homepage gelangen und sofort mehr über Ihr Unternehmen, die Funktionen Ihres Produkts und Ihre Preise erfahren – oder er kann nach etwas anderem suchen.
Unten finden Sie den Code für dieses Navbar-Beispiel.
Lassen Sie uns diesen Snippet in seine unterstützten Unterkomponenten aufteilen: Farbschema, Marke, Umschalter, Navigation und Formular.
Farbschema
Schauen Sie sich die erste Codezeile genauer an. Sehen Sie navbar-dark bg-dark ? Das erfordert eine dunkle Hintergrundfarbe. Wenn Sie ein helles Farbschema bevorzugen, ersetzen Sie es durch navbar-light bg-light. Es wird ungefähr so aussehen:
Oder Sie wählen eine der anderen Standardfarben .
Marke
In der zweiten Codezeile finden Sie navbar-brand ? Dies bezeichnet den Namen Ihres Unternehmens, Produkts oder Projekts. Ersetzen Sie einfach „Navbar“ vor dem Tag </a> durch den richtigen Namen.
Umschalter
Als Nächstes sehen Sie einen großen Codeblock, der den Umschaltknopf bezeichnet. Dieser Knopf ist auf dem Desktop ausgeblendet. Er wird nur auf Mobilgeräten angezeigt, wenn der Inhalt der Navigationsleiste reduziert werden muss, um auf den kleineren Bildschirm zu passen.
Im obigen Code ist der Navbar-Toggler -Stil so definiert, dass der Markenname auf der linken Seite des mobilen Bildschirms und der Umschaltknopf auf der rechten Seite angezeigt wird. Wenn Sie auf den Knopf klicken, wird der reduzierte Inhalt angezeigt, wie unten dargestellt.
Navigation
Im nächsten Code-Abschnitt finden Sie navbar-nav ? Mit dieser Unterkomponente können Sie Links in Ihre Navigationsleiste einfügen. Sie müssen nur die entsprechende Modifikatorklasse ( nav-link ) um das Wort wickeln, das Sie als Hyperlink verwenden möchten.
Bilden
Sie können Ihrer Navigationsleiste mit der Unterkomponente „form-inline“ auch ein Formular, z. B. ein Suchfeld, hinzufügen . Sie können diesen Code unten in der Vorlage oben sehen.
Nachdem Sie nun wissen, wie Sie Bootstraps responsiven Navigationsheader mit Branding, Navigation und mehr ergänzen, können Sie mit einem ähnlichen Verfahren weitere Elemente zur Seite hinzufügen. Sehen wir uns unten einige davon an.
Bootstrap’s-CSS-Beispiele
Bootstrap’s bietet HTML- und CSS-Vorlagen oder „Beispiele“, mit denen Sie schnell mit dem Erstellen Ihrer Site beginnen können. Während Bootstrap’s Source Code fortgeschrittenere Beispiele mit benutzerdefinierten Komponenten und Layouts enthält, die das Framework ergänzen, konzentrieren wir uns auf Beispiele, die integrierte Komponenten verwenden, die sowohl in der vorkompilierten als auch in der Quellcode-Version verfügbar sind.
Wir haben oben bereits einige Beispiele angesprochen, darunter die Navigationsleiste. Im Folgenden werden wir uns einige weitere Beispiele genauer ansehen.
Bootstrap’s-Raster
CSS-Rastersysteme werden zum Erstellen von Seitenlayouts durch eine Reihe von Zeilen und Spalten verwendet, die Inhalte enthalten. Im Bootstrap’s-Rastersystem müssen Zeilen für eine korrekte Positionierung und Polsterung in einem .container (feste Breite) oder .container-fluid (volle Breite) platziert werden . Diese Zeilen werden zum Erstellen horizontaler Spaltengruppen verwendet.
Da Bootstrap’s ein 12-Spalten-System ist, müssen Sie die Anzahl der zwölf verfügbaren Spalten angeben, die Sie überspannen möchten. Angenommen, Sie möchten drei gleich breite Spalten erstellen, die auf allen Geräten unabhängig von der Größe zentriert auf der Seite angeordnet sind. Dann benötigen Sie drei „Vier-von-Zwölf“-Spalten, wie sie durch die Klasse .col-4 dargestellt werden. Unten sehen Sie das vollständige Rasterbeispiel.
Auf der Front-End-Seite Ihrer Site würde es auf Mobilgeräten und Desktops so aussehen.
Was aber, wenn das Raster auf dem Desktop auf eine Art und Weise und auf dem Handy auf eine andere Art und Weise angezeigt werden soll? Angenommen, Sie möchten, dass die Spalten auf dem Desktop nebeneinander und auf dem Handy übereinander angezeigt werden.
Anschließend können Sie die Breite der Spalten mit dem Präfix für „klein“ angeben. Dadurch wären die Spalten bis zum kleinen Haltepunkt (576px) 100 % breit. Unten sehen Sie das vollständige Rasterbeispiel.
Das folgende Video zeigt, wie es auf dem Desktop aussehen würde und wie es sich dann auf dem Handy ändert.
Es gibt noch viele weitere Optionen, mit denen Sie herumexperimentieren können. Mit dem Rastersystem von Bootstrap’s können Sie gleich breite Spalten erstellen, die sich über mehrere Zeilen erstrecken. Sie können die Breite einer Spalte festlegen und die Größe der Geschwisterspalten automatisch darum herum anpassen. Sie können die Größe der Spalten basierend auf der natürlichen Breite ihres Inhalts festlegen – und vieles mehr.
Bootstrap’s-Warnungen
Sie können Ihrer Bootstrap’s-Site Warnmeldungen hinzufügen, um Ihren Besuchern wichtige Nachrichten bereitzustellen. Bootstrap’s bietet acht Standardfarben für Warnmeldungen. Angenommen, Sie möchten eine Warnmeldung hinzufügen, um anzuzeigen, dass ein Besucher beispielsweise erfolgreich ein Konto erstellt hat. Dann können Sie das folgende Beispiel verwenden.
So sieht es auf der Front-End-Seite Ihrer Site aus.
Wenn Sie das kompilierte JS auf Ihre Site geladen haben, können Sie auch eine Schaltfläche zum Schließen hinzufügen , damit Besucher die Warnung schließen können, nachdem sie sie gelesen haben.
Bootstrap’s-Schaltflächen
Mit Bootstrap’s können Sie aus mehreren vordefinierten Schaltflächenstilen wählen, um schnell Schaltflächen zu Zielseiten oder Formularen auf Ihrer Bootstrap’s-Site hinzuzufügen . Angenommen, Sie möchten Ihrer Site eine „Info“-Schaltfläche hinzufügen. Unten sehen Sie das Beispiel und wie es auf der Frontend-Seite aussehen würde.
Obwohl die .btn-Klassen für die Verwendung mit dem <button>-Element konzipiert sind, können Sie sie auch für andere Elemente verwenden. Wenn Sie beispielsweise einen Link in eine Schaltfläche umwandeln möchten, können Sie den folgenden Code verwenden:
Nehmen wir an, ich möchte meiner Bootstrap’s-Site eine Schaltfläche hinzufügen, die Besucher dazu auffordert, mehr über CSS-Animationen zu erfahren . Dann könnte ich die Schaltfläche mit einem Blogbeitrag zu diesem Thema verknüpfen. Hier wäre der Code:
Und so würde es auf der Site funktionieren:
Sie können die Farbe, Größe und andere Aspekte Ihrer Schaltfläche ändern, indem Sie die entsprechenden Modifikatorklassen hinzufügen.
Bootstrap’s-Karussells
Ein Karussell ist eine Diashow zur Präsentation einer Reihe von Inhalten, seien es Bilder, Text oder benutzerdefiniertes Markup. Im Webdesign können Sie ein reines CSS-Karussell ohne JavaScript erstellen – oder Sie können Bootstrap’s verwenden, um eines zu erstellen. In Bootstrap’s werden Karusselle mit CSS-3D-Transformationen und etwas JavaScript erstellt. Die Verwendung eines Bootstrap’s-Beispiels wie dem folgenden kann den Codierungsprozess erheblich beschleunigen.
Dieses Beispiel ist ein Karussell nur mit Folien und den Steuerelementen „Zurück“ und „Weiter“.
So würde es auf der Frontend-Seite Ihrer Site aussehen:
Wenn Sie mit dem Layout Ihrer Webseite zufrieden sind, möchten Sie möglicherweise das Erscheinungsbild dieser und anderer Bootstrap’s-Komponenten anpassen, indem Sie deren Farben, Schriftgröße , Rahmen oder andere vorhandene Bootstrap’s-Stile ändern. Dazu können Sie die vorhandenen Stile überschreiben. Sehen wir uns unten an, wie das geht.
So überschreiben Sie Bootstrap’s-CSS
Das Ändern des Standard-Stils von Bootstrap’s CSS ist ganz einfach. Erstellen Sie mit Ihrem Texteditor eine Datei und nennen Sie sie main.css. Fügen Sie hier alle gewünschten benutzerdefinierten CSS-Änderungen hinzu. Wenn Sie fertig sind, speichern Sie diese Datei im selben Ordner wie Ihre Bootstrap’s CSS- und JS-Dateien und die Datei index.html. Anschließend müssen Sie nur noch eine Codezeile zum Header Ihrer Datei index.html hinzufügen.
Erinnern Sie sich, wie Sie die folgende Codezeile in den Header der Datei index.html eingefügt haben, um Bootstrap’s-CSS auf Ihrer Site zu laden?
Fügen Sie direkt darunter den folgenden Code ein:
Dadurch wird sichergestellt, dass das von Ihnen in der Datei custom.css hinzugefügte CSS die Standardstile in der Datei index.html überschreibt.
Die Struktur Ihrer Datei index.html sollte jetzt folgendermaßen aussehen:
Es ist wichtig zu beachten, dass dieser Vorgang zum Überschreiben der Standard-CSS-Stile sowohl für die vorkompilierte Version von Bootstrap’s als auch für die Quellcodeversion funktionieren kann. Mit letzterer können Sie jedoch auch den Bootstrap’s-SASS-Quellcode direkt bearbeiten, wenn Sie Erfahrung mit SASS haben.
Da viele Benutzer SASS nicht kennen, sehen wir uns ein Beispiel zum Bearbeiten des vorkompilierten Bootstrap an.
Mehr lesen: Die 13 besten kostenpflichtigen und kostenlosen Alternativen zu Adobe Illustrator im Jahr 2024
Wir beginnen mit einem einfachen Layout, das von der Entwicklerin und technischen Redakteurin Tania Rascia erstellt wurde . Sie baute auf der grundlegenden HTML-Vorlage von Bootstrap’s auf und fügte mithilfe der im Framework enthaltenen Vorlagen eine Navigationsleiste, eine Jumbotron-Kopfzeile, ein Raster und Glyphicons hinzu. Das Ergebnis wird unten angezeigt.
Die Seite ist übersichtlich, reaktionsschnell und browserübergreifend, aber eher schlicht. Um das Design zu personalisieren, hat Rascia der Datei custom.css benutzerdefiniertes CSS hinzugefügt. Durch die Verwendung von CSS-Selektoren konnte sie den HTML-Elementen auf ihrer Seite einzigartige Stileigenschaften zuweisen.
Zuerst wollte sie den Leerraum zwischen der Navigationsleiste und der Jumbotron-Überschrift entfernen. Daher fügte sie der Datei mithilfe des Klassenselektors „navbar“ den folgenden Code hinzu.
Sie wollte außerdem die Farbe des Jumbotrons in Grün und die Schriftfarbe in Weiß ändern und den Text zentrieren. Sie fügte daher der Datei den folgenden Code hinzu und verwendete dabei den Klassenselektor „Jumbotron“.
Sie hat auch mehrere andere Änderungen vorgenommen. Anstatt sie einzeln durchzugehen, kopiere ich einfach den Inhalt ihrer Datei custom.css unten und füge ihn ein. Sie werden feststellen, dass eine Mischung aus Typ- und Klassenselektoren verwendet wird.
Mit diesen Änderungen hat sie ihre Bootstrap-Website komplett umgestaltet. Schauen Sie unten nach.
Durch die Verwendung von CSS-Overrides sind die Anpassungsoptionen mit Bootstrap praktisch unbegrenzt. Sie können die Bootstrap Expo durchsuchen , um einen Blick auf einige der kreativsten Einsatzmöglichkeiten von Bootstrap zu werfen.
Erstellen Ihrer responsiven Site
Bootstrap ist ein leistungsstarkes Front-End-Framework zum Erstellen und Anpassen einer mobilfreundlichen Website. Mit Bootstrap müssen Sie nicht bei Null anfangen und müssen auch nicht die Kontrolle über das Erscheinungsbild Ihrer Website aufgeben. Entdecken Sie dieses Framework jetzt und sehen Sie, was es alles kann.