Auf den ersten Blick, Bootstrap scheint ganz einfach zu sein . In der Tat ist es nicht schwierig, Bootstrap zu verwenden. Es ist eine sehr gut geschrieben Bootstrap-Dokumentation mit vielen HTML-, CSS- und JavaScript-Codebeispielen. Die meisten wichtigen Fallstricke werden dort erwähnt, aber dennoch sind einige Fehler ziemlich subtil oder haben mehrdeutige Ursachen. Da Bootstrap sehr einfach und benutzerfreundlich aussieht, stürzen sich viele Entwickler in das Framework, sodass Fehler auftreten.

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

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

Es gibt einige grundlegende Missverständnisse über die Bootstrap-Framework dass die Leute haben. Dies kann daran liegen, dass auf der Bootstrap-Website nicht eindeutig Werbung gemacht wird oder dass sich die Benutzer nicht genügend Zeit nehmen, um die Dokumentation zu lesen. Tatsache ist, dass Entwickler manchmal in der Ecke landen und Dinge falsch machen und dann das Framework beschuldigen. Lassen Sie uns also einige grundlegende Fakten klarstellen.

Bootstrap ist umfassend, aber weder riesig noch riesig. Bootstrap wird mit grundlegenden HTML- und CSS-Entwurfsvorlagen 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, Warnungen, Fortschrittsbalken, Modalitäten, Registerkarten, Akkordeons, Karussells und vieles mehr. Sie können einige davon auswählen und auswählen und mit der Standardkonfiguration schnell eine Benutzeroberfläche generieren, die mehrere Browser, Geräte und Auflösungen mit einem schönen Format verarbeitet.

Bootstrap erledigt nicht alles für Sie, bietet jedoch eine Reihe angemessener Standardeinstellungen zur Auswahl und hilft Entwicklern, sich mehr auf die Entwicklungsarbeit zu konzentrieren als sich um das Design zu kümmern, und hilft ihnen, eine gut aussehende Website schnell zum Laufen zu bringen. Es ermöglicht schnelles Prototyping, schränkt Entwickler jedoch 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. Mit zunehmender Reife des Frameworks verbesserte sich jedoch auch die Erweiterbarkeit.

Häufiger Bootstrap-Fehler Nr. 2: Denken Sie, dass Sie kein CSS kennen müssen, um Bootstrap zu verwenden, und dass Sie keinen Designer benötigen

Wenn Sie denken, dass Sie bei Verwendung von Bootstrap kein CSS kennen müssen, liegen Sie sehr falsch. Jeder Front-End-Entwickler muss CSS und HTML5 lernen. Bootstrap entfernt viele knifflige CSS-Teile von den Schultern der Entwickler (z. B. herstellerspezifische Präfixe) und bietet ein grundlegendes Standard-Styling, aber Sie müssen CSS noch verstehen. Sie müssen nicht wissen, wie Medienabfragen funktionieren, aber Sie müssen verstehen, wie Responsive Design funktioniert. Bootstrap soll Ihnen kein CSS beibringen, kann aber helfen, wenn Sie möchten. Das Untersuchen des Quellcodes in LESS oder SASS ist ein guter Ausgangspunkt.

Zu einem ähnlichen Thema müssen Sie kein Designer sein, und Sie können argumentieren, dass Sie keinen Designer mit Bootstrap benötigen. 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 genau wie jede andere Bootstrap-Site aussieht. Dies muss jedoch nicht wahr sein. Millionen von Websites im Internet werden mit Bootstrap erstellt. Auf der Website finden Sie großartige Beispiele dafür, wie unterschiedliche Designs erzielt werden können Bootstrap Expo , die Websites sammelt, die mit Bootstrap erstellt wurden. Schauen Sie sich um, lassen Sie sich inspirieren und beginnen Sie mit der Erstellung Ihrer eigenen Designvariante.

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

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

Wenn Sie Änderungen an bootstrap.css vornehmen Datei, werden die Dinge sehr schnell kompliziert. Das gesamte Design wird beschädigt, wenn Sie Bootstrap-Dateien aktualisieren möchten. Sie können in Ihrem eigenen Stylesheet Standard-Bootstrap-Farben, Stile, Ränder, Auffüllungen usw. überschreiben. Es ist nicht erforderlich, bootstrap.css zu berühren Stylesheet überhaupt.

