Die 10 häufigsten Bootstrap-Fehler, die Entwickler machen

Auf den ersten Blick scheint Bootstrap recht einfach zu sein. Und in der Tat ist es nicht schwierig, mit Bootstrap zu beginnen. Es gibt eine sehr gut geschriebene Bootstrap-Dokumentation mit vielen HTML-, CSS- und JavaScript-Codebeispielen. Die meisten wichtigen Fallstricke werden dort erwähnt, aber einige Fehler sind immer noch ziemlich subtil oder haben mehrdeutige Ursachen. Da Bootstrap sehr einfach und leicht zu bedienen aussieht, stürzen sich viele Entwickler in das Framework, und so passieren Fehler.

Wir werden uns 10 der häufigsten Fehler, Probleme und Missverständnisse von Bootstrap ansehen, wenn Entwickler damit beginnen.

Häufiger Bootstrap-Fehler Nr. 1: Grundlegende Missverständnisse über das Framework

Es gibt einige grundlegende Missverständnisse über das Bootstrap-Framework, die die Leute haben. Dies kann daran liegen, dass es auf der Bootstrap-Site nicht deutlich beworben wird oder dass sich die Leute nicht genug Zeit nehmen, um die Dokumentation zu lesen. Tatsache ist, dass Entwickler manchmal in der Ecke landen, wenn sie etwas falsch machen, und dann dem Framework die Schuld geben. Lassen Sie uns also einige grundlegende Fakten klarstellen.

Bootstrap ist umfassend, aber weder riesig noch enorm. Bootstrap wird mit grundlegenden HTML- und CSS-Designvorlagen geliefert, die viele gängige UI-Komponenten enthalten. Dazu gehören Typografie, Tabellen, Formulare, Schaltflächen, Glyphicons, Dropdowns, Schaltflächen und Eingabegruppen, Navigation, Paginierung, Beschriftungen und Abzeichen, Benachrichtigungen, Fortschrittsbalken, Modale, Registerkarten, Akkordeons, Karussells und vieles mehr. Sie können einige davon auswählen und auswählen und mit ihrer Standardkonfiguration schnell eine Benutzeroberfläche generieren, die mehrere Browser, Geräte und Auflösungen mit einem schönen Format verarbeitet.

Bootstrap wird nicht alles für Sie erledigen, aber es bietet eine Reihe vernünftiger Standardeinstellungen zur Auswahl und hilft Entwicklern, sich mehr auf die Entwicklungsarbeit zu konzentrieren, als sich um das Design zu kümmern, und hilft ihnen, schnell eine gut aussehende Website zum Laufen zu bringen. Es ermöglicht schnelles Prototyping, schränkt Entwickler dabei aber nicht ein.

Es ist so erweiterbar, dass jeder es an seine Bedürfnisse anpassen kann. Am Anfang hatte Bootstrap einige Einschränkungen, und damals war es kompliziert, Standardstile zu erweitern. Aber als das Framework ausgereift war, verbesserte sich auch die Erweiterbarkeit.

Häufiger Bootstrap-Fehler Nr. 2: Zu denken, dass Sie keine CSS-Kenntnisse benötigen, um Bootstrap zu verwenden, und dass Sie keinen Designer brauchen

Wenn Sie denken, dass Sie bei der Verwendung von Bootstrap keine CSS-Kenntnisse benötigen, liegen Sie falsch. Jeder Frontend-Entwickler muss CSS und HTML5 lernen. Bootstrap entfernt viele knifflige CSS-Teile von den Schultern der Entwickler (wie herstellerspezifische Präfixe) und bietet grundlegendes Standard-Styling, aber Sie müssen immer noch CSS verstehen. Sie müssen nicht wissen, wie Medienabfragen funktionieren, aber Sie müssen verstehen, wie responsives Design funktioniert. Bootstrap ist nicht dazu gedacht, Ihnen CSS beizubringen, aber es kann Ihnen helfen, wenn Sie möchten. Die Untersuchung des Quellcodes in LESS oder SASS ist ein guter Ausgangspunkt.

