Schlagwort-Archiv: CSS

Bootstrap 3, das CSS-Framework

Geschätzte Lesezeit: 4 Minuten, 38 Sekunden

Bootstrap ist das bekannteste und beliebteste CSS-Framework. Wenn es um responsive Layouts und Webseiten geht, ist Bootstrap die erste Wahl.
Dieser Artikel erklärt, was Bootstrap ist und welchem Prinzip dieses Frameworks gehorcht.

Bootstrap Framework

Was ist Bootstrap?

Bootstrap ist ein Open Source CSS-Framework von Twitter, das responsive Layouts für mobile Geräte unterstützt und für HTML5 Anwendungen bestens geeignet ist. CSS steht für Cascading Style Sheet und erlaubt es, Layoutangaben für HTML Webseiten zu definieren.

Das Framework legt ein Grid über die gesamte Page. Das bedeutet, die gesamte Breite wird in Spalten und die Höhe in Zeilen aufgeteilt. Das Grid hat üblicherweise 12 Spalten. Man kann daraus auch Zellen erzeugen, die sich beispielsweise über vier Spalten erstrecken. Geht ein Eingabefeld, eine Überschrift oder ein Button über alle Spalten, bedeutet das die volle Bildschirmbreite. Bei sich änderner Auflösung oder Fenstergröße des Browsers skaliert Bootstrap die Ansicht dann automatisch. Das geht, weil das genormte Gridsystem verwendet wurde!

CSS basiert auf Elementen wie <h1> (Überschrift erster Ebene für Titel), Identifikatoren (das sind frei wählbare Namen für Elemente, die pro Seite nur einmalig vorkommen sollten) und Klassen (das ist eine Bezeichnung für eine Menge gleichartiger Elemente, beispielsweise alle Erwähnungen eines Firmennamens).

CSS an sich kann alles, was Bootstrap auch kann, aber CSS erfordert es, dass man sich umfassend Gedanken zu Farben, Größen, Abständen und Designelementen macht. Mit Bootstrap sind viele dieser Aspekte in Komponenten vorgedacht und werden out of the box und kostenlos geliefert. Dazu gehören auch Buttons, Dialogboxen und vieles mehr.

Man verwendet Bootstrap, indem man es mit einem einfachen Befehl in eine HTML Datei im Kopfbereich (also innerhalb des <head> Tags) einbindet, etwa so:

<code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"</span><span class="nt">></span></code>

Nun kann man alle vorgedachten Komponenten von Bootstrap verwenden, ganz einfach. Die Anzeige eines Bootstrap-Buttons geschieht beispielsweise so (unser Beispiel ist von der Bootstrap-Website und zeigt alle möglichen Button Ausprägungen, die man aber selbst leicht anpassen kann):

<code class="language-html" data-lang="html"><span class="c"><!-- Standard button --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Default<span class="nt"></button></span>

<span class="c"><!-- Provides extra visual weight and identifies the primary action in a set of buttons --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Primary<span class="nt"></button></span>

<span class="c"><!-- Indicates a successful or positive action --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">></span>Success<span class="nt"></button></span>

<span class="c"><!-- Contextual button for informational alert messages --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">></span>Info<span class="nt"></button></span>

<span class="c"><!-- Indicates caution should be taken with this action --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">></span>Warning<span class="nt"></button></span>

<span class="c"><!-- Indicates a dangerous or potentially negative action --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">></span>Danger<span class="nt"></button></span>

<span class="c"><!-- Deemphasize a button by making it look like a link while maintaining button behavior --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">></span>Link<span class="nt"></button></span></code>

Das Ergebnis ist folgende Anzeige:

Bootstrap HowTo
Bootstrap Buttons

Mit sogenannten Themes kann das Aussehen aller Komponenten weiter angepasst werden, was insbesondere für HTML5 Anwendungen wichtig ist (ansonsten würden sie viele ähnliche Elemente enthalten und man merkt sofort, dass die App mit diesem CSS-Framework erstellt wurde). Ein Theme ist bei Bootstrap im Prinzip das gleiche wie auch bei WordPress. Was HTML5 Websites angeht, sollte von darauf achten, keine Applications zu schreiben, die im wesentlichen aus einer riesigen HTML Datei bestehen. Das führt nämlich aus Sicht des Onlinemarketing zu großen Problemen!

