Tablice_informatyczne_Bootstrap_tiboot.pdf

(139 KB) Pobierz

BOOTSTRAP

TABLICE INFORMATYCZNE •

Szymon Pendolski

1. SIATKA BOOTSTRAP

Podstawowa budowa layoutu strony

Całość elementów layoutu zawiera się w divie z klasą

.container.

Możliwe jest stosowanie do 12 kolumn (klasy

.col-*-*)

umieszczanych w rzędach z klasą

.row.

</div>

</div>

Klasa .hidden-*

Klasa

.hidden-*

służy do określania, w jakich przedziałach rozdzielczości obiekt będzie ukryty, jednocześnie pozostając

widocznym w pozostałych.

Klasa

.hidden-xs

.hidden -sm

.hidden -md

.hidden -lg

Opis

Element ukryty tylko na wyświetlaczach o szerokości < 768 px.

Element ukryty tylko na wyświetlaczach o szerokości ≥ 768 px i < 992 px.

Element ukryty tylko na wyświetlaczach o szerokości ≥ 992 px i < 1200 px.

Element ukryty tylko na wyświetlaczach o szerokości ≥ 1200 px.

Możliwe jest stosowanie jednocześnie kilku klas określających widoczność elementu:

„Płynny” layout strony

Dla layoutów o szerokości równej szerokości okna przeglądarki stosuje się klasę

.container-fluid.

</div>

Określanie elementów widocznych na wydrukach

Stosując klasy

.visible-print-*

.hidden-print,

można określić widoczność elementów na wydruku.

Klasa

.visible-print-block

.visible-print-inline

.visible-print-inline-block

Extra small

Smartfony

< 768 px

Small

Tablety

≥ 768 px

750px

.col-sm-

Medium

Urządzenia

desktopowe

≥ 992 px

970px

.col-md-

Large

Urządzenia

desktopowe

≥ 1200 px

1170px

.col-lg-

.hidden-print

Opis

Elementy blokowe nie są wyświetlane w przeglądarce,

ale są widoczne na wydruku.

Elementy liniowe nie są wyświetlane w przeglądarce,

ale są widoczne na wydruku.

Elementy liniowo-blokowe nie są wyświetlane w przeglądarce,

ale są widoczne na wydruku.

Elementy wyświetlają się w przeglądarce,

ale nie są widoczne na wydruku.

System siatki — tabela

Maksymalna szerokość elementu z klasą

.container

Prefiks klas kolumn

Sufiks klas kolumn

auto

.col-xs-

Czyszczenie float

Obiekty z klasami kolumn (col-*-*) mają własność CSS

float: left;,

co w niektórych przypadkach powoduje

nieodpowiednie wyświetlanie się tych elementów. Problem ten rozwiązuje się, stosując obiekt z klasą

.clearfix,

poprzez

umieszczenie go po serii kolumn, których suma szerokości w danym przedziale rozdzielczości wynosi 12. Klasę

.clearfix

stosuje się w parze z klasą

visible-*-block.

<div class="col-sm-6

col-md-4">...</div>

<div class="col-sm-6

col-md-4">...</div>

/*/ suma szerokości w przedziale sm to 6+6=12 /*/

<div class="clearfix

visible-sm-block"></div>

<div class="col-sm-6

col-md-4">...</div>

/*/ suma szerokości w przedziale md to 4+4+4=12 /*/

<div class="clearfix

visible-md-block"></div>

<div class="col-sm-6

col-md-4">...</div>

/*/ suma szerokości w przedziale sm to 6+6=12 /*/

<div class="clearfix

visible-sm-block"></div>

<div class="col-sm-6

col-md-4">...</div>

<div class="col-sm-6

col-md-4">...</div>

/*/ suma szerokości w przedziale sm to 6+6=12 /*/

<div class="clearfix

visible-sm-block"></div>

/*/ suma szerokości w przedziale md to 4+4+4=12 /*/

<div class="clearfix

visible-md-block"></div>

/*/ stosowanie czyszczenia nie jest konieczne z powodu zamknięcia obiektu z klasą .row /*/

</div>

Każda klasa kolumn Bootstrap może mieć końcówkę o wartości:

1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12

Wartość ta decyduje o szerokości kolumny

