Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński

Transkrypt

1 ootstrap 1/15 Bootstrap Tworzenie serwisów Web 2.0 dr inż. Robert Perliński Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 11 kwietnia 2015

2 Bootstrap 2/15 Bootstrap The most popular front-end framework for developing responsive, mobile first projects on the web. Strona projektu: Przykłady:

3 Bootstrap 3/15 O projekcie Bootstrap Różne interpretowanie właściwości przez przeglądarki może prowadzić do różnic w sposobie wyświetlania zawartości na różnych użądzeniach. Frameworki CSS pomagają w utrzymaniu spójnego, jednorodnego stylu tworzonych stron z zawartością HTML. Bootstrap jest jednym z najpopularniejszych frameworków HTML, CSS, JS. Bootstrap jest prosty w użyciu. Jest oparty na bibliotece JQuery. Początkowo tworzony przez twórców serwisu Twitter, stał się ostatecznie projektem open source. Zawiera on zbiór klas, które można stosować w elementach HTML, a także dla kodu JavaScript.

4 Bootstrap 4/15 Konteksty sytlów Oprócz podstawowych klas określających wygląd Bootstrap definiuje również klasy kontekstu stylu. Mają one podkreślić przeznaczenie elementów ale mają też wpływ na ich wygląd. Nazwy takich klas powstają przez połączenie stylu podstawowego (np. btn) z jednym z kontekstów. Dla klasy określającej wygląd przycisku można zapisać 5 klas kontekstu stylu: btn-primary, btn-success, btn-warning, btn-info, btn-danger. Klas kontektu trzeba używać razem z klasami podstawowymi: <button class="btn btn-primary">click me!</button>

5 Bootstrap 5/15 Style przycisków, konteksty stylów Wygląd przycisku podstawowego oraz z wykorzystaniem pięciu kontekstów: <button class="btn">btn</button> <button class="btn btn-primary">btn btn-primary</button> <button class="btn btn-success">btn btn-success</button> <button class="btn btn-warning">btn btn-warning</button> <button class="btn btn-info">btn btn-info</button> <button class="btn btn-danger">btn btn-danger</button>

6 Bootstrap 6/15 Wielkości elementów Styl elementu można zmienić też poprzez użycie klasy modyfikującej wielkość elementu. Wykorzystuje się nazwę klasy podstawowej oraz ciągi tekstowe: lg oraz sm. Niepodanie klasy wielkości elementu ustali jego wielkość na domyślną. <button class="btn btn-primary btn-sm">btn-primary btn-sm</button> <button class="btn btn-primary">btn-primary</button> <button class="btn btn-primary btn-lg">btn btn-lg</button> <button class="btn btn-success btn-lg">btn btn-success btn-lg</button> <button class="btn btn-warning">btn btn-warning</button> <button class="btn btn-info btn-sm">btn btn-info btn-sm</button>

7 Bootstrap 7/15 Łączenie klas kontekstu Dla klasy przycisku mamy też klasę btn-block. Przycisk taki wypełni całą dostępną powierzchnię. Klasy kontekstów można ze sąbą dowolnie łączyć otrzymując spodziewane rezultaty: <button class="btn btn-block btn-sm">btn btn-block btn-sm</button> <button class="btn btn-primary">btn btn-primary</button> <button class="btn btn-success btn-lg btn-block"> btn btn-success btn-lg btn-block</button> <button class="btn btn-warning">btn btn-warning</button> <button class="btn btn-info">btn btn-info</button> <button class="btn btn-danger btn-block">btn btn-danger btn-block</button>

8 Bootstrap 8/15 Wygląd formularzy Bootstrap zawiera style nadające wygląd formularzom. Zastosowanie tych styli pozwala na zachowanie spójności formularzy z pozostałymi elementami strony. Wykorzystując klasę.form-group łączymy etykiety z przypisanymi im kontrolkami: <div class="form-group"> <label>adres </label> <input name=" " class="form-control" /> </div> Klasa.form-control ustala szerokość wszystkich kontrolek tekstowych (<input>, <textarea>, <select>) na 100%. Pola wyboru (radio) i zaznaczenia (checkbox) razem z etykietami oznaczamy klasami radio oraz checkbox: <div class="checkbox"> <label> <input type="checkbox" /> Akceptuję warunki umowy. </label> </div>

