Project name

Jumbotron heading

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Sign up today

Subheading - H4

Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

Panel with panel-default class
Panel Content

Subheading

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

Panel with panel-success class
Panel Content

Subheading

Maecenas sed diam eget risus varius blandit sit amet non magna.

Panel with panel-info class
Panel Content

Subheading

Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

Panel with panel-primary class
Panel Content

Subheading

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

Panel with panel-warning class
Panel Content

Subheading

Maecenas sed diam eget risus varius blandit sit amet non magna.

Panel with panel-danger class
Panel Content

GRID

Cztery klasy Bootstrap'owego grid'a

Grid: 12 kolumn

  • xs (for phones)
  • sm (for tablets)
  • md (for desktops)
  • lg (for larger desktops)

Klasy te mogą być łączone

.
.col-sm-3
xxxxxx
xxxxxx xxxxx
yyyyy yyyyy yyyyy
.col-sm-3
xxxxxx
xxxxxx xxxxx
yyyyy yyyyy yyyyy

Buttons

Typy

(Prawie) konsekwentnie stosowane kolory

Rozmiary

Grupy

Pionowa grupa

Justified Button Groups

IZ WE WPPT

Nesting (zanurzanie)

Np: robimy menu:

Alerts

Success! Stosujemy do akcji zakończonej sukcesem (lub jakieś pozytywnego zdarzenia.
Info! Stosujemy so poinformaowania użytkownika o jakiejś neutralnej zmianie lub akcji
Warning! Stosujemy do ostrzeżenia użytkownika (zwracamy uwagę na coś ważnego)
Danger! Stosujemy do wyróżnienia jakiejś niebezpiecznej akcji.

DropDown

Glyphicons

  • Envelope icon:
  • Envelope icon as a link:
  • Search icon:

  • Search icon on a button:
  • Search icon on a styled button:
  • Print icon:
  • Print icon on a styled link button: Drukuj
  • Pobierz

Collapsible

Simple Collapsible
Simple collapsible A
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Simple collapsible B
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Collapsible panel group

Collapsible panel

Panel Body
Panel Footer

Accordion

Note: The data-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

Collapsible Group 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Collapsible Group 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Collapsible Group 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Carousel

Tooltip

Najedź na mnie.

Pozycjonowanie

To jest słaby punkt bootstrap'a: odpowiedni JavaScript powinie to robić samodzielnie

Modal window

Wyspecjalizowane listy

Lista typu "list-group

  • First item
  • Second item
  • Third item
  • Fourth item

List group

First List Group Item Heading

List Group Item Text

Second List Group Item Heading

List Group Item Text

Third List Group Item Heading

List Group Item Text

List Group With Badges

  • 12 Nowe
  • 5 Usunięte
  • 3 Ostrzeżenia

Dynamic Pills

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tabele: Contextual Classes

Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

FORMY

Pionowa form + status info

Rozmiar kolumn

The form below shows input elements with different widths using different .col-xs-* classes: