Siatka

Sprawdź angielską wersje tej lekcji w naszym rozszerzonym tutorialu Bootstrap.

Siatka Bootstrapa to potężny system do budowy stron internetowych z myślą o urządzeniach mobilnych. Wykorzystuje szereg kontenerów, wierszy i kolumn do układania i wyrównywania treści. Jest oparta na flexboxie i jest w pełni responsywna.

Niektórzy ludzie uważają nawet, że siatka (grid) to najważniejszy powód do korzystania z Bootstrapa, dlatego w tej lekcji dogłębnie poznamy to niezwykle przydatne narzędzie.

Kontener

Siatka Bootstrapa wymaga prawidłowego funkcjonowania kontenera. Nauczyliśmy się o kontenerach w poprzedniej lekcji, więc tutaj nie będziemy się na nich skupiać.

W naszym obecnym projekcie już dodaliśmy kontener, który wygląda tak:

                                
                                  <div class="container" style="height: 500px; background-color: red">

</div>
                                
                              

A tak powinien wyglądać kontener po wyrenderowaniu w przeglądarce:

Wiersz

Następnie potrzebujemy wiersza.

Wiersze są opakowaniem dla kolumn. Jeśli chcesz podzielić układ poziomo, użyj klasy .row. Dodajmy 2 wiersze do naszego kontenera:

                                
                                  <div class="container" style="height: 500px; background-color: red">

  <div class="row" style="background-color: blue;">
    I am a first row
  </div>

  <div class="row" style="background-color: lightblue;">
    I am a second row
  </div>

</div>
                                
                              

Po zapisaniu pliku i odświeżeniu przeglądarki, powinieneś zobaczyć 2 nowe wiersze.

Kolumny

Nadszedł czas na kolumny. Siatka Bootstrapa pozwala dodawać do 12 kolumn w jednej linii. Jeśli dodasz więcej niż 12, nadmiarowa kolumna przeskoczy do następnej linii.

                                
                                  <div class="container">
  <div class="row">
    <div class="col">
      1
    </div>
    <div class="col">
      2
    </div>
    <div class="col">
      3
    </div>
    <div class="col">
      4
    </div>
    <div class="col">
      5
    </div>
    <div class="col">
      6
    </div>
    <div class="col">
      7
    </div>
    <div class="col">
      8
    </div>
    <div class="col">
      9
    </div>
    <div class="col">
      10
    </div>
    <div class="col">
      11
    </div>
    <div class="col">
      12
    </div>
  </div>
</div>
                                
                              

Kolumny są niezwykle elastyczne. Możesz określić, jak szerokie powinny być poszczególne kolumny i jak każda z nich ma się zachowywać na różnych szerokościach ekranu. Dzięki temu łatwo dostosujesz swój układ zarówno do urządzeń mobilnych, jak i komputerów stacjonarnych.

Na przykład, jeśli chcesz wstawić 2 kolumny o równej szerokości, możesz skorzystać z poniższego kodu:

                                
                                  <div class="container">
  <div class="row">
    <div class="col-6">First column</div>
    <div class="col-6">Second column</div>
  </div>
</div>
                                
                              

Jak widzisz, dodaliśmy cyfry 6 do klasy col. To (klasa col-6) oznacza, że chcemy, aby każda kolumna miała szerokość 6 jednostek.

Możesz swobodnie ustalać szerokość kolumn, pamiętaj tylko, że suma ich szerokości jednostek nie przekraczała 12.

col-6 + col-6 razem daje 12 jednostek, co oznacza 2 identyczne kolumny.

Jeśli chciałbyś, aby prawa kolumna była nieco szersza niż lewa kolumna, możesz to ustawić następująco:

                                
                                  <div class="container">
  <div class="row">
    <div class="col-4">First column</div>
    <div class="col-8">Second column</div>
  </div>
</div>
                                
                              

4 (col-4) + 8 (col-8) = 12

W ten sposób stworzyłeś bardzo typowy układ z główną kolumną po prawej stronie i przestrzenią na pasku bocznym po lewej stronie - to dokładnie taki schemat, jaki wykorzystuje ten samouczek!

Jednakże istnieje pewien problem z powyższym przykładem - niezależnie od rozdzielczości ekranu, nasze kolumny zachowują tę samą proporcję.

