Beschleunigung der Anwendungsentwicklung mit Bootstrap

Bootstrap ist eines der besten und am häufigsten verwendeten HTML/CSS/JS-Frontend-Frameworks. Fast jeder Webentwickler, der eine oder zwei Websites erstellt hat, hat von diesem beliebten Framework gehört. Es bietet so viele vorgefertigte Komponenten und Ressourcen, dass Bootstrap Ihre Anwendungsentwicklung erheblich beschleunigen kann.

Jedem guten Entwickler geht es darum, jede Sekunde in seinem Entwicklungsprozess einzusparen. Effizient zu sein bedeutet schnellere Bereitstellung – je früher und häufiger wir bereitstellen, desto schneller erhalten unsere Endbenutzer ein besseres Produkt. Daher können wir uns nicht nur einige Minuten, sondern viele Stunden sparen, wenn wir einige Stunden oder Tage in die Planung des Prozesses und der Strategie investieren.

Ich persönlich habe in den letzten 4 Jahren bei 90 % meiner Projekte mit diesem Framework gearbeitet. In diesem Artikel möchte ich Ihnen einige Tipps geben, die Ihnen helfen können, Ihre Anwendungsentwicklung zu beschleunigen, ohne einige der großartigen Funktionen von Bootstrap zu verpassen.

Bootstrap verstehen

Auch wenn es sich um ein Framework handelt, mit dem Sie sehr einfach beginnen können, lassen Sie sich nicht von seiner Einfachheit auf den ersten Blick täuschen. Bevor Sie sich in ein Projekt stürzen, sollten Sie Zeit damit verbringen, mit dem Framework zu spielen und sich über die Schlüsselelemente seiner Infrastruktur und spannenden Komponenten zu informieren. Dies hilft, die 10 häufigsten Bootstrap-Fehler zu vermeiden.

Nehmen Sie sich eine Stunde Zeit, um die Dokumentation auf der Website von Bootstrap zu lesen, oder erfahren Sie mehr in einem großartigen Beitrag im Blog von Toptal, Was ist Bootstrap? Ein kurzes Tutorial über das Was, Warum und Wie. Und toller Artikel Bootstrap 3 Tipps und Tricks, die Sie vielleicht nicht kennen auf scotch.io.

Wenn Sie das Lesen von Dokumentation als langweilige Aufgabe empfinden und stattdessen lieber etwas Code lesen möchten, dann ist der beste Ort, um damit anzufangen, die Website von Bootstrap. Öffnen Sie Ihren Webinspektor, scannen Sie den Quellcode der Website und überprüfen Sie jeden Codeblock und seine Elemente. Es ist wahrscheinlich eine der besten und schnellsten Möglichkeiten, die Grundlagen zu verstehen.

Tauchen Sie ein in die Seitenstruktur und erfahren Sie, wie die Layouts aufgebaut sind.

 <div class="container"> <div class="row"> ... </div> </div>

… Ändern Sie die Größe Ihres Browserfensters oder verwenden Sie den Viewport Resizer von Chrome, um mehr über Medienabfrage-Dienstprogramme zu erfahren.

 /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

… und wie und wann Sie sie verwenden, machen Sie sich mit Spaltenklassen vertraut, um die besten Ergebnisse für responsives Design zu erzielen.

 <div class="row"> <div class="col-sm-7 col-md-9 col-xs-6">Left column</div> <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> </div>

Werfen Sie einen Blick auf W3Schools, wo Sie eine vollständige Bootstrap-Referenz aller CSS-Klassen, Komponenten und JavaScript-Plugins finden – alle mit „Try it Yourself“-Beispielen:

• Das Grid-System von Bootstrap erklärt: Grids in Bootstrap
• Grundlegende CSS-Klassen: Typografie, Schaltflächen, Formulare und Formularelemente, Hilfsklassen, Bilder, Tabellen
• Einzelne Komponenten: Glyphicons, Dropdowns, Navs.

