getbootstrap.com
Tym razem kompletne narzędzie do projektowania. Ale po kolei. Tu też obowiązuje system siatki – tym razem jest podzielony na 12 pól. Siatka jest responsywna więc mamy możliwość zdefiniowania klas kontenerów w zależności od rozdzielczości w któej jest wyświetlana nasz strona www. I tak:
| Smartfony (<768px) |
Tablety (≥768px) |
Desktopy (≥992px) |
Desktopy (≥1200px) |
|
|---|---|---|---|---|
| Szerokość kontenera | None (auto) | 750px | 970px | 1170px |
| Prefix klasy | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Liczba kolumn | 12 | |||
| Szerkość kolumny | Auto | 60px | 78px | 95px |
| Odstęp między kol. | 30px (15px po bokach każdej kolumny) | |||
Jak widać nośniki zostały podzielone na 4 rodzaje:
1. szerokość ekranu poniżej 768 px
2. pomiędzy 768 px a 991 px
3. więcej niż 1200 px
W bardzo prosty sposób definiuje się elementy strony internetowej, które mają się nie wyświetlać na małych urządzeniach (np pasek boczny naszej strony www) – wystarczy mu nadać klasę: .col-xs-(tu wstaw szerokość)
Podstawowa siatka.
Aby uzyskać powyższy efekt, wystarczy poniższy kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <div class="row"> <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"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <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 class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> |
Ale z taką siatką nie uzyskamy w pełni responsywnej strony www. W tym celu musimy trochę więcej klas zdefiniować:
I tak na tabletach i większych urządzeniach będziemy widzieć elementy od A do E, najpierw 2 potem 3 kolumny.
Zaś na telefonie, układ będzie następujący: w pierwszej linii element A (.col-xs ma wartość 12 więc wypełni ekran) w drugiej linii B i C (suma col-xs daje 12). W kolejnym wierszu D i E (suma=12) i na koniec jeszcze dwa elementy (widoczne tylko na telefonach – bo mają jedynie klasę .col-xs) F i G.
Oto kod potrzebny do wygenerowania takiej siatki:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="row"> <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> <div class="row"> <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> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div> |
Tu w przeciwieństwie blueprint nawet nie potrzebujemy generatora siatki – proste prawda?
Najnowsze komentarze