Bei einem ähnlichen Thema müssen Sie kein Designer sein, und Sie können argumentieren, dass Sie mit Bootstrap keinen Designer brauchen. Verwenden Sie jedoch nach Möglichkeit die Hilfe eines Designers. Eine häufige Beschwerde gegen Bootstrap ist, dass alle Bootstrap-Sites gleich aussehen und es leicht ist, eine Website zu erhalten, die genauso aussieht wie jede andere Bootstrap-Site. Aber das muss nicht wahr sein. Millionen von Websites im Internet werden mit Bootstrap erstellt. Auf der Bootstrap Expo, die Websites sammelt, die mit Bootstrap erstellt wurden, finden Sie großartige Beispiele dafür, wie verschiedene Designs erzielt werden können. Schauen Sie sich um, lassen Sie sich inspirieren und bauen Sie Ihre eigene Designvariation.

Häufiger Bootstrap-Fehler Nr. 3: Ändern der Bootstrap-CSS-Datei

Um es klar und einfach zu machen: Ändern Sie die Datei bootstrap.css nicht .

Wenn Sie Änderungen an der Datei bootstrap.css vornehmen, werden die Dinge sehr schnell kompliziert. Das gesamte Design bricht zusammen, wenn Sie Bootstrap-Dateien aktualisieren möchten. Sie können in Ihrem eigenen Stylesheet Standard-Bootstrap-Farben, -Stile, -Ränder, -Auffüllungen, alles überschreiben. Es besteht keine Notwendigkeit, das Stylesheet bootstrap.css überhaupt anzufassen.

Du kennst LESS oder SASS nicht? Kein Problem, Sie können Ihre eigene CSS-Datei erstellen und das Original-Stylesheet bootstrap.css nach Belieben überschreiben. Genau wie wir im vorherigen Fehler erwähnt haben, ist die Kenntnis von CSS obligatorisch. Erstellen Sie Ihren neuen CSS-Selektor, verwenden Sie ihn im HTML-Code, und solange Sie Ihre CSS-Klassen nach Bootstrap-Stilen deklarieren, überschreiben Ihre Definitionen die Bootstrap-Standardwerte.

Möchten Sie immer noch mehr wissen und tiefer eintauchen? Ich empfehle und ermutige Sie dringend, dies zu tun. Verwenden Sie den Bootstrap-LESS-Quellcode. Sie werden besser verstehen, was los ist und wo was ist, wenn Sie die LESS-Quelle und nicht statisches CSS verwenden.

Häufiger Bootstrap-Fehler Nr. 4: Verwenden Sie alles, was Bootstrap bietet

Wie bereits erwähnt, ist Bootstrap umfassend. Es bietet viele UI-Komponenten, HTML- und CSS-Designvorlagen und JavaScript-Plugins. Aber seien Sie bitte wählerisch. Sie müssen nicht alle Funktionen von Bootstrap verwenden.

Dies gilt insbesondere für Plugins. Wählen Sie nur Plugins aus, die sinnvoll sind, und verwenden Sie nicht alles, weil es schön und cool aussieht. Ihre Website kann leicht übertrieben werden. Bedenken Sie zunächst, dass Sie die Datei bootstrap.js überhaupt nicht einschließen, und erstellen Sie eine Website, die nur einfaches HTML und CSS verwendet. Und dann fügen Sie Komponenten nur nach Bedarf für bestimmte Rollen hinzu, eine nach der anderen.

Häufiger Bootstrap-Fehler Nr. 5: Missbrauch einer modalen Eingabeaufforderung

Bootstrap-Modals bieten flexible Dialogaufforderungen mit der erforderlichen Mindestfunktionalität und intelligenten Standardeinstellungen. Obwohl Modal einfach zu verwenden ist und eine umfassende Anpassung bietet, müssen wir einige Dinge beachten, um häufigen Missbrauch zu vermeiden.

Gleichzeitiges Anzeigen von mehr als einer modalen Eingabeaufforderung

Bootstrap unterstützt keine überlappenden Modale. Es kann immer nur ein Modal sichtbar sein. Es ist möglich, mehr als ein Modal gleichzeitig anzuzeigen, aber es muss benutzerdefinierter Code geschrieben werden, um dies richtig zu handhaben.

Das Bootstrap-Modal wird im Hintergrund angezeigt