Überprüfen Sie den Quellcode und versuchen Sie, sich mit so vielen Klassennamen wie möglich vertraut zu machen. Erfahren Sie mehr über ihre Anwendungsfälle – das Wie, Wann und Warum. Dadurch kommen Sie beim Schreiben von HTML und beim Gestalten von UI-Elementen schneller voran. Wenn Sie mehr über diese Komponenten erfahren, können Sie vermeiden, dass Ihre Stylesheets mit viel unnötigem doppeltem Code aufgebläht werden. Halten Sie es schlank und sauber, indem Sie vorhandene Komponenten verwenden und wiederverwenden, anstatt zu viele neue zu erstellen, die dasselbe tun wie die bereits im Framework vorhandenen.

Dies ist besonders wichtig, wenn Sie in einem Team aus mehreren Entwicklern arbeiten. Stellen Sie sicher, dass Sie nicht am Ende Tonnen von dupliziertem Code schreiben und jedes Mal zu viele Stile für denselben Fall erstellen, wenn Sie neue Designs in den Code übersetzen. Die UI-Entwicklung mit UI-Styleguides konsistent und gut dokumentiert zu halten, kann der produktiven Teamarbeit ebenfalls ein paar Knoten hinzufügen. Darüber hinaus werden Sie feststellen, dass Sie beim Hinzufügen neuer Funktionen oder Seiten zu Ihrer Anwendung mit weniger Frustration vorankommen. Ich war an über einem Dutzend großer Projekte beteiligt, und im Vergleich dazu habe ich eine Reihe von Fällen gesehen, in denen das Framework buchstäblich gehackt wurde und jedes Mal, wenn der neue CSS-Code hinzugefügt wurde, die Benutzeroberfläche auf anderen Seiten beschädigt wurde. Es wäre ziemlich anstrengend, die ganze Seite durchzugehen und diese Art von Fehlern zu beheben. Denken Sie nicht nur an die Kosten und all das Geld, das für zusätzliche Entwicklerzeit und QA-Hilfe ausgegeben wird.

Die 7 häufigsten zeitraubenden Styling-Fehler

1. Beim Zentrieren von Text oder Divs

Wenn Sie ein Div und/oder einen Inhalt zentrieren müssen, können Sie eine dieser Klassen verwenden:

Verwenden Sie die Textmitte

 <p class="text-center">I am centered text</p>

… oder Mittelblock

 <div class="center-block">I am centered text</div>

nicht .center oder <center>

2. Beim Ändern der Schriftgröße

Wenn Sie kleinere oder größere Schriftarten benötigen, können Sie eine dieser Klassen verwenden:

 <p class="lead">I'm bigger paragraph text.</p>

 <p class="small">I'm smaller paragraph text.</p>

Falls Sie größere oder kleinere Header benötigen, vergessen Sie nicht .h1 , .h2 , .h3 , .h4 , .h5 , .h6 , .small . Verwenden Sie es wie folgt:

 <h1 class="h2">Smaller Title with .h2</h1>

 <h3 class="h1">Bigger Title with .h1</h3>

 <h4 class="small">Smaller Title with .small</h4>

3. Wenn Floats gelöscht oder Elemente gezwungen werden, ihre Kinder selbst zu löschen

Sie müssen keine Klassen wie .clear erstellen, Sie können stattdessen immer Bootstrap's .clearfix verwenden.

 <div class="clearfix">...</div>

4. Beim Töten von .row-Klassenrändern

Verwenden Sie einfach .clearfix, anstatt Ihre eigenen Stile zu definieren (oder schlimmer noch, Inline-Stile zu verwenden):

 <div class="clearfix">...</div>

5. Beim Unstyling oder Inlining von ungeordneten Listen und anderen Elementen

Entfernen Sie den standardmäßigen Listenstil und den linken Rand von Listenelementen. Dies gilt nur für unmittelbar untergeordnete Listenelemente. Falls Sie dasselbe für verschachtelte Listen anwenden müssen, müssen Sie den Klassennamen auch zu diesen hinzufügen.

 <ul class="list-unstyled"> <li>...</li> </ul> <ul class="list-inline"> <li>...</li> </ul>

In ähnlicher Weise haben wir für Kontrollkästchen oder Optionsfelder .checkbox-inline und .radio-inline .

Und Sie können Ihren Formularen jederzeit .form-inline hinzufügen (was kein <form> sein muss) für linksbündige und Inline-Block-Steuerelemente.