9 Bootstrap 9/15 Układy oparte na siatce I Bootstrap udostępnia klasy stylów pozwalające tworzyć układy elementów opartych na siatce. Siatka jest zdefiniowaną elastyczną strukturą strony. W Bootstrap siatka jest 12-kolumnowa. Strona jest podzielona na 12 kolumn o równej szerokości, w których umieszcza się poszczególne elementy witryny. Dla każdego elementu na stronie określa się na ile kolumn ma się rozciągać. 6 kolumn oznacza połowę strony, 3 kolumny jedną czwartą. Szerokość elementów można zdefiniować dla czterech typów ekranów: xs (bardzo małe, telefony), sm (małe, tablety), md (średnie, monitory), lg (duże, duże monitory). Nazwy klas zaczynają się od col, następnie jest wielkość ekranu i liczba kolumn na jaką dany element będzie się rozciągał przy określonej wielkości ekranu, np.: <div class="col-xs-12">cała szerokość na xs</div>.

10 Bootstrap 10/15 Układy oparte na siatce II Umieszczając elementy na siatce można tworzyć wiersze, w ramach których funkcjonują kolumny. Wiersz tworzy się korzystając z bloku div z klasą row. Poniższy przykład tworzy 3 kolumny o szerokości odpowiedniu 3, 4 i 5 pól siatki. Jest to podział dla ekranów średniej wielkości (col-md-*). <div class="row"> <div class="col-md-3">3 kolumny</div> <div class="col-md-4">4 kolumny</div> <div class="col-md-5">5 kolumn</div> </div> Suma pól siatki w każdym wierszu powinna wynosić 12. Na pewno nie powinna przekraczać tej wartości. W przypadku zdefiniowania w wierszu mniejszej szerokości niż 12, część strony będzie pusta.

11 Bootstrap 11/15 Układy oparte na siatce - przykłady Kolumna rozciągnięta zawsze na całą szerokość sietki niezależnie od wielkości ekranu. Każda z opisujących klas ma liczbę 12: <div class="row grid-row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> Zawsze cała szerokość</div> </div> Trzy kolumny o różnych szerokościach: <div class="row grid-row"> <div class="col-xs-3">szerokość 3</div> <div class="col-xs-4">szerokość 4</div> <div class="col-xs-5">szerokość 5</div> </div>

12 Bootstrap 12/15 Układy oparte na siatce - przykłady Dwie kolumny o zmiennym zachowaniu: <div class="row grid-row"> <div class="col-xs-12 col-sm-3 col-md-8 col-lg-6"> Blok zmienny PIERWSZY</div> <div class="col-xs-12 col-sm-3 col-md-4 col-lg-6"> Blok zmienny DRUGI</div> </div> Szerokości bloków dla kolejnych wiekości ekranu: xs, sm, md i lg:

13 Bootstrap 13/15 Układy oparte na siatce - klasa hidden Wykorzystanie klasy hidden pozwala na ukrycie kolumny na ekranach o wybranej wielkośći. Poniżej blok Pierwzsy nie będzie wyświetlany na małych ekranach: <div class="row grid-row"> <div class="col-xs-6 hidden-sm col-md-3 col-lg-3 niebieski">pierwszy</div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 zielony">drugi</div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 zolty">trzeci</div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 szary">czwarty</div> </div> Szerokości bloków dla kolejnych wiekości ekranu: xs, sm i lg:

14 Bootstrap 14/15 Responsive Web Design Responsive Web Design (RWD) jest techniką projektowania strony w taki sposób, aby jej wygląd i układ automatycznie dostosowywał się do rozmiaru okna urządzenia, na którym jest wyświetlany. Strona zgodna z RWD wyświetla się dobrze na telefonach, tabletach jak i na dużych ekranach telewizorów. Bootstrap bardzo pomaga przy tworzeniu takich stron - siatka. Obsługa tej techniki odbywa się za pomocą tzw. media queries - które pozwolą rozpoznać wielkość przeglądarki i wstawić odpowiedni arkusz stylu, lub jego fragment. <meta name="viewport" content="width=device-width" /> Poniższy kod wstawia arkusz stylu jeśli szerokość okna przeglądarki będzie mniejsza lub równa 600px. <link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="arkusz600.css" />

15 Bootstrap 15/15 Wyświetlanie strony na urząniach mobilnych Jeśli nasza strona napisana jest zgodnie ze techniką RWD należy nakazać przeglądarkom, również tym w telefonach komórkowych, wyświetlanie naszej strony w rzeczywistej wielkości. Aby zapewnić prawidłowe wyświetlania i włączenie powiększania dopiero po dotknięciu dodajemy do <head>: <meta name="viewport" content="width=device-width, initial-scale=1"> Można w ogóle wyłączyć możliwość pomniejszania czy powiększania strony na urządzeniach mobilnych (user-scalable=no). Spowoduje to, że użytkownicy będą mogli tylko przesuwać stronę. Zbliża to strony użytkownie strony do apliacji mobilnej. Nie zawsze jednak jest to dobre rozwiązanie. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">