Wenn der modale Container oder sein übergeordnetes Element eine feste oder relative Position hat, wird das Modal nicht richtig angezeigt. Stellen Sie immer sicher, dass auf den modalen Container und seine übergeordneten Elemente keine spezielle Positionierung angewendet wird. Die beste Vorgehensweise besteht darin, den HTML-Code eines Modals direkt vor dem schließenden </body> -Tag oder noch besser an einer Position auf oberster Ebene im Dokument direkt nach dem öffnenden <body> -Tag zu platzieren. Dies ist der beste Weg, um zu vermeiden, dass andere Komponenten das Aussehen und die Funktionalität des Modals beeinflussen.

Modal auf den mobilen Geräten

Es gibt einige Einschränkungen, die Entwickler beachten müssen, wenn sie mit Modals auf Mobilgeräten mit virtuellen Tastaturen umgehen. Dies gilt insbesondere für iOS-Geräte, bei denen ein Rendering-Fehler vorhanden ist, der die Position fester Elemente nicht aktualisiert, wenn die virtuelle Tastatur ausgelöst wird. Dies wird nicht von Bootstrap behandelt, daher ist es Sache des Entwicklers, diese Situationen im Code für die betreffende Anwendung optimal zu behandeln.

Häufiger Bootstrap-Fehler Nr. 6: Problem mit der Komponente der Dateieingabeschaltfläche

Bootstrap hat keine bestimmte Komponente für eine Datei-Upload-Schaltfläche. Eine einfache und elegante Lösung, die nur HTML und CSS verwendet, kann mit dem folgenden Beispielcode erreicht werden:

 <span class="btn btn-default btn-file"> Browse <input type="file"> </span>

 .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }

Es gibt viele Beispiele dafür, wie man einen ähnlichen Effekt erzielt. Dieses Codebeispiel ist von Cory LaViska ausgeliehen, und auf seiner Website können Sie eine ausführlichere Erklärung dieses Problems lesen. Es gibt auch ein erweitertes Beispiel mit mehr Funktionalität, das zusätzlichen JavaScript-Code verwendet.

Häufiger Bootstrap-Fehler Nr. 7: Übermäßige Komplizierung mit JavaScript und Ignorieren von „Daten“-Attributen

Designer oder einfach unerfahrene JavaScript-Entwickler können sehr einfach in die Webentwicklung eintauchen und Webseiten nur mit HTML, CSS und Bootstrap erstellen. Wenn sie nicht sehr gut im Programmieren sind, können sie in die Falle tappen, JavaScript zu missbrauchen oder einfach zu kompliziert zu machen. Es ist wichtig festzuhalten, dass alle Bootstrap-Plug-ins rein über die Markup-API verwendet werden können, ohne eine einzige Zeile JavaScript zu schreiben. Dies ist die erstklassige API von Bootstrap und sollte Ihre erste Überlegung bei der Verwendung von Plugins sein.

Beispielsweise können wir einen modalen Dialog aktivieren, ohne JavaScript zu schreiben, indem wir einfach data-toggle="modal" auf ein Controller-Element wie eine Schaltfläche oder einen Anker setzen und zusätzliche Parameter mit data- -Attributen übergeben. Im folgenden Code zielen wir auf HTML-Code mit der ID #myModal . Wir haben angegeben, dass das Modal nicht geschlossen wird, wenn der Benutzer außerhalb des Modals klickt, indem wir die data-backdrop Tastenereignis deaktiviert, das ein Modal mit der data-keyboard schließt. Alles in einer HTML-Codezeile:

 <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

Häufiger Bootstrap-Fehler Nr. 8: Ignorieren von Tools, die die Bootstrap-Entwicklung erleichtern

Fehler passieren, und jeder Entwickler macht sie gelegentlich. Dies ist unvermeidlich, aber es kommt darauf an, wie Sie mit dem Fehler umgehen. Das Bootstrap-Team hat beim Beobachten des Issue-Trackers festgestellt, dass die Leute einige Fehler häufiger machen. Deshalb versuchten sie, den Entwicklungsprozess zu automatisieren. Das Ergebnis ist Bootlint, ein HTML-Linting-Tool für Bootstrap-Projekte. Bootlint kann entweder im Browser oder über Node.js von der Befehlszeile aus verwendet werden und überprüft Bootstrapped-Webseiten automatisch auf viele häufige Bootstrap-Nutzungsfehler. Das Hinzufügen von Bootlint zu Ihrer Webentwicklungs-Toolchain kann viele häufige Fehler beseitigen, die normalerweise die Entwicklung eines Projekts verlangsamen.