Auto

~62px

~81px

~97px

Szerokość kolumn

(przy 12 kolumnach w rzędzie)

Margines wewnętrzny kolumny (padding) Łącznie 30 px, 15 px na stronę (prawa, lewa)

Przykład stosowania klas kolumn

Na ekranach < 768 px kolumna (.col-xs-6) ma szerokość równą 50% szerokości layoutu.

Na ekranach ≥ 768 px kolumna (.col-sm-12) ma szerokość równą 100% szerokości layoutu.

Na ekranach ≥ 768 px kolumna (.col-md-4) ma szerokość równą ~33% szerokości layoutu.

Na ekranach ≥ 768 px kolumna (.col-lg-4) ma szerokość równą 25% szerokości layoutu.

Poniższy przykład pokazuje budowę dwukolumnowej siatki, w której szerokość kolumn wynosi 50% szerokości layoutu dla

wszystkich przedziałów rozdzielczości ≥ 768 px.

Dla rozdzielczości < 992 px (.col-sm- i

.col-xs-)

kolumny będą miały szerokość 100% szerokości layoutu. Jest

to zachowanie standardowe, występujące w momencie braku określenia zachowania kolumn w niższych rozdzielczościach.

Kolumny w przedziale ≥ 1200 px, mimo że ich szerokość nie została określona klasą

.col-lg-,

pozostaną w szerokości

połowy layoutu strony.

</div>

</div>

Wcięcia kolumn

Z wykorzystaniem klasy

.col-*-offset

można określić wcięcie/margines z lewej strony kolumny (przesunąć kolumnę

w prawo), o wartości równej dowolnej wielokrotności szerokości kolumny.

Kolumna o szerokości

z wcięciem o szerokości

<div class="col-md-6

col-md-offset-3">...</div>

</div>

W efekcie powstaje kolumna wyśrodkowana względem strony:

3+6+3 (pozostały obszar z prawej strony kolumny) = 12.

Określanie widoczności elementów siatki

Dzięki posługiwaniu się klasami Bootstrap można określać, w jakich przedziałach rozdzielczości dany element ma być

widoczny lub ukryty. Przedział określa się tak jak w przypadku rozmiaru kolumn.

Klasa .visible-*-*

Klasa

.visible-*-*

służy do określania, w jakich przedziałach rozdzielczości obiekt będzie widoczny, jednocześnie

pozostając ukrytym w pozostałych.

Klasa

.visible-xs-*

.visible-sm-*

.visible-md-*

.visible-lg-*

Opis

Element widoczny tylko na wyświetlaczach o szerokości < 768 px.

Element widoczny tylko na wyświetlaczach o szerokości ≥ 768 px i < 992 px.

Element widoczny tylko na wyświetlaczach o szerokości ≥ 992 px i < 1200 px.

Element widoczny tylko na wyświetlaczach o szerokości ≥ 1200 px.

Zmiana kolejności wyświetlania kolumn

Korzystając z pary klas

.col-*-pull-*

i .col-*-push-*, można zmienić kolejność wyświetlania sąsiadujących

ze sobą kolumn dla określonego przedziału rozdzielczości.

W klasach tych należy określić szerokość podobnie jak w przypadku klas kolumn (szerokość kolumn). Żeby sąsiadujące ze

sobą kolumny mogły zamienić się miejscami, klasom

.col-*-pull-*

.col-*-push-*

określa się wartość

równą wartości klasy kolumny (szerokości kolumny) sąsiedniej.

W poniższym przykładzie kolumny zamienią się miejscami w przedziale

md.

<div class="col-md-8

col-md-push-4">...</div>

<div class="col-md-4

col-md-pull-8">...</div>

</div>

Klasy

.visible-*-*

stosuje się wraz z własnościami CSS display o wartościach

inline, block,

inline-block.

•

.visible-*-inline

•

.visible-*-block

•

.visible-*-inline-block

Zagnieżdżanie kolumn

Kolumny można umieszczać (zagnieżdżać) w innych kolumnach. Kolumny znajdujące się wewnątrz innej muszą być

umieszczone w elemencie z klasą

.row.

Plik z chomika:

P.Kuba-47

Tablice_informatyczne_Bootstrap_tiboot.pdf

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: