Repozytorium Web Developera

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 >=1200px
    • md >=992px
    • sm >=768px
    • xs <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