Sie kennen WENIGER oder SASS nicht? Kein Problem, Sie können Ihre eigene CSS-Datei erstellen und alles, was Sie wollen, aus dem Original bootstrap.css überschreiben Stylesheet. Wie bereits im vorherigen Fehler erwähnt, ist die Kenntnis von CSS obligatorisch. Erstellen Sie Ihren neuen CSS-Selektor, verwenden Sie ihn im HTML-Code. Solange Sie Ihre CSS-Klassen nach Bootstrap-Stilen deklarieren, überschreiben Ihre Definitionen die Bootstrap-Standardeinstellungen.

Möchten Sie noch mehr wissen und tiefer tauchen? Ich empfehle und empfehle Ihnen dringend, dies zu tun. Verwenden Sie den Quellcode Bootstrap LESS. Sie werden besser verstehen, was los ist und wo was ist, wenn Sie die WENIGER 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 sowie JavaScript-Plugins. Aber bitte seien Sie wählerisch. Sie müssen nicht alle Funktionen von Bootstrap verwenden.

Dies gilt insbesondere für Plugins. Wählen Sie nur Plugins aus, die Sinn machen, und verwenden Sie nicht alles, weil es schön und cool aussieht. Ihre Website kann leicht übertrieben werden. Betrachten Sie zunächst, dass Sie bootstrap.js nicht einschließen Datei überhaupt, und erstellen Sie eine Website mit nur einfachem HTML und CSS. Fügen Sie dann nacheinander nur Komponenten hinzu, die für bestimmte Rollen erforderlich sind.

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

Bootstrap-Modalitäten bieten flexible Dialogansagen mit der minimal erforderlichen Funktionalität und sind mit intelligenten Standardeinstellungen ausgestattet. Obwohl Modal einfach zu bedienen ist und umfangreiche Anpassungsmöglichkeiten bietet, müssen wir einige Dinge beachten, um häufige Missbräuche zu vermeiden.

Es werden mehr als eine modale Eingabeaufforderung gleichzeitig angezeigt

Bootstrap unterstützt keine überlappenden Modalitäten. Es kann jeweils nur ein Modal sichtbar sein. Es kann erreicht werden, dass mehr als ein Modal gleichzeitig angezeigt wird. Es muss jedoch benutzerdefinierter Code geschrieben werden, um dies ordnungsgemäß zu handhaben.

Das Bootstrap-Modal wird im Hintergrund angezeigt

Wenn der Modalcontainer 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. Am besten platzieren Sie den HTML-Code eines Modals direkt vor dem Closing-Tag oder noch besser an einer obersten Position im Dokument direkt nach dem Openingtag. Dies ist der beste Weg, um zu vermeiden, dass andere Komponenten das Erscheinungsbild und die Funktionalität des Modals beeinträchtigen.

Modal auf den Mobilgeräten

Es gibt einige Einschränkungen, die Entwickler beim Umgang mit Modalitäten beachten müssen mobile Geräte mit virtuellen Tastaturen . Dies gilt insbesondere für iOS-Geräte , wenn ein Rendering-Fehler vorliegt, der die Position fester Elemente beim Auslösen der virtuellen Tastatur nicht aktualisiert. Dies wird von Bootstrap nicht behandelt, daher ist es Sache des Entwicklers, diese Situationen im Code für die betreffende Anwendung bestmöglich zu behandeln.

Häufiger Bootstrap-Fehler Nr. 6: Komponentenproblem der Dateieingabeschaltfläche

Bootstrap verfügt nicht über eine bestimmte Komponente für eine Schaltfläche zum Hochladen von Dateien. Eine einfache und elegante Lösung, die nur HTML und CSS verwendet, kann mit dem folgenden Beispielcode erreicht werden:

Browse .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, wie Sie einen ähnlichen Effekt erzielen können. Dieses Codebeispiel wurde von Cory LaViska ausgeliehen, und auf seiner Website können Sie ein ausführlicheres lesen Erklärung dieses Problems . Es gibt auch ein erweitertes Beispiel mit mehr Funktionen, das zusätzlichen JavaScript-Code verwendet.

Häufiger Bootstrap-Fehler Nr. 7: Überkompliziert mit JavaScript und Ignorieren von Datenattributen

Designer oder nur unerfahrene JavaScript-Entwickler können ganz einfach in die Webentwicklung eintauchen und Webseiten nur mit HTML, CSS und Bootstrap erstellen. Wenn sie nicht sehr gut codieren können, können sie in die Falle geraten, JavaScript zu missbrauchen oder einfach nur zu komplizieren. Es ist wichtig anzugeben, dass alle Bootstrap-Plugins nur über die Markup-API verwendet werden können. ohne Schreiben ein einzelne Zeile von JavaScript. Dies ist die erstklassige API von Bootstrap und sollte Ihre erste Überlegung sein, wenn Sie Plugins verwenden.

