Rusztowanie Szablonu czyli Bootstrap Grid System

Grid (czyli siatka) pełni w Bootstrapie wiele różnych funkcji.

Jedną z najważniejszych jest utrzymywanie porządku na stronie. Brzmi to może trochę enigmatycznie, ale kiedy się trochę pomyśli to człowiek zdaje sobie sprawę z kilku rzeczy:

• bootstrap używa się by uzyskać responsywność strony
• do uproszczenia pracy
• do ujednolicenia szablonu strony

Jak wykorzystać Bootstrap?

I to właśnie uzyskujemy za pomocą gridu. Dzieli on stronę na odpowiednie strefy np. panel boczny i miejsce na treść. Robi to jednak w taki sposób by oba te pola dostosowały się do naszego monitora i urządzenia. Czyli na dużym ekranie oba pola będą obok siebie ale już na telefonie jedno znajdzie się pod drugim.

Grid w Twitter Bootstrap dzieli się na 12 pól.

<div class="row grid-color">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row grid-color">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row grid-color">
<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 class="row grid-color">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>

W przypadku responsywnych stron internetowych bardzo często nie stosuje się tradycyjnych tabel. Ich funkcja została zastąpiona przez odpowiednio skonfigurowanego grida.

W celu uzyskania pożądanego wyglądu strony należy odpowiednio dobrać elementy gridu np:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row grid-color">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row grid-color">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row grid-color">
<div class="col-xs-6">.col-xs-6</div><div class="col-xs-6">.col-xs-6</div>
</div>

Jak ustawiać kolumny

Jeśli nie wie się, który element można to policzyć w bardzo prosty sposób:
Powiedzmy, że chcemy użyć szerokości col-md-8
.col-md-8 -> width: 66.66666667% (niezbyt szeroki!)

To nie musimy szukać daleko jak dobrać 2, 3 kolumnę. Grid ma 12 pól tak więc:
Dla 2 – 12-8=4 (.col-md-4)
Dla 3 – może to być w takim razie 2/2, 1/3, 3/1

Ciekawostka (bootstrap grid offset):
Z odpowiednio dobranym gridem można uzyskiwać również takie efekty:

<div class="row grid-color">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row grid-color">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row grid-color">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
<div class="row grid-color">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row grid-color">

<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row grid-color">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

<div class="row grid-color">
<div class="col-sm-9">
Level 1: .col-sm-9

  <div class="row grid-color">
    <div class="col-xs-8 col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
    <div class="col-xs-4 col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
   </div>
</div>
</div>

<div class="row grid-color">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Zwrócicie uwagę jak zachowują się elementy gridu gdy zwęża się stronę.

Aurelia Sypniewska

W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.