Bootstrap to tzw. front-end framework, czyli platforma ułatwiająca projektantom błyskawiczne przystąpienie do tworzenia interfejsu strony WWW.

Transkrypt

1 Bootstrap Bootstrap to tzw. front-end framework, czyli platforma ułatwiająca projektantom błyskawiczne przystąpienie do tworzenia interfejsu strony WWW. Przygotowanie do pracy z Bootstrapem Przede wszystkim będziemy potrzebowali samego Bootstrapa, odwiedź więc oficjalną stronę projektu pod adresem i pobierz najnowszą wersję, Otwórz archiwum i wypakuj z niego następujące foldery: - /css - /js Pobierz wymaganą w bootstrapie bibliotekę jquery i wypakuj ją do folderu js a następnie utwórz plik o nazwie index.php i umieść w nim następujący kod: System siatkowy Bootstrapa 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 kolum n tworzą prostokątną siatkę, w której rozmieszcza się treść strony. 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ą

2 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 kontenerów o płynnie zmieniających się rozmiarach. 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. W Bootstrapie kolumny są tworzone pośrednio, poprzez określenie, jak wiele spośród 12 standardowych 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 nazwie col-xs-12, gdzie liczba 12 określa liczbę kolumn do połączenia. 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. co l-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. Rozmiar SM

3 Rozmiar XS Zadanie. Wykorzystując siatkę bootstrapa wykonaj następujący układ: Rozmiar MD

4 Rozmiar SM Rozmiar XS

5 Przesuwanie kolumn Kolejną funkcją systemu siatkowego bootstrapa jest możliwość przesuwania kolumn względem siebie. Klasy służące do przemieszczenia mają następujące nazwy: col-xs-offset -* col-sm-offset-* col-md-offset-* col-lg-offset-* Przypuśćmy, że chcemy przenieść kolumnę obejmującą trzy kolumny w prawą stronę: Komponenty Bootstrapa W tej części omówimy najbardziej przydatne komponenty HTML Bootstrapa. Nagłówki stron Jeżeli chcemy użyć znacznika jako tytułu strony, wystarczy że umieścimy go w elemencie klasy page-header, odpowiedzialnej za komponent w postaci nagłówka.

6 Panele Panele służą do wyświetlania elementów w ramce. Panele są dostępne w różnych wariantach. panel-primary kolor niebieski. panel-succes kolor zielony. panel-info kolor błękitny. panel-warning kolor żółty. panel-danger kolor czerwony. Obiekt mediów Obiekt mediów służy do tworzenia komponentów zawierających różne materiały multimedialne (obraz, wideo, audio), wyrównanych do lewej albo prawej strony względem tekstu. Miniatury Wyświetlanie miniatur obrazków i filmów zrealizujemy dzięki komponentowi thumbnails. Służy on do wyświetlania podglądu obrazów i materiałów wideo w tamce, która sugeruje użytkownikowi możliwość kliknięcia miniatury. Do każdej miniatury możemy dodać podpis:

7 Zadanie. Wykorzystując komponent miniatur Bootstrapa wykonaj następujący układ: Listy Komponent o nazwie list group przydaje się do tworzenia list: Kolor pozycji na liście można zmienić przez dodanie jednej z klas list-group-item. Mają one postać: list-group-item-success kolor zielony list-group-item-info kolor błękitny list-group-item-warning kolor żółty list-group-item-danger kolor czerwony Grupy list pozwalają nie tylko na tworzenie prostych zestawień. Możemy do każdego punktu dodawać opisy:

8 Menu nawigacyjne Menu nawigacyjne to grupa odsyłaczy umieszczona w jednej linii, obok siebie, prowadzących do różnych działów serwisu. Odsyłacze możemy wyświetlić w postaci zakładek albo małych przycisków z zaokrąglonymi rogami, w Bootstrapie zwanymi pigułkami (ang. Pills). Odsyłacze w postaci zakładek tworzy się następująco: Odsyłacze w postaci przycisków tworzy się następująco: Równie dobrze możemy ułożyć przyciski pionowo; wystarczy do istniejących klas dodać klasę o nazwie nav-stacked. Zadanie Utwórz panele z zakładkami umieść w nich przykładowe dane i powiąż je z odsyłaczami w poszczególnych zakładkach. Każdy odsyłacz w komponencie nav-tabs powinien być wyposażony w atrybut data-toggle o wartości tab. To pozwala Bootstrapowi na powiązanie zdarzeń kliknięcia z odpowiednim panelem. Atrybuty href w odsyłaczach powinny mieć identyfikatory zgodne z docelowymi panelami. Przykładowy kod panela:

