Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00570 007447 13273165 na godz. na dobę w sumie
Tablice informatyczne. Bootstrap - ebook/pdf
Tablice informatyczne. Bootstrap - ebook/pdf
Autor: Liczba stron: 8
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-4574-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> strony mobilne
Porównaj ceny (książka, ebook (-20%), audiobook).

Szybkie tworzenie wygodnych stron WWW? Z Bootstrapem masz to jak w banku!

Projektowanie stron WWW to bardzo przyjemne zajęcie… pod warunkiem, że nie musisz wszystkiego zaczynać od podstaw i mozolnie formatować krok po kroku. Skoro gotowe rozwiązania już istnieją, nie musisz samodzielnie odkrywać Ameryki. Wystarczy Ci dobry framework: Bootstrap. Jeśli jednak chcesz posługiwać się nim na co dzień i robić to efektywnie, zawsze powinieneś mieć pod ręką tablice z najważniejszymi poleceniami, ułożonymi w sensownej kolejności. Czyli właśnie tak, jak na naszych tablicach.

Ta publikacja na kilku zaledwie stronach mieści polecenia i fragmenty kodu potrzebne do pracy z Bootstrapem. Znajdziesz tu informacje o layoucie strony, właściwościach siatki i wprowadzaniu określonej typografii. Zorientujesz się, jak wykorzystać polecenia dotyczące nawigacji, list rozwijanych i etykiet. Dowiesz się, jak umieszczać na stronie formularze i elementy multimedialne, a także jak używać wtyczki Collapse. A najważniejsze, że te tablice możesz mieć zawsze pod ręką!

Bootstrap - łatwiejszy niż myślisz!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

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 class= container div class= row div class= col-*-* ... /div /div div class= row div class= col-*-* ... /div /div /div „Płynny” layout strony Dla layoutów o szerokości równej szerokości okna przeglądarki stosuje się klasę .container-fluid. div class= container-fluid div class= row div class= col-*-* ... /div /div /div System siatki — tabela Extra small Smartfony 768 px Small Tablety ≥ 768 px auto 750px Medium Urządzenia desktopowe ≥ 992 px 970px Large Urządzenia desktopowe ≥ 1200 px 1170px .col-md- .col-sm- .col-xs- 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 ~81px ~97px .col-lg- Maksymalna szerokość elementu z klasą .container Prefiks klas kolumn Sufiks klas kolumn Szerokość kolumn (przy 12 kolumnach w rzędzie) Margines wewnętrzny kolumny (padding) Łącznie 30 px, 15 px na stronę (prawa, lewa) ~62px Przykład stosowania klas kolumn div class= col-xs-6 col-sm-12 col-md-4 col-lg-3 ... /div 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 class= container div class= row div class= col-md-6 ... /div /div div class= row div class= col-md-6 ... /div /div /div 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. 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. Klasa .visible-xs-* .visible-sm-* .visible-md-* .visible-lg-* Klasy .visible-*-* stosuje się wraz z własnościami CSS display o wartościach inline, block, inline-block. 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. • .visible-*-inline • .visible-*-block • .visible-*-inline-block 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: div class= visible-sm-block visible-md-block ... /div div class= hidden-xs hidden-lg ... /div Określanie elementów widocznych na wydrukach Stosując klasy .visible-print-* i .hidden-print, można określić widoczność elementów na wydruku. Klasa .visible-print-block Elementy blokowe nie są wyświetlane w przeglądarce, ale są widoczne na wydruku. Opis .visible-print-inline .visible-print-inline-block 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. .hidden-print Czyszczenie float Elementy wyświetlają się w przeglądarce, ale nie są widoczne na wydruku. 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= container div class= row 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 div class= col-sm-6 ... /div div class= col-sm-6 ... /div /*/ stosowanie czyszczenia nie jest konieczne z powodu zamknięcia obiektu z klasą .row /*/ /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 6 z wcięciem o szerokości 3: div class= row 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. 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-* i .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= row div class= col-md-8 col-md-push-4 ... /div div class= col-md-4 col-md-pull-8 ... /div /div 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. BOOTSTRAPTABLICE INFORMATYCZNE • Szymon Pendolski
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Tablice informatyczne. Bootstrap
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: