Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00056 004375 14990414 na godz. na dobę w sumie
Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! - ebook/pdf
Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! - ebook/pdf
Autor: Liczba stron: 144
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-0514-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook (-20%), audiobook).

Opanuj Bootstrapa w weekend. Responsive Web Design dla każdego! 

Bootstrap to obecnie jeden z najpopularniejszych szkieletów do tworzenia atrakcyjnych interfejsów stron WWW. Projekt zapoczątkowany przez programistów Twittera zyskał licznych zwolenników ze względu na bogactwo komponentów, świetną dokumentację i zgodność z różnymi przeglądarkami internetowymi. Nie bez znaczenia jest również fakt, że Bootstrap wspiera budowę responsywnych stron WWW.

Ta książka to rewelacyjny przewodnik, który wprowadzi Cię w świat Bootstrapa. Na samym początku poznasz system siatkowy (ang. grid), który jest fundamentem tworzenia responsywnych układów. Na kolejnych stronach znajdziesz omówienie poszczególnych komponentów tego szkieletu. Po opanowaniu podstaw przejdziesz do sposobów rozszerzania Bootstrapa, modyfikowania go oraz optymalizowania. Książka ta jest doskonałą lekturą dla wszystkich osób chcących błyskawicznie poznać i wykorzystać ten szkielet!

Wszystko co musisz wiedzieć o Bootstrapie, zebrane w jednym miejscu!

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

Darmowy fragment publikacji:

Tytuł oryginału: Jump Start Bootstrap Tłumaczenie: Piotr Cieślak ISBN: 978-83-283-0511-3 © 2015 Helion S.A. Authorized Polish translation of the English edition Jump Start Bootstrap, ISBN 9780992279431 © 2014 SitePoint Pty. Ltd. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/bootst Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/bootst.zip Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:258)ci Przedmowa............................................................................9 Kto powinien przeczyta(cid:202) t(cid:218) ksi(cid:200)(cid:285)k(cid:218)? ............................................................... 9 Przyj(cid:218)te za(cid:239)o(cid:285)enia........................................................................................... 9 Fragmenty kodu...................................................................................... 10 Wskazówki i uwagi................................................................................. 10 Materia(cid:239)y dodatkowe ................................................................................... 10 Rozdzia(cid:239) 1. Bliskie spotkanie z Bootstrapem..........................................11 Czym jest Bootstrap? .................................................................................... 11 Po co powsta(cid:239)? ....................................................................................... 11 W czym u(cid:239)atwi mi prac(cid:218)?........................................................................ 12 Historia platform CSS.................................................................................... 12 Zalety prototypowania CSS ..................................................................... 13 Pocz(cid:200)tki platformy Bootstrap .................................................................. 13 Konkurencja Bootstrapa.......................................................................... 15 Kto u(cid:285)ywa Bootstrapa? ........................................................................... 15 Ogólne za(cid:239)o(cid:285)enia projektowania responsywnego ......................................... 16 Zmiana uk(cid:239)adu strony w oparciu o rozmiar ekranu.................................. 16 Przygotowanie do pracy z Bootstrapem ........................................................ 18 Rozdzia(cid:239) 2. System siatkowy Bootstrapa................................................25 Czym jest system siatkowy?.......................................................................... 25 Tworzenie prostej siatki................................................................................ 26 Analiza przypadku: tworzenie dynamicznego uk(cid:239)adu strony.......................... 31 Projektowanie dla zwyk(cid:239)ych komputerów ............................................... 33 Projektowanie dla tabletów .................................................................... 36 Projektowanie dla smartfonów ............................................................... 38 Zagnie(cid:285)d(cid:285)anie kolumn.................................................................................. 40 Przesuwanie kolumn .................................................................................... 43 R(cid:218)czna zmiana uk(cid:239)adu siatki ......................................................................... 45 Podsumowanie............................................................................................. 45 Rozdzia(cid:239) 3. Omówienie komponentów Bootstrapa................................47 Komponenty strony ...................................................................................... 47 Nag(cid:239)ówki stron ....................................................................................... 47 Panele .................................................................................................... 50 Obiekt mediów....................................................................................... 51 Poleć książkęKup książkę 6 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Miniatury................................................................................................ 52 Listy........................................................................................................ 55 Komponenty nawigacyjne ............................................................................ 59 Menu nawigacyjne ................................................................................. 59 Pasek nawigacji...................................................................................... 61 Nawigacja okruszkowa........................................................................... 65 Eksponowanie tre(cid:258)ci..................................................................................... 66 Etykiety................................................................................................... 66 Przyciski.................................................................................................. 67 Glifikony ................................................................................................. 68 Ramki ..................................................................................................... 69 Odznaki .................................................................................................. 70 Frajda z formularzami................................................................................... 71 Prosty formularz...................................................................................... 71 Poziomy uk(cid:239)ad opisów formularzy........................................................... 73 Formularz w jednej linii........................................................................... 74 Klasy pomocnicze w formularzach........................................................... 75 Sterowanie wielko(cid:258)ci(cid:200) ............................................................................ 76 Podsumowanie............................................................................................. 77 Rozdzia(cid:239) 4. Rozszerzenia Bootstrapa: ciekawe i u(cid:285)yteczne....................79 Zwi(cid:218)kszanie funkcjonalno(cid:258)ci......................................................................... 80 Rozwijane menu..................................................................................... 80 Rozwijane listy z u(cid:285)yciem JavaScriptu ..................................................... 82 Komunikaty ............................................................................................ 86 Komunikaty z u(cid:285)yciem JavaScriptu .......................................................... 88 Przyciski.................................................................................................. 88 Przyciski z u(cid:285)yciem JavaScriptu ............................................................... 90 Zarz(cid:200)dzanie wy(cid:258)wietlaniem tre(cid:258)ci................................................................. 91 ScrollSpy................................................................................................. 91 ScrollSpy z u(cid:285)yciem JavaScriptu............................................................... 94 Zak(cid:239)adki.................................................................................................. 95 Zak(cid:239)adki z u(cid:285)yciem JavaScriptu................................................................ 97 Harmonijka............................................................................................. 97 Harmonijka z u(cid:285)yciem JavaScriptu......................................................... 100 Okienka podpowiedzi ........................................................................... 102 Okienka podpowiedzi z u(cid:285)yciem JavaScriptu......................................... 103 Dymki................................................................................................... 105 Dymki z u(cid:285)yciem JavaScriptu................................................................. 106 Ozdobniki................................................................................................... 107 Karuzela ............................................................................................... 107 Karuzela z u(cid:285)yciem JavaScriptu ............................................................. 110 Okienka modalne.................................................................................. 111 Okienka modalne z u(cid:285)yciem JavaScriptu ............................................... 113 Podsumowanie........................................................................................... 115 Poleć książkęKup książkę SPIS TRE(cid:165)CI 7 Rozdzia(cid:239) 5. Na g(cid:239)(cid:218)bok(cid:200) wod(cid:218): modyfikowanie Bootstrapa.................117 Dostosowywanie arkuszy stylów Bootstrapa............................................... 117 Dostosowywanie Bootstrapa przy u(cid:285)yciu CSS........................................ 118 Dostosowywanie Bootstrapa przy u(cid:285)yciu Less....................................... 121 Zmienne Bootstrapa i domieszki ........................................................... 121 Pliki resetuj(cid:200)ce...................................................................................... 121 Pliki g(cid:239)ówne.......................................................................................... 121 Pliki komponentów............................................................................... 122 Pliki rozszerze(cid:241) ..................................................................................... 123 Pliki pomocnicze ................................................................................... 123 Zast(cid:218)powanie stylów przy u(cid:285)yciu Less .................................................. 123 Kompilowanie plików Less.................................................................... 127 Konfigurowanie Bootstrapa przed pobraniem............................................. 127 Zapytania o media a Bootstrap................................................................... 128 Podsumowanie........................................................................................... 129 Rozdzia(cid:239) 6. Optymalizowanie Bootstrapa ............................................131 Techniki optymalizacji................................................................................. 131 Optymalizowanie CSS ........................................................................... 131 Optymalizowanie JavaScriptu ............................................................... 133 Optymalizacja grafiki ............................................................................ 135 Unikanie typowych b(cid:239)(cid:218)dów ........................................................................ 136 Kolejny krok ............................................................................................... 137 Skorowidz ..........................................................................139 Poleć książkęKup książkę 8 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Poleć książkęKup książkę Rozdzia(cid:239) System siatkowy Bootstrapa W tym rozdziale zapoznasz się z jedną z najważniejszych funkcji Bootstrapa: systemem siatkowym. Przekonasz się, na czym polega jego działanie, i zobaczysz, w jaki sposób można go wykorzystać we własnych projektach. Opracujemy też kilka prostych szablonów stron, aby poznać ów system w praktyce. Czym jest system siatkowy? System siatkowy umożliwia poprawne rozmieszczenie zawartości strony WWW. Dzieli on ekran na rzędy i kolumny, które następnie można wykorzystać do projektowania różnych układów treści. Po zdefiniowaniu rzędów i kolumn możemy zadecydować o rozlokowaniu poszczególnych elementów HTML. System siatkowy dzieli ekran na kolumny — do 12 w każdym rzędzie. Szerokość kolumny jest uzależniona od wielkości ekranu, na którym jest wyświetlana strona. Właśnie to sprawia, że system siatkowy Bootstrapa jest responsywny, bo kolumny dynamicznie dopasowują się do każdej zmiany okna przeglądarki. Liczba rzędów może być dowolna; wszystko zale- ży od wymogów projektu. Przecięcia rzędów i kolumn tworzą prostokątną siatkę, w której rozmieszcza się treść strony. W ramach przykładu na rysunku 2.1 utworzyłem jeden rząd elementów i za pomocą sys- temu siatkowego podzieliłem go na 12 kolumn. Tło każdej z kolumn zmieniłem tak, by wyraźnie się od siebie różniły. Dodatkowo każda kolumna jest oznaczona kolejną liczbą. Poleć książkęKup książkę 26 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Rysunek 2.1. Przyk(cid:239)adowa strona przedstawiaj(cid:200)ca 12-kolumnow(cid:200) siatk(cid:218) Tworzenie prostej siatki W tej części rozdziału zaprojektujemy szablon naszej pierwszej strony internetowej opierającej się na systemie siatkowym Bootstrapa. Za punkt wyjścia potraktujemy projekt w folderze bootstrap_przyklady, opracowany w poprzednim rozdziale. Skopiuj wszystkie pliki znajdujące się w folderze bootstrap_przyklady, a następnie utwórz nowy folder o nazwie rozdzial_2 i wklej do niego skopiowane pliki. Otwórz w edytorze dokument index.html, zmień tytuł strony na System siatkowy Bootstrapa i usuń znacznik h1 wraz z treścią. Powinieneś otrzymać dokument HTML o następującej zawartości: !DOCTYPE html html lang= en head meta charset= utf-8 meta http-equiv= X-UA-Compatible content= IE=edge meta name= viewport content= width=device-width, initial-scale=1 title System siatkowy Bootstrapa /title link rel= stylesheet type= text/css href= css/bootstrap.css !--[if lt IE 9] script src= https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js /script script src= https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js /script ![endif]-- /head body !-- Tre(cid:258)(cid:202) strony -- script src= js/jquery.js /script script src= js/bootstrap.js /script /body /html Poleć książkęKup książkę SYSTEM SIATKOWY BOOTSTRAPA 27 Autorzy Bootstrapa zalecają umieszczenie wszystkich rzędów i kolumn w kontenerze, któ- ry gwarantuje ich poprawne wyrównanie i zachowanie odstępów. W Bootstrapie istnieją dwie klasy kontenerów: container oraz container-fluid. Ta pierwsza służy do tworzenia kontenerów o stałej szerokości w oknie przeglądarki, zaś druga umożliwia tworzenie kon- tenerów o płynnie zmieniających się rozmiarach. Kontener o stałej szerokości jest zapro- jektowany tak, by znajdował się na środku ekranu, w równych odstępach od obydwu bo- ków. Z tego względu warto zadbać o zawijanie tekstu i innych treści w obrębie kontenera. W kolejnym przykładzie utworzymy kontener klasy container, czyli o stałej szerokości. Dodaj poniższy kod do strony HTML: div class= container /div Następnie wewnątrz kontenera utworzymy rząd. Po zdefiniowaniu rzędu będziemy mogli przystąpić do tworzenia kolumn. Do tworzenia rzędów siatki w Bootstrapie służy klasa row: div class= container div class= row /div /div Rzędów można utworzyć dowolnie dużo, ale wszystkie muszą zostać umieszczone w kon- tenerze. W celu uzyskania optymalnych efektów zaleca się utworzenie jednego kontenera ze wszystkimi rzędami. W Bootstrapie kolumny są tworzone pośrednio, poprzez określenie, jak wiele spośród 12 stan- dardowych kolumn chciałbyś połączyć. Przypuśćmy, że potrzebujesz tylko jednej dużej kolumny, rozciągającej się na całą szerokość okna. Taka kolumna powinna obejmować wszystkie dwanaście kolumn Bootstrapa. Aby uzyskać taki efekt, należy użyć klasy o na- zwie col-xs-12, gdzie liczba 12 określa liczbę kolumn do połączenia. (Na razie nie zasta- nawiaj się nad członem xs w nazwie klasy; wrócimy do niego później). Na tej samej zasadzie aby utworzyć w danym rzędzie dwie kolumny o równej szerokości, należy użyć klasy col-xs-6 do zdefiniowania każdej z nich. Taka składnia oznacza dla Boot- strapa, że potrzebujemy dwóch kolumn, obejmujących po sześć kolumn Bootstrapa każda: div class= container div class= row div class= col-xs-6 h4 Kolumna 1. /h4 /div div class= col-xs-6 h4 Kolumna 2. /h4 /div /div /div Poleć książkęKup książkę 28 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Efekt został pokazany na rysunku 2.2. Rysunek 2.2. T(cid:218) siatk(cid:218) tworz(cid:200) dwie kolumny o równej szeroko(cid:258)ci Aby lepiej wyodrębnić kolumny, zmieńmy kolor każdej z nich. Utwórzmy nowy plik CSS o nazwie styles.css w folderze ze stylami CSS projektu. Podana nazwa pliku nie jest obliga- toryjna; możesz ją zmienić, jak tylko chcesz. Dołączmy ten plik do dokumentu index.html przy użyciu znacznika link w elemencie head: link href= css/styles.css rel= stylesheet Zdefiniujmy teraz w tym pliku reguły CSS, dzięki którym każda z kolumn będzie miała in- ny kolor: .col1{ background: #5C7080; } .col2{ background: #6BC0FF; } Musimy jeszcze dodać klasy col1 i col2 do kodu, aby kolumny zostały wyświetlone zgod- nie ze zdefiniowanymi dla nich regułami (rysunek 2.3). Po modyfikacji ten fragment kodu wygląda tak: div class= container div class= row div class= col-xs-6 col1 h4 Kolumna 1. /h4 /div div class= col-xs-6 col2 h4 Kolumna 2. /h4 /div /div /div Poleć książkęKup książkę SYSTEM SIATKOWY BOOTSTRAPA 29 Rysunek 2.3. Siatka z dwóch kolumn z ró(cid:285)nymi kolorami t(cid:239)a Wróćmy do członu xs w nazwie klasy col-xs-6. Co on oznacza? W Bootstrapie są cztery rodzaje prefiksów klas służących do tworzenia kolumn przeznaczonych dla ekranów o różnych wielkościach: 1. col-xs dla bardzo małych wyświetlaczy (szerokość ekranu 768 pikseli), 2. col-sm dla małych wyświetlaczy (szerokość ekranu ≥ 768 pikseli), 3. col-md dla średnich wyświetlaczy (szerokość ekranu ≥ 992 piksele), 4. col-lg dla dużych wyświetlaczy (szerokość ekranu ≥ 1200 pikseli). Jeśli używamy klasy col-xs-12, to znaczy, że na bardzo małych ekranach dany element powinien obejmować wszystkie 12 dostępnych kolumn Bootstrapa. A co z większymi wy- świetlaczami? W powyższym kodzie nie określiliśmy, w jaki sposób div powinien się za- chowywać na dużych ekranach. Na szczęście Bootstrap automatycznie stosuje dla nich szablon zdefiniowany dla najmniejszego rodzaju ekranu. Z tego względu nasz div będzie obejmował 12 kolumn niezależnie od wielkości wyświetlacza. Przeanalizujmy poniższy kod: div class= container div class= row div class= col-xs-12 col-sm-6 col1 h4 Kolumna 1. /h4 /div div class= col-xs-12 col-sm-6 col2 h4 Kolumna 2. /h4 /div /div /div Tym razem określiliśmy, by klasa col-xs-12 była używana na bardzo małych wyświetla- czach, a klasa col-sm-6 na tych trochę większych. Z tego względu na bardzo małych wyświe- tlaczach każda kolumna będzie obejmowała wszystkie 12 kolumn Bootstrapa, co przełoży się na ułożenie kolumn jedna nad drugą (rysunek 2.4). Na trochę większych ekranach każ- da kolumna będzie jednak zajmować tylko sześć kolumn Bootstrapa i w rezultacie zostaną one wyświetlone obok siebie, jak na rysunku 2.3. Poleć książkęKup książkę 30 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Rysunek 2.4. Uk(cid:239)ad strony na bardzo ma(cid:239)ym wy(cid:258)wietlaczu Rozbudujmy dotychczasowy kod o drugi rząd kolumn. Aby to zrobić, po prostu powtórzymy kod pierwszego rzędu. Gotowy kod dla siatki składającej się z dwóch rzędów i (łącznie) czterech kolumn wygląda następująco: div class= container div class= row div class= col-xs-12 col-sm-6 col1 h4 Kolumna 1. /h4 /div div class= col-xs-12 col-sm-6 col2 h4 Kolumna 2. /h4 /div /div div class= row div class= col-xs-12 col-sm-6 col3 h4 Kolumna 3. /h4 /div div class= col-xs-12 col-sm-6 col4 h4 Kolumna 4. /h4 /div /div /div Dodałem ponadto dwie nowe klasy, col3 i col4, aby nadać nowym kolumnom inne kolory: .col3{ background: #E8AA4C; } .col4{ background: #FF384E; } A oto efekt, pokazany na rysunku 2.5. Poleć książkęKup książkę SYSTEM SIATKOWY BOOTSTRAPA 31 Rysunek 2.5. Dwa rz(cid:218)dy, cztery kolumny Analiza przypadku: tworzenie dynamicznego uk(cid:239)adu strony Przyjrzyjmy się, w jaki sposób można wykorzystać system siatkowy w praktyce, i zapro- jektujmy dynamiczny układ strony, który będzie się dopasowywał do wielkości urządze- nia, na jakim jest wyświetlany. Przypuśćmy, że chcemy utworzyć szablon bloga przy użyciu systemu siatkowego Boot- strapa. Wiemy, że na ekranie zwykłego komputera szkielet strony powinien się wyświetlać jak na rysunku 2.6. Rysunek 2.6. Szablon projektowanej strony ogl(cid:200)dany na ekranie zwyk(cid:239)ego komputera Poleć książkęKup książkę 32 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Jak widać, szablon zawiera nagłówek rozciągający się na całą szerokość strony. Pod nim zaś mamy trzykolumnowy układ z wpisami z bloga. Jeśli szablon w tej postaci wyświetlimy na tablecie (w układzie pionowym), to strona będzie sprawiała wrażenie bardzo „ciasnej”. Z tego względu siatka strony dla tabletu została zmodyfikowana tak jak na rysunku 2.7. Rysunek 2.7. Szablon projektowanej strony ogl(cid:200)dany na ekranie tabletu W tej wersji projektu nagłówek wygląda tak samo jak na ekranie zwykłego komputera. Wpisy poniżej zostały jednak wyświetlone w układzie dwukolumnowym zamiast dotych- czasowych trzech kolumn. Przypuśćmy, że tę samą stronę chcemy wyświetlić na urządze- niu mobilnym. Szablon takiego wariantu został pokazany na rysunku 2.8. Rysunek 2.8. Szablon projektowanej strony ogl(cid:200)dany na ekranie smartfona Poleć książkęKup książkę SYSTEM SIATKOWY BOOTSTRAPA 33 Innymi słowy na potrzeby urządzeń mobilnych układ dwukolumnowy został przekształ- cony w jednokolumnowy. Zastanówmy się, w jaki sposób osiągnąć taki efekt w kodzie. Projektowanie dla zwyk(cid:239)ych komputerów Jak już wspomniałem, za wyświetlacze średniej wielkości przyjęto w Bootstrapie takie, któ- rych szerokość wynosi ponad 992 piksele. Ekrany komputerów stacjonarnych na ogół są większe. Z tego względu do rozmieszczenia kolumn na typowych ekranach będziemy uży- wali prefiksu col-md. Ten sam układ będzie powielony w przypadku wyświetlaczy szer- szych niż 1200 pikseli; w przypadku tego konkretnego projektu możemy więc pominąć klasy z prefiksem col-lg, bo nie będą one miały wpływu na wygląd strony. Utwórz nowy dokument HTML i nadaj mu nazwę blog.html. Wklej do dokumentu pod- stawową strukturę HTML ze wstępnie skonfigurowanym Bootstrapem, zgodnie ze wska- zówkami z poprzedniego rozdziału. Zmień zawartość znacznika title na Mój pierwszy blog w Bootstrapie i usuń z treści znacznik h1 . Kod dokumentu blog.html powinien te- raz wyglądać następująco: !DOCTYPE html html lang= pl head meta charset= utf-8 meta http-equiv= X-UA-Compatible content= IE=edge meta name= viewport content= width=device-width, initial-scale=1 title Mój pierwszy blog w Bootstrapie /title link rel= stylesheet type= text/css href= css/bootstrap.css !--[if lt IE 9] script src= https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js /script script src= https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js /script ![endif]-- /head body !-- miejsce na tre(cid:258)(cid:202) dokumentu -- script src= js/jquery.js /script script src= js/bootstrap.js /script /body /html Najpierw musimy utworzyć kontener na treść bloga. Użyjmy kontenera o stałej szerokości, utworzonego przy użyciu klasy container. div class= container /div Poleć książkęKup książkę 34 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Następnie w makiecie wariantu dla zwykłych monitorów mamy nagłówek. Utwórzmy rząd z pojedynczą kolumną obejmującą wszystkie 12 kolumn Bootstrapa. div class= container div class= row div class= col-md-12 text-center h1 Mój pierwszy blog w Bootstrapie /h1 /div /div /div W powyższym kodzie użyłem klasy pomocniczej text-center Bootstrapa, aby wyśrodko- wać tekst w kolumnie. Nagłówek jest gotowy. Teraz zajmijmy się trzykolumnowym układem treści, w którym mają być publikowane wpisy z bloga. Ponieważ mamy do dyspozycji w sumie 12 kolumn Bootstrapa, każda z ko- lumn bloga powinna obejmować po cztery takie kolumny. W rezultacie otrzymamy trzy kolumny o jednakowej szerokości. Utwórzmy nowy rząd i zdefiniujmy kolumny za pomo- cą klasy col-md-4. div class= container div class= row div class= col-md-12 text-center h1 Mój pierwszy blog w Bootstrapie /h1 /div /div hr div class= row div class= col-md-4 /div div class= col-md-4 /div div class= col-md-4 /div /div /div Pomiędzy dwoma rzędami wstawiłem znacznik hr , aby utworzyć poziomą linię pod na- główkiem. Teraz możemy wypełnić kolumny tymczasową treścią. Użyjemy w tym celu znaczników h3 oraz p i skorzystamy z fragmentu tekstu lorem ipsum. div class= container div class= row div class= col-md-12 text-center Poleć książkęKup książkę SYSTEM SIATKOWY BOOTSTRAPA 35 h1 Mój pierwszy blog w Bootstrapie /h1 /div /div hr div class= row div class= col-md-4 h3 Tytu(cid:239) wpisu 1. /h3 p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod (cid:180)tempor incididunt ut labore et dolore magna aliqua. /p /div div class= col-md-4 h3 Tytu(cid:239) wpisu 2. /h3 p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod (cid:180)tempor incididunt ut labore et dolore magna aliqua. /p /div div class= col-md-4 h3 Tytu(cid:239) wpisu 3. /h3 p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod (cid:180)tempor incididunt ut labore et dolore magna aliqua. /p /div /div /div Teraz dokument blog.html powinien wyglądać tak jak na rysunku 2.9. Rysunek 2.9. Nasz niekompletny na razie blog, w wersji dla zwyk(cid:239)ych monitorów Zgodnie z makietą dla zwykłych monitorów powinniśmy dodać jeszcze trzy kolumny z wpi- sami z bloga. Tym razem jednak nie utworzymy na te trzy kolumny osobnego rzędu, lecz dołączymy je bezpośrednio do istniejącego rzędu, w dotychczasowym kodzie. Być może zastanawiasz się, w jaki sposób zmieszczą się w jednym rzędzie 24 kolumny Bootstrapa (sześć kolumn bloga po cztery kolumny Bootstrapa), skoro Bootstrap obsługuje ich tylko 12 na rząd. Rzeczywiście tak jest, ale jeśli spróbujemy przekroczyć tę wartość, reszta kolumn zostanie przeniesiona do nowego rzędu. Ten nowy rząd ponownie będzie miał szerokość 12 kolumn Bootstrapa. W ten sposób możemy umieścić wszystkie kolumny z wpisami z bloga w jednym elemencie klasy row. Poleć książkęKup książkę 36 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Uzupełnijmy więc istniejący kod o trzy nowe kolumny. div class= container div class= row div class= col-md-12 text-center h1 Mój pierwszy blog w Bootstrapie /h1 /div /div hr div class= row div class= col-md-4 h3 Tytu(cid:239) wpisu 1. /h3 p Lorem ipsum dolor sit amet ... /p /div div class= col-md-4 h3 Tytu(cid:239) wpisu 2. /h3 p Lorem ipsum dolor sit amet ... /p /div div class= col-md-4 h3 Tytu(cid:239) wpisu 3. /h3 p Lorem ipsum dolor sit amet ... /p /div div class= col-md-4 h3 Tytu(cid:239) wpisu 4. /h3 p Lorem ipsum dolor sit amet ... /p /div div class= col-md-4 h3 Tytu(cid:239) wpisu 5. /h3 p Lorem ipsum dolor sit amet ... /p /div div class= col-md-4 h3 Tytu(cid:239) wpisu 6. /h3 p Lorem ipsum dolor sit amet ... /p /div /div /div Wreszcie udało się nam osiągnąć w HTML efekt zakładany we wstępnej makiecie strony w wersji dla zwykłych monitorów (patrz rysunek 2.10). Projektowanie dla tabletów Zmodyfikujmy teraz kod tak, by osiągnąć rezultat, jaki zakładaliśmy w makiecie strony dla tabletów. W odróżnieniu od większości zwykłych monitorów na tabletach można praco- wać w dwóch układach: portretowym (pionowym) i krajobrazowym (poziomym). Układ poziomy w przypadku tabletu jest traktowany jako wyświetlacz średniej wielkości (szero- kość ekranu ≥ 992 piksele), a sprawę z takim ekranem mamy w zasadzie załatwioną dzięki zastosowaniu klas col-md-*. Mamy jednak do opracowania układ pionowy, który jest odpo- wiednikiem małego wyświetlacza. Ten układ możemy obsłużyć za pomocą klas col-sm-*. Poleć książkęKup książkę SYSTEM SIATKOWY BOOTSTRAPA 37 Rysunek 2.10. Kompletny uk(cid:239)ad bloga w wersji dla zwyk(cid:239)ych monitorów Ponieważ w przypadku mniejszych wyświetlaczy zależy nam na uzyskaniu struktury dwu- kolumnowej, musimy wymusić taki układ, w którym każda nasza kolumna obejmuje sześć kolumn Bootstrapa. W ten sposób otrzymamy dwie kolumny w każdym rzędzie (2 razy 6 kolumn Bootstrapa = 12 kolumn Bootstrapa). Mamy wprawdzie tylko jeden rząd, ale to nie szkodzi: po zajęciu wszystkich 12 kolumn Bootstrapa następne kolumny bloga zostaną przeniesione do nowego rzędu i tak dalej. Rozszerzmy zatem kod przeznaczony dla zwykłych monitorów o kolejną klasę, col-sm-6. div class= container div class= row div class= col-md-12 text-center h1 Mój pierwszy blog w Bootstrapie /h1 /div /div hr div class= row div class= col-md-4 col-sm-6 h3 Tytu(cid:239) wpisu 1. /h3 p Lorem ipsum dolor sit amet ... /p /div div class= col-md-4 col-sm-6 h3 Tytu(cid:239) wpisu 2. /h3 p Lorem ipsum dolor sit amet ... /p /div div class= col-md-4 col-sm-6 h3 Tytu(cid:239) wpisu 3. /h3 p Lorem ipsum dolor sit amet ... /p /div div class= col-md-4 col-sm-6 h3 Tytu(cid:239) wpisu 4. /h3 p Lorem ipsum dolor sit amet ... /p /div div class= col-md-4 col-sm-6 Poleć książkęKup książkę 38 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! h3 Tytu(cid:239) wpisu 5. /h3 p Lorem ipsum dolor sit amet ... /p /div div class= col-md-4 col-sm-6 h3 Tytu(cid:239) wpisu 6. /h3 p Lorem ipsum dolor sit amet ... /p /div /div /div Jak widać na rysunku 2.11, otrzymaliśmy w ten sposób dwa różne układy strony dla tabletów: trzykolumnowy w trybie krajobrazowym i dwukolumnowy w trybie portretowym. Rysunek 2.11. Uk(cid:239)ad dwukolumnowy dla tabletów Projektowanie dla smartfonów Tak jak tablety, smartfony również można użytkować pionowo albo poziomo. W przy- padku większości smartfonów zarówno tryb krajobrazowy, jak i portretowy klasyfikuje się do bardzo małych wyświetlaczy (szerokość ekranu 768 pikseli). W przypadku większych smartfonów, niekiedy zwanych phabletami, takich jak Samsung Galaxy Note 3 i Motorola Droid Razr HD, tryb poziomy można potraktować jako wyświetlacz mały. Jeśli chodzi o układ strony dla urządzeń mobilnych, to musi on zawierać tylko jedną ko- lumnę. Mam nadzieję, że wiesz już, jak to osiągnąć na podstawie istniejącego kodu: trzeba użyć klas z prefiksem col-xs, dla bardzo małych wyświetlaczy. W tym przypadku zależy Poleć książkęKup książkę nam na tym, by każdy wpis na blogu zajmował wszystkie 12 kolumn Bootstrapa. W ten sposób w jednym rzędzie będzie się znajdował tylko jeden wpis. To sugeruje użycie klasy col-xs-12, dodajmy ją więc do istniejącego kodu. SYSTEM SIATKOWY BOOTSTRAPA 39 div class= container div class= row div class= col-md-12 text-center h1 Mój pierwszy blog w Bootstrapie /h1 /div /div hr div class= row div class= col-md-4 col-sm-6 col-xs-12 h3 Tytu(cid:239) wpisu 1. /h3 p Lorem ipsum dolor sit amet ... /p /div div class= col-md-4 col-sm-6 col-xs-12 h3 Tytu(cid:239) wpisu 2. /h3 p Lorem ipsum dolor sit amet ... /p /div div class= col-md-4 col-sm-6 col-xs-12 h3 Tytu(cid:239) wpisu 3. /h3 p Lorem ipsum dolor sit amet ... /p /div div class= col-md-4 col-sm-6 col-xs-12 h3 Tytu(cid:239) wpisu 4. /h3 p Lorem ipsum dolor sit amet ... /p /div div class= col-md-4 col-sm-6 col-xs-12 h3 Tytu(cid:239) wpisu 5. /h3 p Lorem ipsum dolor sit amet ... /p /div div class= col-md-4 col-sm-6 col-xs-12 h3 Tytu(cid:239) wpisu 6. /h3 p Lorem ipsum dolor sit amet ... /p /div /div /div W ten sposób otrzymaliśmy kompletną stronę HTML, responsywną i możliwą do obejrze- nia na dowolnym wyświetlaczu — układ jednokolumnowy został pokazany na rysunku 2.12. Tak przygotowany dokument możesz umieścić w jednej z darmowych usług przechowy- wania danych w chmurze, na przykład Google Drive1, i przetestować go na prawdziwym tablecie albo smartfonie. Ewentualnie po prostu ręcznie przeskaluj okno przeglądarki i przyj- rzyj się zmianom w układzie strony. Mam nadzieję, że analiza tego przykładu ułatwi Ci zrozumienie systemu siatkowego Bootstrapa. 1 https://drive.google.com/ Poleć książkęKup książkę 40 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Rysunek 2.12. Jednokolumnowy uk(cid:239)ad dla ma(cid:239)ych wy(cid:258)wietlaczy Zagnie(cid:285)d(cid:285)anie kolumn Nowy zestaw 12 kolumn Bootstrapa można utworzyć w obrębie dowolnej kolumny istniejące- go układu. Taki efekt można osiągnąć poprzez wstawienie nowego elementu row w istnie- jącej kolumnie i wypełnienie tego elementu nowymi kolumnami. Ponieważ jest to nowy rząd, czyli element typu row, dowolna umieszczona w nim kolumna może obejmować 12 ko- lumn Bootstrapa, ale szerokość całego rzędu będzie ograniczona szerokością elementu, w którym został on umieszczony. Przyjrzyjmy się temu na przykładzie. Utwórz nowy dokument HTML i zapisz go pod na- zwą nested.html. Wypełnij dokument kodem z inicjalizacją Bootstrapa zgodnie ze wska- zówkami podanymi w poprzednim rozdziale. Ponadto dołącz do dokumentu plik CSS styles.css, utworzony wcześniej w tym rozdziale. Kod nowego dokumentu HTML powinien wyglądać następująco: !DOCTYPE html html lang= pl head meta charset= utf-8 Poleć książkęKup książkę SYSTEM SIATKOWY BOOTSTRAPA 41 meta http-equiv= X-UA-Compatible content= IE=edge meta name= viewport content= width=device-width, initial-scale=1 title Moja pierwsza strona w Bootstrapie /title link rel= stylesheet type= text/css href= css/bootstrap.css link rel= stylesheet type= text/css href= css/styles.css !--[if lt IE 9] script src= https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js /script script src= https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js /script ![endif]-- /head body script src= js/jquery.js /script script src= js/bootstrap.js /script /body /html Utwórzmy kontener, a w nim rząd: div class= container div class= row /div /div Przypuśćmy, że zamierzamy obsługiwać wyświetlacze o średniej wielkości, chcemy więc opracować układ dwukolumnowy. Powinieneś już wiedzieć, że w celu utworzenia takiego układu każda z naszych kolumn powinna obejmować sześć kolumn Bootstrapa. Takie ko- lumny można zaś uzyskać przy użyciu klasy col-md-6. Dodajmy zatem dwie kolumny do istniejącego kodu: div class= container div class= row div class= col-md-6 col1 h3 Kolumna 1. /h3 /div div class= col-md-6 col2 h3 Kolumna 2. /h3 /div /div /div W tym kodzie skorzystaliśmy ponadto z dwóch klas zdefiniowanych w pliku styles.css, a mia- nowicie col1 i col2. Te dwie klasy umożliwią zmianę koloru tła kolumn. Na tym etapie doku- ment HTML powinien wyglądać tak jak na zrzucie ekranu na rysunku 2.13. Poleć książkęKup książkę 42 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Rysunek 2.13. Prosty uk(cid:239)ad dwukolumnowy Weźmy teraz pierwszą kolumnę (Kolumna 1) i umieśćmy w niej nowy rząd: div class= container div class= row div class= col-md-6 col1 h3 Kolumna 1. /h3 !-- pocz(cid:200)tek zagnie(cid:285)d(cid:285)ania -- div class= row /div /div div class= col-md-6 col2 h3 Kolumna 2. /h3 /div /div /div Mamy nowy rząd, w którym ponownie możemy umieścić dwie kolumny: div class= container div class= row div class= col-md-6 col1 h3 Kolumna 1. /h3 !-- pocz(cid:200)tek zagnie(cid:285)d(cid:285)ania -- div class= row div class= col-md-6 col3 h3 Kolumna 4. /h3 /div div class= col-md-6 col4 h3 Kolumna 5. /h3 /div Poleć książkęKup książkę SYSTEM SIATKOWY BOOTSTRAPA 43 /div /div div class= col-md-6 col2 h3 Kolumna 2. /h3 /div /div /div Jak widać na rysunku 2.14, dwie nowe kolumny są umieszczone poniżej pierwszej. Do zmiany koloru ich tła użyłem klas col3 oraz col4 z pliku styles.css. Rysunek 2.14. Zagnie(cid:285)d(cid:285)ony uk(cid:239)ad dwukolumnowy Możliwość zagnieżdżania kolumn bardzo się przydaje przy projektowaniu stron o skom- plikowanej strukturze. W jednej z otrzymanych wyżej wewnętrznych kolumn można by- łoby wstawić nowy rząd i utworzyć w nim kolejny zestaw kolumn. Taki proces można po- wtarzać aż do osiągnięcia planowanego efektu. Przesuwanie kolumn Kolejną niezwykle przydatną funkcją systemu siatkowego Bootstrapa jest możliwość przesu- wania kolumn względem siebie. Zwykle służy ona do zwiększenia odstępu po lewej stronie kolumny. Jeśli przykładowo chcesz utworzyć kolumnę znajdującą się w odległości trzech kolumn Bootstrapa od lewej krawędzi okna, możesz skorzystać ze wspomnianej funkcji. Klasy służące do przemieszczania mają następujące nazwy: (cid:132) col-xs-offset-* (cid:132) col-sm-offset-* Poleć książkęKup książkę 44 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! (cid:132) col-md-offset-* (cid:132) col-lg-offset-* Przypuśćmy, że chcemy przenieść kolumnę obejmującą trzy kolumny Bootstrapa w prawą stronę. W przypadku stron dla bardzo małych wyświetlaczy można w tym celu użyć klasy col-xs-offset-3 , na przykład tak: div class= row div class= col-xs-6 col-xs-offset-3 col1 h1 Witaj, adepcie! /h1 /div /div Powyższy kod spowoduje utworzenie kolumny obejmującej sześć kolumn Bootstrapa, przesuniętej o trzy kolumny Bootstrapa w prawo, jak na rysunku 2.15. Rysunek 2.15. Przesuni(cid:218)ta kolumna Wy(cid:258)rodkowanie kolumny Zauwa(cid:285), (cid:285)e po lewej i po prawej stronie przyk(cid:239)adowej kolumny zosta(cid:239)y odst(cid:218)py o szeroko(cid:258)ci trzech kolumn Bootstrapa. To jeden z najlepszych sposobów na wy(cid:258)rodkowanie w oknie przegl(cid:200)- darki kolumny o szeroko(cid:258)ci wynosz(cid:200)cej 50 szeroko(cid:258)ci okna. Poleć książkęKup książkę SYSTEM SIATKOWY BOOTSTRAPA 45 R(cid:218)czna zmiana uk(cid:239)adu siatki Istnieje możliwość zmiany układu kolumn niezależnie od tego, w jakiej kolejności zostały one ujęte w kodzie. Jeśli najpierw napiszesz kod dla kolumny col-md-9, a potem dla ko- lumny col-md-3, to możesz bez trudu zamienić miejscami ich kolejność przy wyświetlaniu w przeglądarce. Można to zrobić za pomocą klas pull i push Bootstrapa. Do przenoszenia kolumn w lewą albo w prawą stronę o określoną liczbę pozycji służą kla- sy takie jak col-xs-pull-* i col-xs-push-*. Na przykład: div class= row div class= col-xs-9 col-xs-push-3 h1 Kolumna przesuni(cid:218)ta w prawo /h1 /div div class= col-xs-3 col-xs-pull-9 h1 Kolumna przesuni(cid:218)ta w lewo /h1 /div /div Efekt powyższego kodu jest taki, że kolumna col-xs-9 jest przesunięta o trzy kolumny w prawo („popchnięta”). Z kolei kolumna o nazwie col-xs-3 została przesunięta o dzie- więć kolumn w lewo („pociągnięta”). W rezultacie na ekranie zostaną one wyświetlone tak, jakby były zamienione miejscami. Istnieje kilka wariantów klas push i pull, dostosowanych do wyświetlaczy o różnych wiel- kościach: (cid:132) col-xs-pull-* oraz col-xs-push-* dla bardzo małych wyświetlaczy, (cid:132) col-sm-pull-* oraz col-sm-push-* dla małych wyświetlaczy, (cid:132) col-md-pull-* oraz col-md-push-* dla średnich wyświetlaczy, (cid:132) col-lg-pull-* oraz col-lg-push-* dla dużych wyświetlaczy. Znak * można zastąpić liczbą całkowitą od 1 do 12, w zależności od tego, na jak dużą odle- głość (w kolumnach) chcesz „popchnąć” (push) albo „pociągnąć” (pull) daną kolumnę. Podsumowanie Za pomocą systemu siatkowego Bootstrapa można opracować niemal dowolną stronę in- ternetową. Prawidłowo użyty, system ten umożliwia projektowanie eleganckich, respon- sywnych stron WWW, możliwych do wyświetlenia na prawie każdym ekranie, niezależnie od jego rozmiarów. Funkcje takie jak zagnieżdżanie, przesuwanie i zmiana kolejności ko- lumn sprawiają, że system ten jest bardzo elastyczny w obsłudze. Szczegółową dokumentację systemu siatkowego Bootstrapa znajdziesz pod adresem http:// getbootstrap.com/css/#grid. Poleć książkęKup książkę 46 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Poleć książkęKup książkę Skorowidz Adaptive Images, 135 animacja, 13 audio, 51 A B biblioteka jQuery, Patrz: jQuery blog, 31 Bootstrap domieszki, 121 historia, 13, 14 instalowanie, 18 konfigurowanie przed pobraniem, 127 modyfikacja domyślnych stylów, 117, 118 Less, 121, 123 optymalizacja, 131 grafika, 135 JavaScript, 133, 134 wersja, 14 zmienna, 121 Bootstrap Colorpicker, 138 Bootstrap Image Gallery, 138 Bootstrap Lightbox, 138 Bootstrap Markdown, 138 Bootstrap Notifications, 138 Bootstrap Star Rating, 138 C Chrome, 22 CSS, 13, 28, 117 klasa, Patrz: klasa CSS optymalizacja, 131, 133 czytnik ekranu, 121 D drzewo DOM, 95 dymek, 105 z JavaScript, 106 ekran rozmiar, 16, 21, 29, 33, 36, 38 układ krajobrazowy, 36, 38 pionowy, Patrz: ekran układ portretowy portretowy, 36, 38 poziomy, Patrz: ekran układ krajobrazowy E F element a, 57, 67, 80 atrybut, 80 button, 67 head, 28 HTML5, 21 input, 67 li, 57, 64, 96 row, 40 ul, 57, 63, 80 etykieta, 66 film, Patrz: wideo formularz, 64, 71, 122 pole wejściowe, 71, 76 wyboru, Patrz: pole wyboru tworzenie, 71, 73, 74 front-end framework, 11 FuelUX, 137 G glifikona, 68, 81 usuwanie, 132 Google Drive, 39 H harmonijka, 97, 98, 99, 101 z JavaScript, 100 Poleć książkęKup książkę 140 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! I interfejs dotykowy, 16 Internet Explorer 8, 20, 21, 110, 136 Jasny Bootstrap, 138 JavaScript, 12, 79 jQuery, 20, 90 J K karuzela, Patrz: pokaz slajdów klasa, Patrz też: komponent .clearfix, 123 .hidden-sm, 123 .hide, 123 .img-circle, 121 .img-responsive, 121 .visible-lg, 123 active, 59, 88, 89, 96 alert, 86 alert-dismissable, 87 alert-link, 88 badge, Patrz: odznaka btn, 12, 55, 67, 89, 120 btn-block, 68 btn-default, 89 btn-group, 89 btn-lg, 89 btn-primary, 12, 55, 120 caption, 54 caret, 81 carousel, 108 carousel-caption, 109 carousel-control, 109 carousel-inner, 109 checkbox, 75 collapse, 63, 99 col-lg, 29, 33 col-md, 29, 33, 36 col-sm, 29, 36 col-xs, 29, 38 col-xs-6, 27, 29 col-xs-12, 27, 29 col-xs-pull, 45 col-xs-push, 45 container-fluid, 61 CSS, 12 dropdown, 65, 82 dropdown-menu, 65 fade, 96 form, 71 form-control, 71 form-group, 71 form-horizontal, 73 form-inline, 75 glyphicon, 68 has-error, 76 has-success, 76 has-warning, 76 img-responsive, 135 in, 99 input-lg, 76 input-sm, 76 label, 66 label-default, 66 list-group, 57 list-group-item, 57, 58 list-group-item-heading, 58 list-group-item-text, 58 media, 51 media-heading, 51 modal, 111 modal-body, 112 modal-dialog, 111 modal-title, 112 nav, 59, 63 navbar, 61 navbar-brand, 62 navbar-collapse, 63 navbar-default, 61 navbar-header, 61 navbar-nav, 63 navbar-toggle, 62 nav-pills, 60 nav-stacked, 60 nav-tabs, 59 panel-body, 98 panel-collapse, 99 panel-danger, 50 panel-default, 50 panel-group, 98 panel-heading, 98 panel-info, 50 panel-primary, 50 panel-success, 50 Poleć książkęKup książkę panel-title, 98 panel-warning, 50 pull, 45 pull-left, 51 pull-right, 51 push, 45 radio, 75 row, 27, 35 slide, 108 tab-content, 96 tab-pane, 96 tooltipButton, 102 well, 69, 75 klasaLthumbnail, 54 kod JavaScript, 12 kolumna kolor, 28 przesuwanie, 43 szerokość, 27 wyśrodkowanie, 44 zagnieżdżanie, 40 komentarz, 47, 51 komponent, 47, Patrz też: klasa automatycznie ukrywany, 70 badge, 57 glyphicon, Patrz: glifikona label, Patrz: etykieta list group, 55 media-body, 51 navbar, Patrz: pasek nawigacji nav-tabs, 95 tab-content, 95 thumbnails, 52 well, 69 komunikat, 86, 102, 111, 123 odsyłacz, 88 ukrywanie, 86 w konsoli, 83 zamykanie, 86, 87 kontener container, 27 container-fluid, 27 div, 48 Kovařík Jan, 69 L Less, Patrz: metajęzyk Less lista, 55 SKOROWIDZ 141 kolor pozycji, 58 odsyłaczy, 57 rozwijana, 65, 83, Patrz też: menu rozwijane M media queries, Patrz: zapytanie o media menu, 47 nawigacyjne, 59 rozwijane, 13, 64, 80, 82 metajęzyk Less, 12, 118 kompilacja plików, 127 Sass, 12, 118 metajęzyk Less, 121 metoda alert, 88 button, 90 carousel, 110 collapse, 100, 101 dropdown, 82, 83 modal, 113 popover, 106 scrollspy, 94 tooltip, 103, 104 minifikacja, 19, 132, 134 multimedia, 51 N nagłówek, 47, 122 strony, 47 nawigacja okruszkowa, 59, 65 Node.js, 127 O obiekt mediów, 51 obraz, 51 miniatura, 52 odznaka, 70 okienko modalne, 107, 111, 112, 123 wielkość, 113 z JavaScript, 113 okienko podpowiedzi, 102, 104 inicjowanie, 102 z JavaScript, 103 Otto Mark, 13 Poleć książkęKup książkę 142 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! P panel, 50 kolor, 50 płynne zanikanie, 96 z zakładkami, 95 pasek nawigacji, 59, 61, 64, 80, 91 pigułka, 59 pill, Patrz: pigułka platforma Blueprint, 12 Foundation, 15 Gumby, 15 YUI, 12 plik alerts.less, 122 badges.less, 122 bootstrap.css, 19 bootstrap.js, 134 bootstrap.less, 132 bootstrap.min.css, 19 bootstrap.min.js, 132, 134 breadcrumbs.less, 122 button-groups.less, 122 buttons.less, 122 carousel.less, 123 close.less, 123 code.less, 122 component-animations.less, 122 dropdowns.less, 122 forms.less, 122 glyphicons.less, 122 grid.less, 122 input-groups.less, 122 jquery.js, 20 jumbotron.less, 122 labels.less, 122 Less, 121, 122, 123, 127 list-group.less, 122 media.less, 122 mixins.less, 121 modals.less, 123 navbar.less, 122 navs.less, 122 normalize.less, 121 pager.less, 122 pagination.less, 122 panels.less, 122 popovers.less, 123 print.less, 121 progress-bars.less, 122 responsive-utilities.less, 123 scaffolding.less, 121 tables.less, 122 thumbnails.less, 122 tooltip.less, 123 type.less, 122 utilities.less, 123 variables.less, 121 wells.less, 123 plugin, Patrz: rozszerzenie pokaz slajdów, 107 Internet Explorer, 110 sekcja, 108 z JavaScript, 110 pole wyboru, 75, 89, 122 projektowanie responsywne, 16 przeglądarka, 121 Google Chrome, Patrz: Chrome przełącznik, 75, 122 przycisk, 12, 47, 59, 67, 122 aktywny, 88 działanie, 68 kolor, 67, 90 nieaktywny, 88, 90 niebieski, 12 okienko podpowiedzi, Patrz: okienko podpowiedzi przełączanie za pomoca jQuery, 90 rozmiar, 68 w stanie loading, 90 wyświetlenie informacji tekstowej, 90, 91 z JavaScript, 90 zestaw, 89 zgrupowanie, 90 Pure, 15 R ramka, 69 rozszerzenie, 79, 91, 94 Bootstrap Colorpicker, 138 Bootstrap Image Gallery, 138 Bootstrap Lightbox, 138 Bootstrap Markdown, 138 Bootstrap Notifications, 138 Bootstrap Star Rating, 138 carousel, 107 Poleć książkęKup książkę SKOROWIDZ 143 collapse, Patrz: harmonijka dymek, Patrz: dymek FuelUX, 137 Jasny Bootstrap, 138 modal, 107, 111 popover, Patrz: dymek zakładka, Patrz: zakładka S Sass, Patrz: metajęzyk Sass ScrollSpy, 91, 92, 94 Semantic UI, 15 silnik renderujący, 21 skrypt html5shiv.js, 21, 22 respond.js, 21, 22 smartfon, 38 strona responsywna, 16 system siatkowy, 12, 25, 31, 122 wewnątrz elementu formularza, 73 szablon bloga, 31 tablet, 36 Thronton Jacob, 13 TimThumb, 135 tryb zgodności, 21 tweet, 51 wideo, 51 miniatura, 52 właściwość CSS3, 21 T W Y Yahoo User Interface Library, Patrz: platforma YUI Z zakładka, 95 z JavaScript, 97 zapytanie o media, 128, 129 zdarzenie activate.bs.scrollspy, 95 close.bs.alert, 88 closed.bs.alert, 88 hidden, 83 hidden.bs.collapse, 101 hidden.bs.modal, 114 hide, 83 hide.bs.collapse, 101 hide.bs.modal, 114 loaded.bs.modal, 114 show, 83 show.bs.collapse, 101 show.bs.dropdown, 86 show.bs.modal, 114 show.bs.tab, 97 shown, 83 shown.bs.collapse, 101 shown.bs.modal, 114 shown.bs.tab, 97 slid.bs.carousel, 110 slide.bs.carousel, 110 znacznik a, 51, 57, 67, 80 h1, 48, 122 h3, 34 hr, 34 link, 28 meta, 20 p, 34 (cid:191) żądanie Ajax, 86 Poleć książkęKup książkę 144 Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! Poleć książkęKup książkę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start!
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ą: