Bootstrap
Przydatne linki
Podstawy
Informacje wstępne
- Zbiorniki -
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
container-fluid
-Use .container-fluid for a full width container, spanning the entire width of your viewport.
container
-Use .container for a responsive fixed width container.
- Szerokości
lg
>=1200pxmd
>=992pxsm
>=768pxxs
<768px
Zagnieżdżanie kolumn / Nesting columns
Podczas zagnieżdżania kolumn należy zapamiętać, że każdy “poziom” niżej znów może zmieścić 12 kolumn. Na przykład tworzymy 2 kolumny o szerokości 6, w każdej z nich możemy zmieścić po 2 kolumny o szerokości 6 a w nich kolejne.
<div class="row"> <div class="col-md-12"> Poziom 1: 12 kolumn <div class="row"> <div class="col-md-6"> Poziom 2: 6 kolumn <div class="row"> <div class="col-md-6"> Poziom 3: 6 kolumn <div class="row"> <div class="col-md-6"> Poziom 4: 6 kolumn </div> <div class="col-md-6"> Poziom 4: 6 kolumn </div> </div> </div> <div class="col-md-6"> Poziom 3: 6 kolumn </div> </div> </div> <div class="col-md-6"> Poziom 2: 6 columns </div> </div> </div> </div>
Przestawianie kolumn / Offsetting columns
Gdy chcemy stworzyć tylko jedną kolumnę o szerokości 4 i na dodatek wyśrodkowaną nie musimy tworzyć pustej kolumny z klasą .col-md-4
a następnie kolejnej kolumny albo tworzyć dodatkowych klas CSS. Służy do tego klasa .col-md-offset-*
, która tworzy nam margines po lewej o wybranej szerokości.
Oczywiście klasa .col-md-offset-*
może przyjmować wartości od 1 do 11 i suma kolumn + offsetów musi wynosić 12 (np nie można przesunąć kolumny o szerokości 6 o 8 kolumn).
Możemy stworzyć kilka offsetów np tworzę kolumnę z klasą .col-md-2
, następnie kolumnę .col-md-6
oraz offset o szerokości 2 czyli .col-md-offset-2
i ostatnią kolumnę .col-md-1
następnie offset z klasą .col-md-offset-1
. Suma kolumn i offsetów wynosi 12
Offsety można stosować do wszystkich rodzajów kolumn: .col-lg-offset-* .col-md-offset-* col-sm-offset-* col-xs-offset-*
<!-- Przesuniecie drugiej kolumny o 4 pola od pierwszej --> <div class="row"> <div class="col-md-4">...</div> <div class="col-md-4 col-md-offset-4">...</div> </div> <!-- Przesuniecie pierwszej kolumny o 3 pola od marginesu i drugiej kolumny o 3 pola od pierwszej --> <div class="row"> <div class="col-md-3 col-md-offset-3">3 offset 3</div> <div class="col-md-3 col-md-offset-3">3 offset 3</div> </div> <!-- Przesuniecie kolumny o 3 pola od marginesu --> <div class="row"> <div class="col-md-6 col-md-offset-3">...</div> </div> <!-- Pierwsza kolumna o szerokości 2 normalnie, druga kolumna o szerokości 6 i przesunięta o 2, trzecia kolumna o szerokości 1 i przesunięta o 1 --> <div class="row"> <div class="col-md-2">col-md-2</div> <div class="col-md-6 col-md-offset-2">col-md-6 col-md-offset-2</div> <div class="col-md-1 col-md-offset-1">col-md-1 col-md-offset-1</div> </div>
Pozostałe przykłady
<!-- Przesuniecie drugiej kolumny o 4 pola od pierwszej --> <div class="row"> <div class="col-md-4">...</div> <div class="col-md-4 col-md-offset-4">...</div> </div> <!-- Przesuniecie pierwszej kolumny o 3 pola od marginesu i drugiej kolumny o 3 pola od pierwszej --> <div class="row"> <div class="col-md-3 col-md-offset-3">3 offset 3</div> <div class="col-md-3 col-md-offset-3">3 offset 3</div> </div> <!-- Przesuniecie kolumny o 3 pola od marginesu --> <div class="row"> <div class="col-md-6 col-md-offset-3">...</div> </div> <!-- Pierwsza kolumna o szerokości 2 normalnie, druga kolumna o szerokości 6 i przesunięta o 2, trzecia kolumna o szerokości 1 i przesunięta o 1 --> <div class="row"> <div class="col-md-2">col-md-2</div> <div class="col-md-6 col-md-offset-2">col-md-6 col-md-offset-2</div> <div class="col-md-1 col-md-offset-1">col-md-1 col-md-offset-1</div> </div> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <img src="placehold.it/200x200" class="img-responsive"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img src="placehold.it/200x200" class="img-responsive"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img src="placehold.it/200x200" class="img-responsive"> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <img src="placehold.it/200x200" class="img-responsive"> </div> </div> </div>
Lista wszystkich komponentów
Nazwa | Podgląd |
---|---|
Button groups | |
Button dropdowns | |
Navigational tabs | |
Navbar | |
Labels | |
Page headers | |
Thumbnails | |
Alerts | |
Progress bars | |
Modals | |
Dropdowns | |
Tooltips | |
Popovers | |
Accordion | |
Carousel | |
Typeahead |