Zaznacz stronę

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.

projektowanie stron warszawa

 

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ć:

Projektowanie stron www

 

 

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?