Bootstrap 3: system siatki i zapytania mediów
Wszyscy znamy o Bootstrap, ponieważ jest to najpopularniejszy web framework o otwartym kodzie źródłowym. Mark Otto i Jacob Thorton stworzyli jeden z najpotężniejszych frameworków CSS na świecie.
Po wydaniu Bootstrap w wersji 3, najciekawszą zmianą była różnica w systemach siatki. Bootstrap 2 oferował dwa różne rozmiary przeglądarek (desktop i mobile). A Bootstrap 3 jest zorientowany na urządzenia mobilne i jego system grid pozwala tworzyć różne siatki na podstawie rozmiaru przeglądarki. Podobny trend obserwuje się w najnowszej wersji frameworka - wydaniu alfa Bootstrap 4.
Tworzenie responsywnych stron: jakie masz opcje? [Darmowa e-książka]
Bootstrap 2 |
Bootstrap 3 |
Bootstrap 4 |
| Utworzona siatka działa na pulpitach, a następnie układa się jedna na drugą, gdy rozmiar przeglądarki wynosi mniej niż 767 pikseli. Taa metoda ogranicza pracę, ponieważ można zdefiniować tylko 1 siatkę w przeglądarkach o rozmiarze pulpitu. | Nowy system siatki Bootstrap jest zorientowany na urządzenia mobilne. Określasz rozmiar siatki, który jest siatką dla tego i większych rozmiarów ekranu. | Najnowsza wersja Bootstrap oferuje ulepszony system sitaki z nową warstwą. Dodatkowo, zostały zaktualizowane wstawki semantyczne. Od teraz można uzyskać dostęp do wszystkich niezbędnych wstawek. |
Przykłady kilku kilkukolumnowego układu w Bootstrap 3
Na początku może to być trochę trudne do zrozumienia, więc oto przykład. Powiedzmy, że chcesz stronę, która ma:
- 1-kolumnowy układ na bardzo małych urządzeniach
- 2-kolumnowy układ na urządzeniach o małym I średnim rozmiarze
- 4-kolumnowy układ na dużych urządzeniach
Ponieważ system siatki teraz kaskaduje się z urządzeń mobilnych, kod będzie wyglądał tak:
| To część naszej siatki. | To część naszej siatki. | To część naszej siatki. |
| To część naszej siatki. |
Nie musimy definiować niczego dla bardzo małych urządzeń, ponieważ domyślnie dla nich jest ustawiony jedno kolumnowy układ. Musimy określić rozmiar siatki dla małych urządzeń, a nie dla urządzeń średnich. Jeśli więc zdefiniujesz rozmiar w małych urządzeń, to będzie to rozmiar siatki dla małych, średnich i dużych urządzeń.
Rozmiary siatek
To najlepsza część nowego systemu. Dostępne są Msiatki dla 4 różnych rozmiarów ekranu. Poniżej znajduje się zestawienie różnych rozmiarów.
<div class="wp_syntax">
<table>
<tbody>
<tr>
<td class="code">
<pre class="php" style="font-family: monospace;"><span style="color: #339933;"><span class="sumo_twilighter_highlighted twilighter-299735e9" style="background-color: rgba(17, 0, 0, 0.15); cursor: inherit;">.</span></span><span class="sumo_twilighter_highlighted twilighter-299735e9" style="background-color: rgba(17, 0, 0, 0.15); cursor: inherit;">col</span><span style="color: #339933;"><span class="sumo_twilighter_highlighted twilighter-299735e9" style="background-color: rgba(17, 0, 0, 0.15); cursor: inherit;">-</span></span><span class="sumo_twilighter_highlighted twilighter-299735e9" style="background-color: rgba(17, 0, 0, 0.15); cursor: inherit;">xs</span><span style="color: #339933;"><span class="sumo_twilighter_highlighted twilighter-299735e9" style="background-color: rgba(17, 0, 0, 0.15); cursor: inherit;">-</span></span><span class="sumo_twilighter_highlighted twilighter-299735e9" style="background-color: rgba(17, 0, 0, 0.15); cursor: inherit;">$ Bardzo małe Telefony z ekranem mniej niż 768px<span class="sumo_twilighter_shares">1</span></span>
<span style="color: #339933;"><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">.</span></span><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">col</span><span style="color: #339933;"><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">-</span></span><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">sm</span><span style="color: #339933;"><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">-</span></span><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">$ Małe urządzenia Tablety z ekranem o 768px i więcej
</span><span style="color: #339933;"><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">.</span></span><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">col</span><span style="color: #339933;"><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">-</span></span><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">md</span><span style="color: #339933;"><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">-</span></span><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">$ Średnie urządzenia Komputery z ekranem o 992px i więcej</span>
<span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">.</span><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">col</span><span style="color: #339933;"><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">-</span></span><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">lg</span><span style="color: #339933;"><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">-</span></span><span class="sumo_twilighter_highlighted twilighter-218fab37" style="background-color: rgba(17, 0, 0, 0.15);">$ Duże urządzenia Komputery z ekranem o 1200px i więcej</span></pre>
</td>
</tr>
</tbody>
</table>
</div>Oficjalna dokumentacja Bootstrap oferuje znacznie bardziej wszechstronne zrozumienie działania siatki. Przyczytaj ją, aby uzyskać bardziej szczególowy przegląd rozmiarów kolumn, maksymalnych rozmiarów kolumn i maksymalnej szerokości całej witryny na podstawie rozmiaru przeglądarki.
Domyślne rozmiary dla siatki Bootstrap
Czasami musisz użyć zapytań mediów, aby strona działała tak, jak chcesz. Znajomość domyślnych rozmiarów siatki jest niezbędna do rozszerzenia siatki Bootstrap. Napisaliśmy krótką wskazówkę, aby wyświetlić domyślne rozmiary, więc zobacz, czy potrzebujesz Bootstrap zapytań mediów i punktów przerwania.
Bootstrap 3 Punkty przerwania w zapytaniach mediów
Bootstrap 3 to front-end framework zorientowany na urządzenia mobilne. Poniżej zamieściłam prawidłową kolejność zapytań mediów, a na samym dole umieściłam także nieprzywierające pierwsze punkty przerw w przypadku, gdy niektórzy nie są przyzwyczajeni do metodologii mobilnej, ponieważ technicznie oba będą działali. Min-Width: odnosi się do wszystkiego, co jest większe lub równe podanej wartości. Max-Width: odnosi się do wszystkiego mniej lub równe podanej wartości.
<div class="wp_syntax">
<table>
<tbody>
<tr>
<td class="code">
<pre class="php" style="font-family: monospace;"><span style="color: #666666; font-style: italic;">/*==================================================
= Bootstrap 3 Zapytania mediów =
==================================================*/</span>
<span style="color: #666666; font-style: italic;">/*========== Akcent na urządzeniach mobilnych ==========*/</span>
<span style="color: #666666; font-style: italic;">/*Niestandardowe, iPhone Retina */</span>
<span style="color: #339933;">@</span>media only screen and <span style="color: #009900;">(</span>min<span style="color: #339933;">-</span>width <span style="color: #339933;">:</span> 320px<span style="color: #009900;">)</span><span style="color: #009900;">{</span>
<span style="color: #009900;">}</span>
<span style="color: #666666; font-style: italic;">/* Bardzo małe urządzenia, telefony */</span>
<span style="color: #339933;">@</span>media only screen and <span style="color: #009900;">(</span>min<span style="color: #339933;">-</span>width <span style="color: #339933;">:</span> 480px<span style="color: #009900;">)</span><span style="color: #009900;">{</span>
<span style="color: #009900;">}</span>
<span style="color: #666666; font-style: italic;">/* Małe urządzenia, tablety */</span>
<span style="color: #339933;">@</span>media only screen and <span style="color: #009900;">(</span>min<span style="color: #339933;">-</span>width <span style="color: #339933;">:</span> 768px<span style="color: #009900;">)</span><span style="color: #009900;">{</span>
<span style="color: #009900;">}</span>
<span style="color: #666666; font-style: italic;">/* Średnie urządzenia, komputery stacjonarne */</span>
<span style="color: #339933;">@</span>media only screen and <span style="color: #009900;">(</span>min<span style="color: #339933;">-</span>width <span style="color: #339933;">:</span> 992px<span style="color: #009900;">)</span><span style="color: #009900;">{</span>
<span style="color: #009900;">}</span>
<span style="color: #666666; font-style: italic;">/* Duże urządzenia, szerokie ekrany */</span>
<span style="color: #339933;">@</span>media only screen and <span style="color: #009900;">(</span>min<span style="color: #339933;">-</span>width <span style="color: #339933;">:</span> 1200px<span style="color: #009900;">)</span><span style="color: #009900;">{</span>
<span style="color: #009900;">}</span>
<span style="color: #666666; font-style: italic;">/*========== Metoda Non-Mobile ==========*/</span>
<span style="color: #666666; font-style: italic;">/* Duże urządzenia, szerokie ekrany */</span>
<span style="color: #339933;">@</span>media only screen and <span style="color: #009900;">(</span>max<span style="color: #339933;">-</span>width <span style="color: #339933;">:</span> 1200px<span style="color: #009900;">)</span><span style="color: #009900;">{</span>
<span style="color: #009900;">}</span>
<span style="color: #666666; font-style: italic;">/* Średnie urządzenia, komputery stacjonarne*/</span>
<span style="color: #339933;">@</span>media only screen and <span style="color: #009900;">(</span>max<span style="color: #339933;">-</span>width <span style="color: #339933;">:</span> 992px<span style="color: #009900;">)</span><span style="color: #009900;">{</span>
<span style="color: #009900;">}</span>
<span style="color: #666666; font-style: italic;">/* Małe urządzenia, tablety */</span>
<span style="color: #339933;">@</span>media only screen and <span style="color: #009900;">(</span>max<span style="color: #339933;">-</span>width <span style="color: #339933;">:</span> 768px<span style="color: #009900;">)</span><span style="color: #009900;">{</span>
<span style="color: #009900;">}</span>
<span style="color: #666666; font-style: italic;">/* Bardzo małe urządzenia, telefony */</span>
<span style="color: #339933;">@</span>media only screen and <span style="color: #009900;">(</span>max<span style="color: #339933;">-</span>width <span style="color: #339933;">:</span> 480px<span style="color: #009900;">)</span><span style="color: #009900;">{</span>
<span style="color: #009900;">}</span>
<span style="color: #666666; font-style: italic;">/* Niestandardowe, iPhone Retina */</span>
<span style="color: #339933;">@</span>media only screen and <span style="color: #009900;">(</span>max<span style="color: #339933;">-</span>width <span style="color: #339933;">:</span> 320px<span style="color: #009900;">)</span><span style="color: #009900;">{</span>
<span style="color: #009900;">}</span></pre>
</td>
</tr>
</tbody>
</table>
</div>Bootstrap 2.3.2 Punkty przerwania w zapytaniach mediów
<div class="wp_syntax">
<table>
<tbody>
<tr>
<td class="code">
<pre class="php" style="font-family: monospace;"><span style="color: #666666; font-style: italic;">/*=====================================================
= Bootstrap 2.3.2 Zapytania mediów =
=====================================================*/</span>
<span style="color: #339933;">@</span>media only screen and <span style="color: #009900;">(</span>max<span style="color: #339933;">-</span>width <span style="color: #339933;">:</span> 1200px<span style="color: #009900;">)</span><span style="color: #009900;">{</span>
<span style="color: #009900;">}</span>
<span style="color: #339933;">@</span>media only screen and <span style="color: #009900;">(</span>max<span style="color: #339933;">-</span>width <span style="color: #339933;">:</span> 979px<span style="color: #009900;">)</span><span style="color: #009900;">{</span>
<span style="color: #009900;">}</span>
<span style="color: #339933;">@</span>media only screen and <span style="color: #009900;">(</span>max<span style="color: #339933;">-</span>width <span style="color: #339933;">:</span> 767px<span style="color: #009900;">)</span><span style="color: #009900;">{</span>
<span style="color: #009900;">}</span>
<span style="color: #339933;">@</span>media only screen and <span style="color: #009900;">(</span>max<span style="color: #339933;">-</span>width <span style="color: #339933;">:</span> 480px<span style="color: #009900;">)</span><span style="color: #009900;">{</span>
<span style="color: #009900;">}</span>
<span style="color: #339933;">@</span>media only screen and <span style="color: #009900;">(</span>max<span style="color: #339933;">-</span>width <span style="color: #339933;">:</span> 320px<span style="color: #009900;">)</span><span style="color: #009900;">{</span>
<span style="color: #009900;">}</span></pre>
</td>
</tr>
</tbody>
</table>
</div>Responsywne narzędzia
Podobnie jak Bootstrap 2, Bootstrap 3 udostępnia narzędzia do reagowania na ukrywanie i wyświetlanie elementów w oparciu o rozmiar przeglądarki. Pomoże nam to również w zdefiniowaniu naszego systemu siatki.
<div class="wp_syntax">
<table>
<tbody>
<tr>
<td class="code">
<pre class="php" style="font-family: monospace;"><span style="color: #339933;">.</span>visible<span style="color: #339933;">-</span>xs
<span style="color: #339933;">.</span>visible<span style="color: #339933;">-</span>sm
<span style="color: #339933;">.</span>visible<span style="color: #339933;">-</span>md
<span style="color: #339933;">.</span>visible<span style="color: #339933;">-</span>lg
<span style="color: #339933;">.</span>hidden<span style="color: #339933;">-</span>xs
<span style="color: #339933;">.</span>hidden<span style="color: #339933;">-</span>sm
<span style="color: #339933;">.</span>hidden<span style="color: #339933;">-</span>md
<span style="color: #339933;">.</span>hidden<span style="color: #339933;">-</span>lg</pre>
</td>
</tr>
</tbody>
</table>
</div>Pomaga to, ponieważ możemy pokazać pewne elementy na podstawie rozmiaru. W naszych dzisiejszych przykładach pokażemy dodatkowy pasek boczny na dużych ekranach.
Przykłady
Oto kilka przykładów siatek, które możesz stworzyć. Przejrzymy kilka podstawowych stron, które mogą zainteresować Cię i pokażemy, jak łatwo można stworzyć tę witrynę za pomocą siatki Bootstrap 3.
Proste: Duży ekran komputera a telefon komórkowy
Załóżmy, że chcesz, aby witryna zawierała 1-kolumnowy układ na bardzo małych urządzeniach (telefon) i małych (tablety), 2-kolumnowy - na średnich (średnie ekrany komputerów) i 4-kolumnowy - na dużych (komputery stacjonarne).
| Duże urządzenia | Duże urządzenia | Duże urządzenia | Duże urządzenia |
Tak będzie wyglądał kod:
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Duże urządzenia!</div>
<div class="visible-md text-warning">Średnie urządzenia!</div>
<div class="visible-sm text-primary">Male urządzenia!</div>
<div class="visible-xs visible-sm text-danger">Bardzo male urządzenia i male urządzenia</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Duże urządzenia!</div>
<div class="visible-md text-warning">Średnie urządzenia!</div>
<div class="visible-sm text-primary">Male urządzenia</div>
<div class="visible-xs visible-sm text-danger">Bardzo male urządzenia i male urządzenia</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Duże urządzenia!</div>
<div class="visible-md text-warning">Średnie urządzenia!</div>
<div class="visible-sm text-primary">Male urządzenia</div>
<div class="visible-xs visible-sm text-danger">Bardzo male urządzenia i male urządzenia</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="visible-lg text-success">Duże urządzenia!</div>
<div class="visible-md text-warning">Średnie urządzenia!</div>
<div class="visible-sm text-primary">Male urządzenia</div>
<div class="visible-xs visible-sm text-danger">Bardzo male urządzenia i male urządzenia</div>
</div>
</div>Intermediate: Wyświetlanie dodatkowej kolumny na dużych komputerach
Jest to interesujący przykład, na którym widać zalety nowej wersji frameworka. Załóżmy, że masz witrynę z bocznym paskiem i główną sekcją treści. Dla bardzo małych urządzeń chciałbyś ustawć 1-kolumnowy układ - główna zawartość z ułożonym poniżej paskiem bocznym. Dla małych i średnich - aby pasek boczny i główne treści były ustawione obok siebie. Dla dużych urządzeń - chciałbyś wykorzystać przestrzeń na większych urządzeniach, oraz dodatkowy pasek boczny, by pokazać więcej treści. Ustawiamy 6-kolumnowy układ dla głównej zawartości na dużych urządzeniach, aby zrobić miejsce na drugi pasek boczny. To świetny sposób na wykorzystanie przestrzeni na większych komputerach.
| Główna treść | Główny pasek boczny | Dodatkowy pasek boczny, |
| który pojawia się tylko na DUŻYCH urządzeniach. |
A oto kod dla tego przykładu.
<div class="row">
<div class="col-sm-9 col-lg-6 text-danger">
Główna treść.
</div>
<div class="col-sm-3 text-warning">
Główny pasek boczny.
</div>
<div class="col-lg-3 visible-lg text-success">
Dodatkowy pasek boczny który pojawia się tylko na DUŻYCH urządzeniach.
</div>
</div>Zaawansowane: różne siatki dla każdego rozmiaru
To będzie bardziej złożony przykład. Powiedzmy, że w żadnym punkcie naszego systemu siatki nie chcemy, aby wszystkie nasze kolumny były ułożone w stos. Dla bardzo małych urządzeń potrzebujemy 2-kolumnowego układu. Dla małych urządzeń - 3-kolumnowy. Dla średnich urządzeń - 4 kolumnowy. Aw przypadku dużych urządzeń potrzebujemy 6 kolumnowego układu (jednokolumnowy wyświetlany tylko na dużych urządzeniach).
| Treść! | Treść! | Treść! | Treść! | Treść! | Treść, widoczna tylko na dużych urządzeniach! |
Tak będzie wyglądał kod:
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
Treść!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
Treść!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
Treść!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
Treść!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
Treść!
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg">
Treść, widoczna tylko na dużych urządzeniach!
</div>
</div>Jak widać, że wraz ze zmniejszaniem rozmiaru przeglądarki zaczynają się formować kolumny i zaczyna układać się zawartść w nich.
Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: Bootstrap 3: The Grid System and Media Queries.
* * *
Teraz widzisz jak łatwo jest tworzyć złożone i dynamiczne witryny za pomocą siatki Bootstrap 3. Z pomocą tego systemu można bezproblemowo stworzyć serwisy dowolnego rodzaju: od witryn z 2-kolumnowym układem - do złożonych stron, które będł idealnie wygłądały na każdym ekranie. Mamy nadzieję, że te przykłady dadzą Ci pojęcie o elastyczności nowego systemu siatki i wszystkich wspaniałych rzeczy, które możesz stworzyć z jego pomocą.
P.S. Jeśli masz już stronę z panelem administracyjnym opartą o HTML, możesz zapoznać się z naszymi Bootstrap szablonami panelu admina stworzonymi za pomocą technologii Bootstrap. Te szablony Bootstrap pokażą pełną moc systemu Bootstrap 3!
W branży IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwiązań użytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propagujące wiedzę z dziedziny SMM i rozwija swoją miłość do crossfitu.