Zum Beispiel können wir einen modalen Dialog aktivieren, ohne JavaScript zu schreiben, indem wir einfach data-toggle='modal' setzen auf einem Controller-Element wie einer Schaltfläche oder einem Anker und übergeben Sie zusätzliche Parameter mit data- Attribute. Im folgenden Code zielen wir auf HTML-Code mit der ID #myModal ab. Wir haben angegeben, dass das Modal nicht geschlossen wird, wenn der Benutzer mit data-backdrop außerhalb des Modals klickt Option, und wir haben das Escape-Key-Ereignis deaktiviert, das ein Modal mit data-keyboard schließt Möglichkeit. Alles in einer HTML-Codezeile:

Launch my modal

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

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 bemerkte beim Betrachten des Issue-Trackers, dass die Leute häufiger Fehler machen. Deshalb haben sie versucht, den Entwicklungsprozess zu automatisieren. Das Ergebnis ist Bootlint , ein HTML-Flusenwerkzeug für Bootstrap-Projekte. Bootlint kann entweder im Browser oder über die Befehlszeile über Node.js verwendet werden und überprüft Bootstrapped-Webseiten automatisch auf viele häufige Bootstrap-Verwendungsfehler. Durch Hinzufügen von Bootlint zu Ihrer Webentwicklungs-Toolchain können viele häufige Fehler beseitigt werden, die normalerweise die Entwicklung eines Projekts verlangsamen.

Wenn Sie einen Beitrag zum Bootstrap-Projekt leisten möchten, sollten Sie dies überprüfen Rorschach . Rorschach ist ein Bootstrap-Pull-Request-Sanity-Checker-Bot, der bei jeder neuen Pull-Request einige Überprüfungen durchführt. Wenn eine Überprüfung der Integrität fehlschlägt, hinterlässt sie einen informativen Kommentar zur Pull-Anforderung, in dem der Fehler und dessen Behebung erläutert werden, und schließt dann die Pull-Anforderung.

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 zeigen möglicherweise Komponenten und Elemente mit unterschiedlichem Stil an, aber alles sollte voll funktionsfähig sein. Die Unterstützung umfasst Internet Explorer 8 und 9, wobei zu beachten ist, dass einige CSS3-Eigenschaften und HTML5-Elemente von diesen Browsern nicht vollständig unterstützt werden.

Um die volle Unterstützung für Internet Explorer 8 und andere ältere Browser zu erhalten, müssen Sie eine Polyfüllung für CSS3-Medienabfragen verwenden Respond.js , HTML 5 Shim Dies ermöglicht die Verwendung von HTML5-Elementen und einen richtigen IEtag im HTML-Kopf, um sicherzustellen, dass der IE nicht im Kompatibilitätsmodus ausgeführt wird. Ihr HTML-Kopf sollte am Ende ungefähr so ​​aussehen:

...

Beachten Sie bei Respond.js Folgendes Vorbehalte in den Entwicklungs- und Produktionsumgebungen.

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

Eine der häufigsten Fragen zum Stapelüberlauf ist, wie das Dropdown-Menü 'Bootstraps' beim Hover und nicht beim Klicken geöffnet wird. Die Lösung dieser Frage ist zwar nicht kompliziert und kann nur mit CSS durchgeführt werden, wird jedoch nicht empfohlen. Diese Funktion wurde absichtlich aus dem Framework herausgenommen, und dies ist eine Entwurfsentscheidung des Entwicklungsteams. Auch dies kann getan werden, aber man muss die Auswirkungen verstehen und verstehen, dass Best Practices existieren, insbesondere für mobile First Frameworks. Der Grund für dieses spezielle Problem ist, dass es Benutzern mit Touch-Geräten nicht hilft, Dinge zum Schweben zu bringen. Auf solchen Geräten gibt es keinen Schwebeflug, nur Berührungsereignisse. Daher funktioniert dies auf berührungsfähigen Geräten nicht ordnungsgemäß.

Bootstrap-Fehler Schlussfolgerung

Ich hoffe, diese kurze Bootstrap-Anleitung hilft Ihnen dabei, einige der häufigsten Fehler zu vermeiden, übliche Missverständnisse auszuräumen und den größten Teil des Frameworks zu erhalten. Denken Sie daran, Bootstrap ist nicht für jedermann geeignet und auch nicht für jedes Projekt geeignet. 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.

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