Proporcja 4/8 jest bardzo przydatna na dużych ekranach, gdzie jest dużo miejsca. Jednakże na urządzeniach mobilnych, podział małego ekranu na dodatkowe 2 części o szerokości 4 i 8 jednostek nie jest akceptowalny. Taki układ nie byłby wygodny w użyciu.

I tu znowu przychodzą z pomocą punkty przerwania. Pamiętasz poniższą definicję z naszej poprzedniej lekcji?

Tak jak w przypadku kontenerów, możemy również używać punktów przerwania w kolumnach i określić od jakiej szerokości chcemy, aby kolumna rozciągnęła się na pełną szerokość.

Biorąc przykład z wcześniejszej lekcji, powiedzmy, że chcemy, aby obie nasze kolumny były pełnej szerokości na małych i średnich ekranach, a na dużych ekranach zmieniały się na proporcję 4/8 ratio.

                                
                                  <div class="container">
  <div class="row">
    <div class="col-md-4">First column</div>
    <div class="col-md-8">Second column</div>
  </div>
</div>
                                
                              

Wszystko, co musimy zrobić, to dodać punkt przerwania -md (oznaczający "średni rozmiar ekranu") do klasy col dzięki czemu siatka Bootstrapa wie, że chcemy stosunek kolumn 4/8 tylko na ekranach większych niż średni rozmiar, a na innych ekranach (średni i mały rozmiar) kolumny powinny być rozciągnięte na pełną szerokość.

Podsumowując - używając klasy col-md-4, przekazujemy siatce następującą instrukcję:

1. Na ekranach mniejszych niż 768 pikseli chcę, aby ta kolumna rozciągnęła się na pełną szerokość
2. Na ekranach większych niż 768 pikseli chcę, aby ta kolumna miała szerokość 4 jednostek

Spójrz na poniższą tabelę i zobacz, jakie punkty przerwania możesz używać podczas tworzenia układu:

Dobra, koniec z teorią. Teraz skupmy się na przykładach w praktyce.

Trzy równe kolumny

Otrzymaj trzy kolumny o jednakowej szerokości zaczynając od średniej rozdzielczości ekranu i skalując do dużej rozdzielczości ekranu. Na urządzeniach mobilnych, tabletach i mniejszych ekranach kolumny automatycznie układają się jedna pod drugą.

                                
                                  <div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
</div>
                                
                              

Trzy nierówne kolumny

Otrzymaj trzy kolumny o różnej szerokości zaczynając od średniej rozdzielczości ekranu i skalując do dużej rozdzielczości ekranu. Pamiętaj, że suma kolumn siatki powinna wynosić dwanaście dla jednego poziomego bloku. Jeśli jest ich więcej, kolumny zaczną układać się jedna pod drugą, niezależnie od widoku.

                                
                                  <div class="container">
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-3">.col-md-3</div>
  </div>
</div>
                                
                              

Dwie kolumny z dwiema zagnieżdżonymi kolumnami

Zagnieżdżanie jest proste - po prostu umieść wiersz kolumn wewnątrz istniejącej kolumny. To daje Ci dwie kolumny zaczynając od średniej rozdzielczości ekranu i skalując do dużej rozdzielczości ekranu, z dwiema kolejnymi (równymi szerokości) w większej kolumnie.

Na ekranach urządzeń mobilnych, tabletów i mniejszych ekranach, te kolumny i ich zagnieżdżone kolumny będą układać się jedna pod drugą.

                                
                                  <div class="container">

  <!-- Outer row -->
  <div class="row">
    <div class="col-md-8">
      .col-md-8

      <!-- Inner row -->
      <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
      </div>
    </div>
    <div class="col-md-4">.col-md-4</div>
  </div>
</div>
                                
                              

Myślę, że teraz masz ogólny zarys, jak to działa.

Siatka Bootstrapa to bardzo zaawansowane narzędzie, i na początku jego użycie może być przytłaczające. Jeśli czujesz, że nie wszystko jest dla Ciebie jasne - to całkowicie normalne i w porządku. To po prostu wymaga praktyki. Z czasem nabierzesz pewności siebie i płynności.

To była długa lekcja, ale nie wahaj się powtórzyć jej, aby utrwalić swoją wiedzę. Jeśli chcesz ćwiczyć samodzielnie i zobaczyć więcej przykładów, przeczytaj stronę dokumentacji systemu siatki lub pobaw się naszym generatorem siatki.

Jeśli nadal coś jest dla Ciebie niejasne - śmiało daj mi znać na Twitterze.