9 Pasek nawigacji Komponent navbar, czyli pasek nawigacji, należy do najbardziej ciekawych komponentów Bootstrapa. Najpierw należy utworzyć element blokowy i przypisać mu dwie klasy: navbar i navbar-default. Następnie wewnątrz elementu navbar należy utworzyć kolejny element klasy containerfluid. Będzie on zawierał całą treść paska nawigacji i zarazem posłuży jako kontener obejmujący dostępną szerokość strony. Jako pierwsze element w pasku wstawimy element klasy navbar-header. Służy on do umieszczania elementów identyfikujących stronę, takich jak tytuł albo logo firmy. Ponadto w elemencie navbar-header umieścimy ukryty przycisk, który będzie się pojawiał tylko na małych wyświetlaczach. Przycisk będzie rozwijał ukryte menu. Przycisk ten jest wyposażony w dwa niestandardowe atrybuty: data-toggle i data-target. Pierwszy informuje skrypt, jak zareagować na kliknięcie przycisku, drugi określa sekcje paska którą należy wtedy wyświetlić. W nagłówku znajduje się jeszcze element klasy navbar-brand, w którym znajduje się nazwa strony. Utwórzmy teraz kolejny element który będzie rodzeństwem elementu navbar-header. Temu elementowi należy przypisać dwie klasy: collapse oraz navbar-collapse. Ponieważ ten element będzie zawierał cały pasek nawigacji nadamy mu identyfikator mynavbar-content. Teraz możemy wypełnić element navbar-collapse zestawem odsyłaczy. Użyjemy w tym celu elementu ul klas nav oraz navbar-nav.

10 Aby przekształcić element li w rozwijaną listę, przypisz mu klasę dropdown. Następnie ustaw do niego listę ul klasy dropdown-menu, która będzie zawierała poszczególne odsyłacze. Formularze Aby utworzyć formularz niezbędny jest element form klasy form. Każdy opis i pole wejściowe wymaga elementu klasy form-group.

11 Zadanie Posługując się systemem siatkowym Bootstrapa zmodyfikuj powyższy formularz w taki sposób aby etykiety wyświetlały się obok pól formularza. Formularz w jednej linii Aby umieścić elementy formularza w jednej linii klasę form należy zastąpić klasą form-inline. Harmonijka Plugin collapse umożliwia uzyskanie efektu populrnie nazywanego harmonijką. W Bootstrapie efekt harmonijki powstaje dzięki umieszczeniu kilku komponentów z panelami w jednym kontenerze. Każdy panel jest podzielony na dwa elementy: klasy panel-heading oraz panel-body. Odsyłacz powinien mieć zdefiniowane trzy ważne atrybuty: data-toggle, dataparent oraz href. Oznaczają odpowiednio nazwę identyfikującą typ pluginu, identyfikator elementu klasy panel-group oraz identyfikator elementu nadrzędnego względem panelbody.

12 Pokaz slajdów Pokaz slajdów w postaci karuzeli utworzymy w Bootstrapie przy użyciu pluginu carousel. Główny kontener karuzeli powinien mieć przypisane klasy carousel oraz slide. Klasa slide służy to efektu płynnego przejścia slajdów w karuzeli. Dzięki atrybutowi data-ride pokaz uruchomi się od razu po wczytaniu strony. Każda karuzela składa się z trzech sekcji: wskaźników, treści i kontrolek. Sekcja wskaźników to uporządkowana lista klasy carousel-indicators. Liczba elementów tej listy odpowiada liczbie slajdów pokazu. Następnie należy utworzyć kontener dla wszystkich slajdów. Będzie to element klasy carousel-inner. Każdy slajd będzie zdefiniowany przez element klasy item.

13 Przykładowy kod umożliwiający utworzenie karuzeli: