Podstawy biblioteki Twitter Bootstrap

Transkrypt

TECHNIKI WWW (WFAIS.IF-C125)
(zajęcia 02.11.2016 r.)
1) Mediaqueries - szablon podstawowy
Przykład z szablonu strony który dostosowuje się w zalezności od dostępnej szerokości
ekranu dostępny jest pod adresem:
http://koza.if.uj.edu.pl/~marcin/TWWW1617/E/index3.html
W przykładzie tym stworzona dwa pliki CSS które osbługują rózne szerokości ekranu.
Zostały włączone za pomocą linkowania i atrybutu “media”:
<link href="xstyle.css" rel="stylesheet" media="screen and (min-width:
1024px)">
<link href="mstyle.css" rel="stylesheet" media="screen and (max-width:
1023px)">
2) Twitter Bootstrap - podstawy użytkowania
Biblioteka Bootstrap (a właściwie Twitter Bootstrap) jest zestawem gotowych wzorców i
elementów CSS które służą do budowy responsywnych (RWD) stron internetowych. Adres
strony projektu to:
http://getbootstrap.com/
Obecna wersja produkcyjna to 3.3.7. Niebawem ukaż się wersja 4.0.0
a) Włączenie biblioteki do własnego kodu
Biblioteka Bootstrap składa się z kilku elementów. Aby jej użyć na własnej stronie
internetowej nalezy pobrac pakiet zawierający wszystkie niezbędne pliki:
https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-di
st.zip
Lub można dla lepszej efektywności własnej witryny dołączyć pliki z serwera CDN:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
Potrzebne są również biblioteki JavaScriptowe samego Bootstrapa oraz biblioteki jQuery:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
Druga wersja pozwala na przyspieszenie ładowania strony ponieważ odciążamy nasz
własny serwer, a po drugie możliwe że już odwiedzaliśmy stronę która kożysta z biblioteki
Bootstrap i odpowiednie pliki mamy już w pamięci “cache” naszej przeglądarki.
Przykładowy szablon strony 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>Bootstrap 101 Template</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</body>
</html>
b) Struktura siatki w Bootstrap:
Biblioteka Bootstrap ma ułatwiać tworzenia responsywnych ale stron internetowych, które
będą wyświetlać się na dowolnym urządzeniu (PC, smartphone, tv etc). Dla realizacji tego
celu Bootstrap wprowadza system tzw. “Gridu” (siatki) która dzieli obszar okna przeglądarki
na 12 kolumn i dowolną ilośc wierszy. Dzięki temu jest możliwe stworzenie czterech
niezależnych widoków na najpopularniejsze szerokości ekranu. Do tego celu
wykorzystywana jest klasa podstawowa “container”. Ma ona cztery możliwości dopasowania
się do urządzenia:
- Dla szerokości ekranu poniżej 768px, klasa “container” ustawia automatyczną
szerokość dla elementu blokowego.
-
Dla szerokości powyżej 768px, klasa “container” ustawia 750px dla elementu
blokowego.
-
Dla szerokości powyżej 992px, klasa “container” ustawia 970px dla elementu
blokowego.
-
Dla szerokości powyżej 1200px, klasa “container” ustawia kontener na 1170px dla
elementu blokowego.
Podstawowy element na stronie klasy “container” powinien wyglądać następująco:
<div class="container">
Treść strony
</div>
(Proszę za pomoca narzędzie Developerskiego wbudowanego w przeglądarkę sprawdzić czy
faktycznie przedstawione wartości szerokości elementu blokowego są prawdziwe).
Wróćmy do siatki Booststrap: system ten składa się z wierszy i kolumn w których
umieszczane są poszczególne elementy strony. Wiersz pełni rolę lokalizatora poziomego
elementów na stronie i powinien być umieszczony w następujący sposób w kontenerze:
<div class="row">
Treść strony
</div>
</div>
Natomiast jak już wspomniano Bootstrap dzieli dostępną przestrzeń kontenera w ramach
jednego wiersza na 12 kolumn. Po przekroczeniu tej liczby na wiersz kolejna kolumna
przejdzie do nowej linii. Dzięki już wspomnianym sztywnemu podziałowi na poszczególne
dostępne szerokości ekranu Bootstrap udostępnia 4 rodzaje kolumn:
-
Komputery PC (duże ekrany > 1200 px, dla tego typu urządzeń mamy dostępną
klasę: “col-l-*”, gdzie zamiast gwiazdki możemy wstawić liczbę od 1-12, która
oznacza liczbę kolumn. Kolumny te mają zadaną szerokość dla ekranów powyżej
1200 px. Natomiast jeśli szerokość będzie mniejsza to kolumny ustawią się jedna
pod drugą. Należy jednak pamiętać, że w żadnym wypadku nie należy przekroczyć w
sumie liczby 12. Tzn. że możemy mieć na stronie np. 1 kolumnę o szerokości “6”
jednostek oraz 3 kolumny o szerokości “2” jednostki. W sumie jest to 12 jednostek.
Przykładowo:
<div class="row">
<div class="col-lg-1">.col-lg-1</div>
</div>
<div class="row">
</div>
</div>
-
Laptopy powyżej 992px: klasa “col-md-*” zasada jest ta sama co poprzednio (tutaj
plusem jest to że ta klasa będzie działać również na PC).
Tablet powyżej 768px: klasa “col-sm-*”.
Smartphony poniżej 768px: klasa “col-xs-*”.
Istotnym elementem systemu siatki jest możliwość przesuwania kolumn przez
wprowadzenie tzw. “Offsetu”. Podobnie jak poprzednio dostępna jest klasa która przesuwa
daną kolumnę o żądaną jednostkę (w ilości kolumn) dla zadanej szerokości ekranu:
“col-?-offset-*”, gdzie ? oznacza wybraną szerokość ekrany (lg, md, sm, xs), a gwiazdka
liczbę kolumn o ile ma zostać przesunięta dana kolumna. Przykład:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 + .col-md-offset-4</div>
</div>
Przesuwamy druga kolumnę w stosunku do pierwszej o 4 jednostki, pamiętając cały czas że
suma nie może przekroczyć 12.
Wiersze i kolumny można zagnieżdzać. Należy przy tym pamiętać, że każdy nowy
zagnieżdzony wiersz znów ma dostępne 12 kolumn które możemy podzielić i
zagnineżdzać.
Więcej informacji na temat siatki dostępnej jest w dokumentacji Bootstrap:
http://getbootstrap.com/examples/grid/
Zadanie 1. Prosze stworzyć podstawowy szablon strony w Bootsrap i przetestować system
siatki na wszystkie rozdzielczości.
3) Twitter Bootstrap - elementy graficzne
-
Wyrównanie tekstu w paragrafie:
<p
<p
<p
<p
class="text-left">Do lewej.</p>
class="text-center">Do środka.</p>
class="text-right">Do prawej</p>
class="text-justify">Tekst wyjustowany</p>
-
Przypis w tekście:
<p>
<abbr title="(zjawisko fotoelektryczne, fotoefekt, fotoemisja)">
Efekt fotoelektryczny
</abbr>
– zjawisko fizyczne polegające na emisji elektronów z powierzchni
przedmiotu, zwane również precyzyjniej zjawiskiem fotoelektrycznym
zewnętrznym – dla odróżnienia od wewnętrznego.
</p>
-
Cytowanie w tekście:
<blockquote>
<p>
Efekt fotoelektryczny - zjawisko fizyczne polegające na emisji
elektronów z powierzchni przedmiotu, zwane również precyzyjniej
zjawiskiem fotoelektrycznym zewnętrznym – dla odróżnienia od
wewnętrznego.
</p>
</blockquote>

Podstawy biblioteki Twitter Bootstrap

Transkrypt

Podobne dokumenty

Bryza-Rura spustowa PCV 110 mm 3 mb.

ŚMIERĆ I DZIEWCZYNA

Lista 5 - IT Courses

Rękawiczki lateksowe, pudrowane, gładkie, białe, niejałowe

Wojciech TEMAT Z FILMU „ILUMINACJA”

Klasy selektorów Klasy selektorów znajdują zastosowanie wówczas

Freelance Graphics - P-.FR 1939.PRZ

CSS tips #3 – Sticky Footer - lukasz