Działanie Bootstrapa w kontekście responsywnych stron

Framework Twitter Bootstrap w ostatnich kilku latach szturmem zdobywa serca programistów, pragnących budować responsywne strony. Praktycznie każdy, kto tworzy nowy projekt, rozważa wykorzystanie Bootstrapa do „zasilania” frontendu. Nic dziwnego, bo z każdą kolejną wersją Bootstrapa dostajemy zestaw gotowych klas, które znacząco ułatwiają i przyspieszają budowę responsywnych stron internetowych (a z wersją Bootstrap 3 również stron mobilnych).

Zatem przyjrzyjmy się bliżej jak działa Bootstrap i dlaczego tak dobrze wspiera budowę responsywnych stron.

Zapytania mediów

Po pierwsze, Bootstrap dzieli urządzenia na których przeglądana jest strona na 4 kategorie pod kątem rozmiaru ekranu:

• Extra Small Devices – urządzenia z ekranem o szerokości mniejszej niż 768px, np. smartfony.

• Small Devices – urządzenia z ekranem o minimalnej szerokości min-width: 768px i maksymalnej szerokości max-width: 991px. Na przykład tablety.

• Medium Sized Devices – urządzenia z ekranem o minimalnej szerokości min-width:992px oraz maksymalnej szerokości max-width:1199px. Na przykład monitory komputerów stacjonarnych.

• Larger devices – urządzenia z ekranem szerszym niż min-width: 1200px, np. monitory panoramiczne.

Bootstrap dopasowuje arkusz stylów CSS do danego urządzenia dzięki zastosowaniu zapytań @media.

Layout oparty o Grid

Po drugie, Bootstrap działa w oparciu o tzw. GRID system. W uproszczeniu, po prostu dzieli stronę na kolumny, a precyzyjniej – na 12 kolumn. Poniżej znajduje się szablon według którego tworzona jest struktura treści strony – w tym wypadku jest ona dwukolumnowa:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <p>kolumna 1</p>
        </div>
        <div class="col-xs-6">
            <p>kolumna 2</p>
        </div>
    </div>
</div>

Według powyższego, struktura strony zawiera się w div.container. Obejmuje ona całą powierzchnię ekranu z odstępem 15px od lewej i prawej krawędzi ekranu (padding-left:15px oraz padding-right:15px zdefiniowane w bootstrap.css). Dzięki powyższym zapytaniom mediów, .container może przyjmować następujące szerokości:

• width: auto (lub brak) na smartfonach (ekran mniejszy niż 768px)
• width: 750px na tabletach (ekran większy równy 768px)
• width: 970px na komputerach stacjonarnych (ekran większy równy 992px)
• width: 1170px na monitorach panoramicznych (ekran większy równy 1200px)

Kolejnym elementem jest div z klasą .row. Jest on używany jako „opakowanie” dla kolumn. Jego najważniejsze atrybuty to margin-left:-15px oraz margin-right:-15px. Te minusowe wartości marginesów niwelują padding nadany klasie .container, która obejmuje .row. W wyniku tego .row dotyka lewej i prawej krawędzi ekranu. Dlaczego? Wszystko wyjaśnia się, jeśli zobaczymy jak zaprogramowane są kolumny. Poniżej klasa .xs-col-6:

.col-xs-6 {
padding-right: 15px;
padding-left: 15px;
}

A więc widzimy, że kolumny posiadają 15px padding. Dzięki temu zapewniona jest nie tylko odległość zawartości kolumn od krawędzi ekranu (zaznaczam, padding zapewnia odległość zawartości kolumn, sama krawędź kolumny dotyka krawędzi ekranu), ale także symetryczne odległości między zawartością sąsiadujących kolumn.

Taka struktura sprawia, że zawartość strony pozostaje w odległości 15px od krawędzi ekranu. Gdybyśmy chcieli tworzyć na całej szerokości, korzystamy z klasy .container-fluid zamiast .container, która wypełnia całą szerokość ekranu.

O co chodzi z tymi kolumnami i systemem GRID

Przestrzeń każdej strony opartej na Bootstrapie zajmuje w sumie 12 „niewidocznych” kolumn. To od nas jako developerów zależy, ile z tych kolumn chcemy wykorzystywać w danym miejscu. W jaki sposób wpływa to na responsywność? Po pierwsze, istnieją 4 kategorie klas dla kolumn w zależności od tego jak dużo miejsca mają zajmować, i na jakim urządzeniu przeglądana jest strona:

• .col-xs-… – na smartfonach
• .col-sm-… – na tabletach
• .col-md-… – na komputerach
• .col-lg-… – na dużych monitorach panoramicznych

W deklaracji każdej klasy po ostatnim myślniku dodajemy cyfrę od 1 do 12. Wyznacza ona liczbę kolumn, jaką zajmie nasz div. Na przykład col-xs-6 tworzy kolumnę szeroką 6 razy bardziej od pojedynczej kolumny:

Po drugie, w domyśle szerokości tych kolumn nie są zdefiniowane (width:auto) jednak w wyniku zapytań mediów, szerokość każdej kolumny przyjmuje wartości procentowe:

.col-*-12 { width: 100%; }

.col-*-11 { width: 91.66666667%; }

.col-*-10 { width: 83.33333333%; }

.col-*-9 { width: 75%; }

.col-*-8 { width: 66.66666667%; }

.col-*-7 { width: 58.33333333%; }

.col-*-6 { width: 50%; }

.col-*-5 { width: 41.66666667%; }

.col-*-4 { width: 33.33333333%; }

.col-*-3 { width: 25%; }

.col-*-2 { width: 16.66666667%; }

.col-*-1 { width: 8.33333333%; }

Responsywne tabele

W Bootstrapie tworzymy tabele za pomocą klasy .table. W jej wyniku tabela wypełnia całą szerokość elementu, w którym sięznajduje (rodzica DOM), ponieważ posiada atrybuty width:100% oraz max-width:100%.

To sprawia, że tabela odpowiednio reaguje na zmniejszanie/powiększanie ekranu. Ale bardzo duże (wielokolumnowe) tabele wyglądają nieczytelnie na bardzo wąskich ekranach, kiedy je tak „miażdżymy”. Z pomocą przychodzi nam druga klasa Bootstrapa poświęcona tabelom: .table-responsive. Zastosowanie .table-responsive zamiast .table sprawia, że nie pozwalamy tabeli zwężać się na małych ekranach, ale zamiast tego dodajemy możliwość przewijania zawartości tabeli w poziomie:

Ciekaw jestem czy znalezliście jeszcze inne pomysły autorów Bootstrapa zastosowane w celu radzenia sobie z responsywnością stron i prawidłowym wyświetlaniem contentu na różnych ekranach.