Bootstrap hat an Bedeutung gewonnen

Spätestens seit Google verantwortlich für das Aufkommen des Begriffs Mobilegeddon ist, sollte man sich mit responsivem Webseiten beschäftigen. Allerdings macht das auch so Sinn, denn Eure Site sollte sowohl auf Desktop-Bildschirmen als auch auf mobilen Endgeräten wie Smartphones oder Tablets vernünftig dargestellt werden.

Abgesehen davon hilft Bootstrap dabei, das Layout von Webseiten sauber und einfach festzulegen, ohne sich mit table-Tags oder divs mit komplizierten styles-Anweisungen rumschlagen zu müssen.

Zum Problem mit responsiven Webseiten und dem Suchmaschinenmarketing haben wir einen extra Artikel geschrieben.

Bootstrap 3 ist übrigens die aktuelle Version, alles, was eine niedrigere Versionsnummer hat, könnt Ihr getrost ignorieren.

Installation

Wie installiert man das Framework? Ganz einfach: Herunterladen, entpacken und in ein Unterverzeichnis Deiner Webanwendung kopieren. Dann auf Deiner HTML-Datei einbinden, etwa so:

<link rel="stylesheet" href="css/bootstrap.css">

Ersetze dabei css durch das Unterverzeichnis, in das Du Bootstrap kopiert hast und bootstrap.css durch den Dateinamen der CSS-Datei, die versionsabhängig ist!

Alternativ kannst Du auch Bootstrap direkt aus dem Internet verwenden , ohne es vorher herunterzuladen. Dafür solltest Du aber ein sogenanntes CDN verwenden. Ein CDN ist ein Content Distribution Network, das hochverfügbar ist und Dir superschnelle Ladezeiten garantiert (bzw. suggeriert, denn manchmal sind CDNs auch nicht ereichbar). Einbinden mittels CDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

Kombination mit Javascript

Ebenso Standard wie Bootstrap im HTML-Bereich ist jQuery. jQuery ist ein Javascript-Framework, das die Maniputation von Webseiten enorm vereinfacht. Es ist CSS3 konform und ziemlich leichtgewichtig. Man kann damit auch Elemente aus dem DOM-Modell auslesen.