6. Bei der Dimensionierung von Schaltflächen

Lust auf größere oder kleinere Buttons? Fügen Sie .btn-lg , .btn-sm oder .btn-xs für zusätzliche Größen hinzu.

7. Beim Schweben und Ausrichten von Elementen nach rechts oder links

Lassen Sie ein Element mit einer Klasse nach links oder rechts schweben. !important ist enthalten, um Spezifitätsprobleme zu vermeiden. Klassen können auch als Mixins mit jedem CSS-Präprozessor verwendet werden.

Verwenden Sie .pull-right , .pull-left , .text-right , .text-left anstelle von .right , .left , .left-float , .right-float .

 <div class="pull-left">...</div> <div class="pull-right">...</div>

Richten Sie Text mit Textausrichtungsklassen einfach an Komponenten neu aus.

 <p class="text-left">Left aligned text.</p> <p class="text-right">Right aligned text.</p>

Passen Sie die Framework-Kerndateien nicht direkt an

Bei der Arbeit an großen Projekten stellte ich fest, dass der beste Weg, das Framework effektiv zu nutzen, darin besteht, darauf aufzubauen und seine Kerndateien nicht direkt anzupassen. Dieses Konzept ähnelt anderen Plattformen und Bibliotheken, die Sie möglicherweise für das Projekt verwenden.

Wenn Sie jedoch eine kleine Website erstellen und ein Designmodell haben, das möglicherweise nicht viel geändert oder aktualisiert werden muss, stellen Sie möglicherweise fest, dass das Anpassen des Frameworks an Ihre Anforderungen die bessere Option ist. Zum Beispiel möchten Sie vielleicht alle Dinge entfernen, die Sie nicht direkt in den Framework-Dateien benötigen, oder Sie können zum Abschnitt zum Anpassen der Website von Bootstrap gehen, wo Sie ganz einfach alle Komponenten, Variablen und jQuery-Plug-ins konfigurieren können, um Ihre Bedürfnisse zu erfüllen eigene Version. In diesem Fall können Sie die Entwicklung Ihrer Website beschleunigen und die Zeit für das Styling oder den Umgang mit Überschreibungen verkürzen.

Wenn Sie jedoch eine große Website mit mehreren oder mehr Entwicklern starten oder daran arbeiten, ist es am besten, die Dinge getrennt und gut organisiert zu halten. Verschieben Sie die Framework-Dateien aus dem benutzerdefinierten CSS-Hauptordner und bewahren Sie sie in einem Non-Edit-Non-Version-Ordner auf und entfernen Sie unbenutztes CSS, indem Sie die Grunt- oder Gulp-Plugins grunt-uncss oder gulp-uncss verwenden. Eine andere Alternative, um es getrennt zu halten, besteht darin, es über CDN bereitzustellen. Wenn Sie den Code des Frameworks separat und unberührt haben, haben Sie eine bessere und schnellere Option, wenn Sie es auf die neueste Version aktualisieren. Es hilft auch, eine Reihe von Skalierbarkeits- und Stilproblemen zu minimieren oder verlangsamt zu werden, wenn Ergänzungen mit schnellen, kontinuierlichen Änderungen der Benutzeroberfläche vorgenommen werden.

Verwenden Sie Scaffolding-Tools wie Yeoman oder Slush und Paketmanager wie Bower, Python’s pip, Node’s NPM oder Ruby Gems, da sie viel mehr tun, als nur Dateien zum Pfad Ihrer Anwendung hinzuzufügen. Ich schätze die Leistungsfähigkeit von Bower sehr – es kann definitiv etwas mehr, als nur ein oder zwei Dateien herunterzuladen. Die Verwendung eines Paketmanagers ist eine gute Idee, da die Komplexität Ihres Projekts höchstwahrscheinlich zunehmen wird und die Menge an Plug-Ins von Drittanbietern und deren Pflege verrückt und zeitaufwändig werden wird. Bower hilft Ihnen dabei, den Überblick über jedes Plugin und seine Abhängigkeiten zu behalten, einschließlich allem, was mit Bootstrap zu tun hat.

