Bootstrap

Was alles (und noch vieles mehr) machbar ist ...

Mögliches:

Die Voreinstellung von Bootstrap sind 12 Spalten, die einen Block (Container) mit einer Gesamtbreite von 940 Pixel darstellen. Benutzt man die responsiven CSS-Daten, stellt sich das Rastersystem selbstständig zwischen 724 und 1170 Pixel ein.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Verschachtelte Spalten

Auch ineinander verschachtelte Spalten sind ohne weiteres möglich:

Level 1 column
Level 2
Level 2

Meine Seite hier besteht aus einem container. In diesem ist eine Zeile mit 2 Spalten von span3 und span 9 angegeben. Span3 stellt links das Auswahlmenü dar und Span9 ist der eigentliche Inhalt der Seite.

überschriften in allen Größen

Alle HTML-Größen für überschriften von <h1> bis <h6> sind möglich.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Schriften...

Selbst die kleine Schrift, Fettschrift und auch Kursiv-Schrift sind darstellbar.

Ebenso ist der Text links- und rechtsbündig, sowie zentriert anzugeben.

Farbliche Darstellung

Durch Farbangaben kann der Text beeinflusst werden:

Ich bin ein grauer Text - etwas schlecht zu lesen.

Etwas schriftliches in gelb geht auch.

Roter Text ist als Hinweis immer auffallend.

Blaue Farbdarstellung ist auch sehr gut lesbar.

Eine Zeile in grün lockert den Text auf.

Tabelle, Reihe und Spalte

Alle Arten von Tabellen können dargestellt werden. Einfache HTML-Befehle reichen hier aus.

Optische Aufwertung

Die Zeilen einer Tabelle können einfachst farblich markiert werden.

# Product Payment Taken Status
1 TB - Monthly 01/04/2012 Approved
2 TB - Monthly 02/04/2012 Declined
3 TB - Monthly 03/04/2012 Pending
4 TB - Monthly 04/04/2012 Call in to confirm

Einfache Befehle

Für Formulare lassen sich einfach viele Befehle ausführen:

Formular Checkbox:

Ferner gibt es noch: Auswahlbutton, Radioknöpfe, Eingabefelder, und noch vieles mehr:

Ausfüllfelder ... :


Klickfeld:  


Radioknöpfe:  


Mehrfachauswahl:   


Auswahl:  

Mehrfachauswahl:  

Texteingabe mit Farbe:

Etwas gelbes kommt raus!
Roter Text
Blauer Text im Feld
Alles grünt im Frühling

Farben

Schaltflächen - oder auch Buttons - dienen dazu etwas auszulösen. Als erstes wieder mal in Farbe:

Größen

Blocks

Icon glyphs

140 Icons in Sprite Form, in dunkelgrau (Standard) und auch in weiss. Zur Verfügung gestellt von Glyphicons.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Untermenus mit Buttons

Flüssige Anpassung an verschiedene Ausgabe-Geräte

Das komplette Spaltensystem samt Text verändert sich und passt sich dem jeweiligen Ausgabegerät an - Verkleinern Sie einmal die Anzeige Ihres Browsers ... Sie werden es wie auf dem Handy - oder ähnliches - sehen können.

© brixelweb.de