Anstatt umständlich etwas zu schreiben wie document.getElementById(“myid”) heisst es dann nur noch $(“#myid”). Mit Hilfe von Selektoren können auch komplexe Bedingungen kodiert werden. Auch das Auslesen von Attributen, welches zumal für responsive Design wichtig ist, geht mit jQuery supereinfach.

Ressourcen zu Bootstrap 3

Das wichtigste zuerst: Die Bootstrap 3 Webseite. Dort könnt Ihr Bootstrap kostenlos herunterladen.
Wer es lieber auf Deutsch mag, kann die deutsche Bootstrap-Seite aufrufen.

Für Icons sollte unbedingt Font Awesome verwendet werden, denn damit sind alle Grafiken voll skalierbar und sehen auch auf Displays mit riesiger Pixelanzahl perfekt aus. Auch Font Awesome ist kostenlos!

Das Aussehen Deiner Website kannst Du mithilfe von Themes steuern. Diese beeinflussen Farben, Schriften, Icons, Aufteilungen usw. Auf Bootswatch gibt es kostenfreie Themes, unbedingt ansehen. Unser Geheimtipp: das Spacelab-Theme.

Ganz wichtig ist, das Grid System dieses CSS-Frameworks zu verstehen: Bootstrap basiert auf einem 12-Spalten-Layout, Details sind in diesem Tutorial anschaulich erklärt.

Eine gute praktische Einführung gibt dieses Tutorial, in dem der Bau einer Landing Page mit Bootstrap beschrieben wird.

Noch cooler ist es, ein eigenes WordPress-Theme mit Bootstrap zu erstellen, dazu sollte man allerdings schon fortgeschrittene Kenntnisse sowohl in CSS als auch in WordPress als auch in der Webseitenerstellung allgemein haben. Wer sich rantrauen will, kann hier lesen, wie man am besten vorgeht.

Wer sich die ganze Arbeit sparen will und beim Editieren von CSS- und HTML-Code nicht glücklich wird, der sollte gleich zu WordPress greifen. Die meisten Layouts unterstützen responsive Webseiten und kapseln den gesamten Code weg. Man kann sich auf das wesentliche konzentrieren, so wie es sein soll!


Wie hat Dir der Artikel gefallen?

Bootstrap 3, das CSS-Framework: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,63 von 5 Punkten, basieren auf 19 abgegebenen Stimmen.

Weitere Beiträge

HTML Tipps

Geschätzte Lesezeit: 3 Minuten, 55 Sekunden

In diesem Artikel für Einsteiger geben wir Euch einen Überblick über HTML und stellen ein paar nützliche Tipps & Tricks zum Arbeiten mit HTML vor.
HTML Tipps
HTML ist die Beschreibungssprache für Webseiten und steht für Hypertext Markup Language. In diesem Artikel erklären wir die Grundlagen von HTML und wie man eigene HTML-Seiten baut.

HTML – Die Beschreibungssprache für Internetseiten

HTML basiert im wesentlichen auf Tags. Ein Tag ist eine Art Steueranweisung, die mit einer spitzen Klammer, die nach links zeigt, beginnt und mit einer spitzen Klammer, die nach rechts zeigt, endet.
Ein Tag kann entweder atomar sein, dann schließt er sich selbst direkt wieder. Beispielsweise
<br/>

Es gibt auch Tags, die sich schließen, indem der Tag mit vorangestelltem Slash verwendet wird, beispielsweise so:
<a href="http://www.erfolgsrezepte-online.de">Auf geht's zu ERFOLGSREZEPTE ONLINE</a>

Der br-Tag ist für einen Zeilenvorschub verantwortlich (BR steht für BReak). Dafür ist es nicht notwendig, weitere Angaben zu machen, ein zeilenumbruch bleibt ein Zeilenumbruch, er hat beispielsweise keine Farbe.

Anders sieht es bei einem Link aus, siehe das zweite Beispiel mit dem a-Tag:
Ein Link besteht aus zwei wesentlichen Teilen:

  1. Einem Linkziel, also einer Internetadresse (URL): Dieses Linkziel ist quasi unsichtbar, es wird sichtbar, wenn man den Link anklickt und sich die hinterlegte URL öffnet. Wenn man genau hinsieht, kann man das Linkziel auch in der Statuszeile des Browsers sehen, wenn man mit der Maus über einen Link fährt (sogenanntes Hovern)
  2. Einem Anzeigetext: Dieser Text wird angezeigt und diesen sieht der User. Klickt der User auf diesen Text, öffnet sich das Linkziel. Natürlich ist es auch möglich – und das wird auch öfters so gemacht – als Anzeigetext die URL aus dem Linkziel anzugeben (meist lässt man dann das http:// weg, und schreibt nur www.erfolgsrezepte-online.de)

Tabellen mit HTML erstellen

Eine Tabelle besteht aus Spalten und Zeilen sowie einer optionalen Kopfzeile. Der Tag für eine Tabelle lautet <table>. Eine Zeile deklariert man mit dem HTML Tag <tr> und eine Spalte mit <td>. Die optionale Kopfzeile einer Tabelle gibt man mit <thead> an, innerhalb dieser kann man <th> für die Spaltenüberschriften verwenden (anstatt von <td> für normale Zeilen).

Eine HTML Tabelle hat also folgenden möglichen Aufbau:


<table>
<thead>
<tr>
<th>Überschrift Spalte 1</th>
<th>Überschrift Spalte 2</th>
<th>Überschrift Spalte 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zelle 1,1</td>
<td>Zelle 2,1</td>
<td>Zelle 3,1</td>
</tr>
<tr>
<td>Zelle 1,2</td>
<td>Zelle 2,2</td>
<td>Zelle 3,2</td>
</tr>
</tbody>
</table>

Die Anzahl der Spalten und Zeilen ist beliebig, im Beispiel sind 3 Spalten und zwei Zeilen plus eine Kopfzeile angegeben. Das Ergebnis dieser Deklaration wird so dargestellt:

Überschrift Spalte 1Überschrift Spalte 2Überschrift Spalte 3
Zelle 1,1Zelle 2,1Zelle 3,1
Zelle 1,2Zelle 2,2Zelle 3,2

CSS – Verpasse Deiner Webseite ein Layout

Mit HTML-Tags kann man das Grundlayout des Dokuments definieren, also Absätze, Zeilenumbrüche, Links, Listen, Tabellen. Aber auch die Grundstruktur des Dokuments wird mit Tags angegeben: Jedes Dokument besteht aus folgenden Teilen:

  • Kopf (head-Tag): Er enthält Meta-Informationen, wie den Titel des Dokuments, zu verwendende Javascript-Scripte und Suchmaschinen-relevante Dinge wie die Meta-Beschreibung des Dokuments
  • Körper (body-Tag): Hier steht der eigentliche Inhalt des Dokuments drin, also der anzuzeigende Text usw. Auch das, was Du gerade hier liest, steht im Body-Tag

Doch was ist, wenn man einem Text eine andere Farbe geben möchte, wenn der Text in einer anderen Schriftart oder fett gedruckt dargestellt werden soll? Genau solche Dinge werden mit CSS-Anweisungen ausgesteuert. Hier gibt es drei Möglichkeiten:

  1. CSS-Anweisungen inline in den HTML-Tags als style-Attribut verankern (erklären wir später)
  2. CSS-Anweisung als Klasse angeben
  3. CSS-Anweisung als Identifikator angeben

Zu Möglichkeit 1 ein Beispiel für eine Inline, also innerhalb des Tags selbst konkret angegeben CSS-Steueranweisung:

<div style="color:red">Das ist ein Text, der in roter Farbe angezeigt wird.</div>

Das Ergebnis, so wie es der User sieht, erscheint dann so:

Das ist ein Text, der in roter Farbe angezeigt wird.

Das Zusammenspiel von HTML & CSS

Wie bekommt man nun CSS-Anweisungen und HTML-Dateien zusammen?
Bei Inline deklarierten CSS-Anweisungen über das style-Attribut stellt sich die Frage nicht, denn da ist das CSS ja schon jeweils an der benötigten Stelle im HTML-Dokument.

HTML Tipps: CSS auslagern

Eleganter ist es allerdings, auch hinsichtlich der Übersichtlichkeit und Wiederverwendbarkeit, wenn man die CSS-Anweisungen in einer eigenen Datei auslagert. Das hat übrigens auch Vorteile beim Ranking (SEO und so weiter): Denn auch die Ladezeit spielt bei SEO eine Rolle, und ausgelagerte CSS-Anweisungen können gecached werden!
Also: Die beste Option ist es, eine eigene Textdatei anzulegen, die dann so aussieht:

.roterText {
color:red;
}
... weitere CSS-Anweisungen

Die Datei wird dann mit der Endung .css abgespeichert und wie folgt in die HTML-Datei innerhalb des head-Tags eingebunden:

<link rel="stylesheet" href="dateiname.css" />

Alernativ, aber nicht ganz so elegant ist es, solche CSS-Anweisungen im head-Tag des HTML-Dokuments einzubetten:

<style>
.roterText {
color:red;
}
</style>

Der style-Tag sorgt dafür, dass der davon eingeschlossene Text als CSS interpretiert wird.

HTML & CSS in der Praxis

Mehr dazu und weitere HTML Tipps erfahrt in unserem nächsten Artikel. Schaut bitte wieder rein, es lohnt sich!
Vielleicht interessiert Dich auch: Bootstrap 3, das CSS-Framework . Bootstrap erleichtert Dir das Arbeiten mit CSS enorm. Vor allem, wenn es um das Erstellen von responsiven Websites (mobil) geht.


Wie hat Dir der Artikel gefallen?

HTML Tipps: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,75 von 5 Punkten, basieren auf 4 abgegebenen Stimmen.

Weitere Beiträge