Nutzen Sie verfügbare Bootstrap-Ressourcen für die Anwendungsentwicklung

Mit der Popularität von Bootstrap geht eine Fülle hilfreicher Ressourcen einher: Artikel, Tutorials, Plug-Ins und Erweiterungen von Drittanbietern, Vorlagen, Themenersteller und so weiter. Egal, ob Sie nach Inspiration oder Codeschnipseln suchen, Sie haben alles, was Sie brauchen, um Ihren Fortschritt zu beschleunigen.

Sie würden denken, dass bei so vielen verfügbaren Ressourcen jeder davon profitieren und sie für seine Projekte verwenden würde, aber ob Sie es glauben oder nicht – das ist nicht der Fall. Einige Entwickler verschwenden ihre Zeit und verlangsamen den Projektfortschritt, indem sie einige großartige Codeausschnitte oder Ressourcen überspringen. Obwohl Sie nicht einfach blind kopieren und einfügen sollten, müssen Sie die guten Teile verstehen und sie an Ihren Programmierstil und Ihre technischen Anforderungen anpassen. Die Fähigkeit, gute Ressourcen zu finden, auszusortieren und effektiv zu nutzen, ist ebenfalls eine Fähigkeit und erfordert jahrelange Erfahrung und Wissen.

Nachfolgend finden Sie eine Liste nützlicher Ressourcen für den Einstieg:

Vorlagen, Themes und Plugins

Offizielle Themes von den Erstellern von Bootstrap: themes.getbootstrap.com.

Marktplätze mit erstklassigen Bootstrap-Designs und -Vorlagen: wrapbootstrap.com, themeforest.net, creativemarket.com/themes/bootstrap.

Kostenlose Bootstrap-Designs und -Vorlagen: startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net/free-templates.

„The Big Badass List“ – eine Liste mit 319 nützlichen Bootstrap-Ressourcen: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

BootstrapUI, geschrieben in reinem AngularJS vom AngularUI-Team.

ReagierenJS

React-Bootstrap ist eine Bibliothek wiederverwendbarer Front-End-Komponenten. Sie erhalten das Aussehen und Verhalten von Twitter Bootstrap, aber mit viel saubererem Code, über das React.js-Framework von Facebook.

Django

Bootstrap 3-Integration mit Django: https://github.com/dyve/django-bootstrap3

Jekyll

Jekyll-Bootstrap ist ein vollständiges Blog-Gerüst für Jekyll-basierte Blogs.

WordPress

WordPress-Starter-Theme Sage mit einem modernen Frontend-Entwicklungsworkflow. Basierend auf HTML5 Boilerplate, gulp, Bower und Bootstrap.

Material Design

Material Design for Bootstrap ist ein Design für Bootstrap 3, mit dem Sie das neue Google Material Design in Ihrem bevorzugten Front-End-Framework verwenden können.

Fazit

Bootstrap ist eines der besten verfügbaren Frameworks, das Ihnen viele großartige Tools und Ressourcen bietet, um Ihren Anwendungsentwicklungsprozess zu beschleunigen und zu beschleunigen.

Es erspart Ihnen viele Stunden/Tage Arbeit beim Entwerfen und Codieren einer großartigen Benutzeroberfläche. Jede Komponente und jedes Plugin ist gründlich mit Live-Beispielen und Codeblöcken für eine einfachere Verwendung und Anpassung dokumentiert. Es wird von vielen Entwicklern sehr empfohlen und ist sowohl für das Prototyping als auch für die Produktion sehr beliebt. Es ist ein sehr gutes Tool, um mobilfreundliche responsive Websites zu erstellen. Bootstrap bietet Ihnen einen großartigen Ausgangspunkt für viele Arten von Projekten, die Option, es an einen Designer zu übergeben und zu sagen: „Lass das schick aussehen!“ ohne dass sie sich durch den Code hacken müssen. Am wichtigsten ist, dass Sie damit zuerst die Struktur entwickeln und sich später mit Schriftarten, Farben und ausgefallenen Stilen befassen können. Nehmen Sie sich die Zeit, um zu studieren, was es kann, und überlegen Sie, wie Sie es am besten einsetzen, damit Sie schneller ans Ziel kommen.