B

Bootstrap
CSS-Framework

Bootstrap Version 3

Andreas Klunker – 27.4.2015

Inhalt

Eckdaten
Techniken und Konzepte
Framework-Komponenten
Bootstrap in eigene Projekte einbinden
Bootstrap an eigene Bedürfnisse anpassen
Vor- und Nachteile der Verwendung

Eckdaten

entwickelt von sehr kleinem Team bei Twitter
ursprünglich nur für internen Gebrauch
veröffentlicht im August 2011 unter MIT-Lizenz
eines der beliebtesten Projekte auf Github

Techniken und Konzepte

HTML5/CSS3
Progressive Verbesserung (engl. progressive enhancement)
Responsive Webdesign und Mobile First

Framework-Komponenten

CSS-Styling

normalize.css

CSS-Reset für Cross-Browser-konsistentes Rendering

Typografische Elemente

Inline Text-Elemente

fett:

<strong>gewichtig</strong> gewichtig

Textausrichtung

links:

<p class="text-left">linksbündiger Text</p>

linksbündiger Text

zentriert:

<p class="text-center">zentrierter Text</p>

zentrierter Text

rechts:

<p class="text-right">rechtsbündiger Text</p>

rechtsbündiger Text

Blocksatz:

<p class="text-justify">[Trapattoni '98]</p>

Ist klar diese Wörter, ist möglich verstehen, was ich hab gesagt? Danke.

Kein Zeilenumbruch:

<p class="text-nowrap">[Trapattoni '98]</p>

Ist klar diese Wörter, ist möglich verstehen, was ich hab gesagt? Danke.

Blindtexte von: http://www.blindtextgenerator.de

Texttransformation

Kleinschrift:

<p class="text-lowercase">KLEINSCHRIFT</p>

KLEINSCHRIFT

Großschrift:

<p class="text-uppercase">großschrift</p>

großschrift

Großgeschrieben:

<p class="text-capitalize">großgeschrieben</p>

großgeschrieben

Abkürzungen

<abbr title="Cascading StyleSheet">CSS</abbr>

CSS

Adressen

<address>...</address>

Universitätsbibliothek Regensburg
Universitätsstraße 31
93053 Regensburg
Tel: +49 941 9433990

Zitate

<blockquote>...</blockquote>

I knew I'd hate COBOL the moment I saw they'd used "perform" instead of "do".

Larry Wall on a not-so-popular programming language

Listen

<ul/>, <ol/>, <ul class="list-unstyled"/>, <ul class="list-inline"/>

Äpfel
Birnen

Äpfel
Birnen

Definitionslisten

<dl> <dt>Faulheit</dt> <dd>Faulheit ist der mangelnde Wille...</dd> </dl>

Die drei Tugenden eines Programmierers

Faulheit: Faulheit ist der mangelnde Wille eines Menschen, zu arbeiten oder sich anzustrengen.

Ungeduld: Unfähigkeit, sich zu gedulden, etwas ruhig, gelassen abzuwarten, zu ertragen oder durchzuführen.

Hybris: Die Hybris [ˈhyːbʀɪs] (griechisch ὕβρις hǘbris ‚Übermut, Anmaßung‘) bezeichnet eine extreme Form der Selbstüberschätzung.

Code

Quelltext

<code>html</code>

<html>

Anm.: verwendetes Syntax-Highlighting in der Präsentation ist prism.js

Tastaturbefehle

<kbd>STRG</kbd> + <kbd>C</kbd>

STRG + C

Vorformatierter Text

<pre></pre>

Wir leben in einer Zeit tiefgreifender historischer Zeilen-
umbrüche. Dieser Prozeß zwingt uns alle zum Umdenken. (v. Weizsäcker)

Variablen

<var>E</var> = <var>m</var><var>c²</var>

E = mc²

Ausgaben von Computerprogrammen

<samp>Hello World</samp>

Hello World

Tabellen

<table class="table table-striped">...</table>

#	Vorname	Nachname	Benutzername
1	Etta	James	jae12345
2	Hank	Williams	wih54321
3	Frank	Zappa	zaf98765

Mouseover: table-hover, komprimiert: table-condensed, horizontaler Scroll auf Smartphones: table-responsive
siehe http://getbootstrap.com/css/#tables

Formulare

Einfaches Beispiel

<form>
  <div class="form-group">
    <label for="username1">Benutzername</label>
    <input type="text" class="form-control" id="username1"
      placeholder="kaa01744">
  </div>
  <div class="form-group">
    <label for="password1">Password</label>
    <input type="password" class="form-control" id="password1"
      placeholder="geheim">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Passwort merken
    </label>
  </div>
  <button type="submit" class="btn btn-default">Einloggen</button>
</form>

Checkboxen in einer Zeile:

<label class="checkbox-inline"/>

eins zwei drei

gesperrte Eingabefelder:

<input class="form-control" type="text" disabled/>

komplette Sperrung mit Fieldset-Tag:

<fieldset disabled/>

Status der Validierung sichtbar machen:

<div class="form-group has-success has-feedback"> <label class="control-label" for="password">Eingabe in Ordnung</label> <input type="password" class="form-control" id="password"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div>

Eingabe in Ordnung

Eingabe mit Warnung

Eingabe mit Fehler

Symbole im Formularelement:

<div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span> <input class="form-control" type="text"/> </div>

Mehr zu Formularen: http://getbootstrap.com/css/#forms

Buttons

Elemente, die wie ein Button aussehen können:

<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"/> <input class="btn btn-default" type="submit" value="Submit"/>
Link

Klassen für grafische Anzeige von Zuständen:

<button class="btn btn-default"> btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link

Größeneinstellung:

<button class="btn btn-default btn-lg"> btn-sm, btn-xs

Bilder

Responsive:

<img src="..." class="img-responsive"/>

Formen:

<img src="..." class="img-rounded"/>


`img-rounded`	`img-circle`	`img-thumbnail`

Helferklassen

Textfarben:

<p class="text-primary"/>

text-primary, text-success, text-info, text-warning, text-danger

Hintergrundfarben:

<p class="bg-primary"/>

bg-primary

bg-success

bg-info

bg-warning

bg-danger

Responsive Grid

Untscheidung der Geräteklassen

Large	Medium	Small	Extra small

Desktop	Notebook	Tablet	Smartphone
≥1200px	≥992px	≥768px	<768px
lg	md	sm	xs

Raster

bis zu 12 Spalten
Aufteilung beliebig, Summe muss immer 12 ergeben
Raster wird abhängig vom Gerät unterschiedlich definiert

Aufteilung

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
3			6						3
12

Zutaten

Horizontale Zeilen müssen die Klasse row haben und von einem Element mit der Klasse container umschlossen sein
Spalten werden innerhalb der Zeilen über die Klassen col-lg, col-md, col-sm und col-xs definiert
am Ende der Spaltenklassen-Namen wird angegeben, wie viele Rastereinheiten die Spalte umspannt
es können mehrere Klassen zugleich angegeben (für unterschiedliche Gerätetypen)
Klassen skalieren nach oben, z.B. bei gleicher Breite von xs und sm muss nur xs definiert werden
bei über 12 Spalten wird umgebrochen

Beispiel: Hauptmenü RVK-Rechnungen

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-3">
      [Kunden]
    </div>
    <div class="col-sm-6 col-md-3">
      [Rechnungen]
    </div>
    <div class="col-sm-6 col-md-3">
      [Zahlungen]
    </div>
    <div class="col-sm-6 col-md-3">
      [BKZ]
    </div>
  </div>
</div>

Fixe und volle Breite

<div class="container"> vs. <div class="container-fluid">

Offsets

<div class="col-md-offset-3">

Verschachtelung

<div class="row">
  <div class="col-sm-9">Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
      <div class="col-xs-4 col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
    </div>
  </div>
</div>

Ausführliche Beispiele und Erklärungen zum Grid-System in der Bootstrap-Dokumentation unter: http://getbootstrap.com/css/#grid

Komponenten

Glyphicons

Über 250 vektorbasierte Icons aus dem "Halflings Set" von http://glyphicons.com

Verwendung

<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>

kombiniert mit anderen Elementen

Buttons:

<button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-download-alt"></span> Herunterladen </button>

Dropdown-Menü

Beispiel: Navigation RVK-Rechnungen

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button">
    <span class="glyphicon glyphicon-user"></span>
    Andreas Klunker
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li role="presentation">
      <a role="menuitem" tabindex="-1" href="#">Einstellungen</a>
    </li>
    <li role="presentation">...Hilfe...</li>
  </ul>
</div>

Schaltflächengruppen

Buttons:

<div class="btn-group btn-group-lg" role="group" aria-label="..."> <button type="button" class="btn btn-success">Ja</button> <button type="button" class="btn btn-default">Egal</button> <button type="button" class="btn btn-danger">Nein</button> </div>

Buttons + Dropdown-Menüs:

Split Button Dropdowns:

Input-Gruppen

Glyphicon + Textfeld

Textfeld + Button

Textfeld + Dropdown-Menü

Textfeld + Checkbox/ Radio-Button

Navigation

Tabs

<ul class="nav nav-tabs">
  <li role="presentation" class="active">
    <a href="#">Startseite</a>
  </li>
  <li role="presentation">
    <a href="#">Forschung</a>
  </li>
  <li role="presentation">
    <a href="#">Studium</a>
  </li>
</ul>

Pills

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Startseite</a></li>
  <li role="presentation"><a href="#">Forschung</a></li>
  <li role="presentation"><a href="#">Studium</a></li>
</ul>

Tabs kombiniert mit Dropdown-Menüs

Pills kombiniert mit Dropdown-Menüs

Navbar

Beispiel: Navigation RVK-Rechnungen

Brotkrumen

Pagination

Pager

Badges

<a href="#">Posteingang <span class="badge">42</span></a>

Posteingang 42

Fortschrittsbalken

<div class="progress">
  <div style="width: 60%;" aria-valuemax="100"
    aria-valuemin="0" aria-valuenow="60"
    role="progressbar" class="progress-bar">
    60%
  </div>
</div>

60%

Panele

Beispiel: Navigation RVK-Rechnungen

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Titel</h3>
  </div>
  <div class="panel-body">
    Inhalt
  </div>
</div>

Well

<div class="well well-sm">...</div>

Wenn das Kind in den Brunnen gefallen ist deckt man ihn zu!

jQuery-Plugins

Modale Dialoge

Scrollspy

Aktualisiert die Navigation in Abhängigkeit zur Scroll-Position Beispiel: Bootstrap-Dokumentation

Tooltips

Toggelbare Tabs und Pills

Verwendung in Verbindung mit Tabs und Pills: Inhalt ändert sich in Abhängigkeit zum angeklickten Tab bzw. Pill

Hat gespielt Mehmet oder gespielt Basler oder hat gespielt Trapattoni? Diese Spieler beklagen mehr als sie spielen! Wissen Sie, warum die Italienmannschaften kaufen nicht diese Spieler? Weil wir haben gesehen viele Male solche Spiel!

Letzte Jahre Meister Geworden mit Hamann, eh, Nerlinger. Diese Spieler waren Spieler! Waren Meister geworden! Ist immer verletzt! Hat gespielt 25 Spiele in diese Mannschaft in diese Verein. Muß respektieren die andere Kollegen!

Mussen zeigen jetzt, ich will, Samstag, diese Spieler müssen zeigen mich, seine Fans, müssen alleine die Spiel gewinnen. Muß allein die Spiel gewinnen! Ich bin müde jetzt Vater diese Spieler, eh der Verteidiger diese Spieler.

Ein Trainer ist nicht ein Idiot! Ein Trainer sei sehen was passieren in Platz. In diese Spiel es waren zwei, drei diese Spieler waren schwach wie eine Flasche leer! Haben Sie gesehen Mittwoch, welche Mannschaft hat gespielt Mittwoch?

Popovers

Collaps

Alles anzeigen

Strunz ich spreche nicht, hat gespielt nur 25 Prozent der Spiel. Ich habe fertig! ...wenn es gab Fragen, ich kann Worte wiederholen...

Karusell

Mehr zu den Plugins unter http://getbootstrap.com/javascript.

Bootstrap in eigene Projekte einbinden

Download: http://getbootstrap.com/getting-started

<!doctype html>
<html lang="de">
  <head>
    ...
    <link href="bootstrap.css" rel="stylesheet" />
  </head>
  <body>
    ...
    [<script src="jquery.js"></script>]
    <script src="bootstrap.js"></script>
  </body>
</html>

Bootstrap CSS-Framework

Bootstrap Version 3

Inhalt

Eckdaten

Techniken und Konzepte

Framework-Komponenten

CSS-Styling

normalize.css

Typografische Elemente

Inline Text-Elemente

markiert:

gelöscht:

eingefügt:

fett:

kursiv:

Textausrichtung

links:

zentriert:

rechts:

Blocksatz:

Kein Zeilenumbruch:

Texttransformation

Kleinschrift:

Großschrift:

Großgeschrieben:

Abkürzungen

Adressen

Zitate

Listen

Definitionslisten

Die drei Tugenden eines Programmierers

Code

Quelltext

Tastaturbefehle

Vorformatierter Text

Variablen

Ausgaben von Computerprogrammen

Tabellen

Formulare

Einfaches Beispiel

horizontale Anordnung:

Formular in einer Zeile:

Checkboxen in einer Zeile:

gesperrte Eingabefelder:

komplette Sperrung mit Fieldset-Tag:

Status der Validierung sichtbar machen:

Symbole im Formularelement:

Buttons

Elemente, die wie ein Button aussehen können:

Klassen für grafische Anzeige von Zuständen:

Größeneinstellung:

Bilder

Responsive:

Formen:

Helferklassen

Textfarben:

Hintergrundfarben:

Floats:

Floats aufheben:

Anzeigen/ Verstecken:

Responsive Grid

Untscheidung der Geräteklassen

Raster

Aufteilung

Zutaten

Beispiel: Hauptmenü RVK-Rechnungen

Fixe und volle Breite

Offsets

Verschachtelung

Komponenten

Glyphicons

Verwendung

kombiniert mit anderen Elementen

Buttons:

Dropdown-Menü

Schaltflächengruppen

Buttons:

Buttons + Dropdown-Menüs:

Split Button Dropdowns:

Input-Gruppen

Bootstrap
CSS-Framework