Falls Sie zum Bootstrap-Projekt beitragen möchten, lohnt es sich, Rorschach zu überprüfen. Rorschach ist ein Bootstrap-Pull-Request-Sanity-Checker-Bot, der bei jedem neuen Pull-Request einige Prüfungen durchführt. Wenn eine Plausibilitätsprüfung fehlschlägt, hinterlässt sie einen informativen Kommentar zur Pull-Anfrage, in dem der Fehler erklärt wird und wie er behoben werden kann, und schließt dann die Pull-Anfrage.

Häufiger Bootstrap-Fehler Nr. 9: Inkompatibilitätsprobleme mit IE8 und älteren Browsern

Bootstrap wurde entwickelt, um in den neuesten Desktop- und mobilen Browsern optimal zu funktionieren. Ältere Browser können Komponenten und Elemente anders gestaltet darstellen, aber alles sollte voll funktionsfähig sein. Die Unterstützung umfasst Internet Explorer 8 und 9, mit einem wichtigen Hinweis, dass einige CSS3-Eigenschaften und HTML5-Elemente von diesen Browsern nicht vollständig unterstützt werden.

Um volle Unterstützung für Internet Explorer 8 und andere ältere Browser zu erhalten, müssen Sie ein Polyfill für CSS3 Media Queries Respond.js, ein HTML 5-Shim, das die Verwendung von HTML5-Elementen ermöglicht, und ein geeignetes IE- <meta> -Tag im HTML-Kopf verwenden Stellen Sie sicher, dass IE nicht im Kompatibilitätsmodus ausgeführt wird. Ihr HTML-Kopf sollte am Ende etwa so aussehen:

 <head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>

Beachten Sie im Fall von Respond.js die folgenden Einschränkungen in den Entwicklungs- und Produktionsumgebungen.

Häufiger Bootstrap-Fehler Nr. 10: Best Practices ignorieren

Eine der häufigsten Fragen zum Stack Overflow ist, wie man das Drop-down-Menü des Bootstraps-Menüs so gestaltet, dass es beim Hover und nicht beim Klicken geöffnet wird. Obwohl die Lösung dieser Frage nicht kompliziert ist und nur mit CSS erfolgen kann, wird sie nicht empfohlen. Diese Funktion wurde absichtlich aus dem Framework herausgelassen, und dies ist eine Designentscheidung, die vom Entwicklungsteam getroffen wurde. Auch hier ist es möglich, aber man muss die Auswirkungen verstehen und verstehen, dass es Best Practices gibt, insbesondere für Mobile-First-Frameworks. Der Grund für dieses spezielle Problem ist, dass es Benutzern mit Touch-Geräten nicht hilft, Dinge per Hover zum Laufen zu bringen. Auf solchen Geräten gibt es kein Hover, nur Touch-Events. Daher funktioniert dies auf allen Touch-fähigen Geräten nicht richtig.

Fazit zu Bootstrap-Fehlern

Ich hoffe, dieser kurze Bootstrap-Leitfaden hilft Ihnen, einige der häufigsten Fehler zu vermeiden, übliche Missverständnisse zu beseitigen und Ihnen zu helfen, das meiste aus dem Framework herauszuholen. Denken Sie daran, dass Bootstrap nicht jedermanns Sache und auch nicht für jedes Projekt geeignet ist. Bei der Auswahl eines Frameworks müssen Sie sich etwas Zeit nehmen, um die Dokumentation zu lesen, und Sie müssen einige Zeit damit verbringen, mit dem Framework zu spielen, um ein besseres Gefühl und ein besseres Bild davon zu bekommen, wie es funktioniert. Dies gilt auch für Bootstrap.

Lesen Sie die Dokumentation, spielen und experimentieren Sie mit den Beispielen, machen Sie die Grundlagen richtig und genießen Sie es, neue und schöne Designs zu erstellen.