tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...projektowanie responsywne ma na...
TRANSCRIPT
![Page 1: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/1.jpg)
Tworzenie interfejsów stron WWWDominika Różycka
![Page 2: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/2.jpg)
Plan prezentacji
1. O Bootstrapie w kilku słowach,
2. Krótka historia Bootstrapa,
3. Projektowanie Responsywne,
4. Przygotowanie do pracy z Bootstrapem
5. Dołączanie Bootstrapa do dokumentu HTML,
6. Zapewnienie zgodności ze wszystkimi rodzajami urządzeo,
7. System siatkowy Bootstrapa• Tworzenie prostej siatki,
![Page 3: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/3.jpg)
Plan prezentacji
8. Tworzenie prostego panelu,
9. Miniatury,
10.Pasek nawigacji,
11.Inne przykłady.
![Page 4: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/4.jpg)
O Bootstrapie w kilku słowach
![Page 5: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/5.jpg)
Czym jest Bootstrap?
To tzw. front-end framework, czyli platforma ułatwiająca projektantom błyskawiczne przystąpienie do tworzenia interfejsu strony WWW.
Jaka jest idea Bootstrapa?
![Page 6: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/6.jpg)
Dlaczego Bootstrap?
Współczesne strony powinny byd:
• Elastyczne,
• Eleganckie,
• Szybkie,
Oraz poprawnie działad na urządzeniach mobilnych.
![Page 7: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/7.jpg)
Co nam daje?
• Szeroka gama gotowych komponentów HTML,
• Elastyczna struktura dzięki systemowi siatkowemu.
![Page 8: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/8.jpg)
Przykład
<a href="http://google.pl"
class="btn btn-primary">Odwiedź
Google</a>
![Page 9: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/9.jpg)
Komu się przyda?
• Nieocenione usługi oddaje zwłaszcza początkującym projektantom, ponieważ:
– Zawiły kod CSS i JavaScript jest już gotowy –wystarczy trochę kodu HTML, aby zacząd ich używad.
• Bardziej zaawansowani mogą skorzystad z wielu zaawansowanych możliwości ułatwiających dostosowanie Bootstrapa do konkretnych potrzeb.
![Page 10: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/10.jpg)
Krótka historia Bootstrapa
![Page 11: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/11.jpg)
Jak to się zaczęło?
Wszystko zaczęło się od powstania platform takich jak YUI (Yahoo User Interface Library) oraz Blueprint, które zyskały popularnośd w latach 2006-2007.
Ich przykładowe narzędzia:
• Resetowanie stylów CSS,
• Fonty,
• Siatki
• Animacje,
• Przyciski, itd.
![Page 12: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/12.jpg)
Co było potem?
Po tych prostych platformach przyszedł czas na nową generację zaawansowanych narzędzi, takich jak Bootstrap, w których kod CSS został uzupełniony JavaScriptem.
Bootstrap został opracowany w 2011 roku przez dwóch projektantów WWW z Twittera.
Po 15 dużych aktualizacjach w 2013 roku pojawił się Bootstrap 3, pod hasłem „przede wszystkim mobilny, zawsze responsywny”.
Ważne: Bootstrap 3 nie jest zgodny ze starszymi wersjami.
![Page 13: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/13.jpg)
Kto konkuruje z Bootstrapem
• Platforma Foundation firmy Zurb,
• Semantic UI,
• Platforma Gumby,
• Pure firmy Yahoo,
• OpenDesk,
• Riot Designs,
• 20Jeans,
• Red Antler,
• Uberflip.
![Page 14: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/14.jpg)
Projektowanie responsywne
![Page 15: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/15.jpg)
Projektowanie responsywne
Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego środowiska. Dzięki temu autor może utworzyd jeden projekt działający na dowolnym urządzeniu: smartfonie, tablecie, integralnym telewizorze lub zwykłym komputerze.
Strony responsywne mają płynną, elastyczną strukturę. Dopasowują się do rozmiaru ekranu, na którym są wyświetlane, a ponadto są kompatybilne z interfejsami dotykowymi urządzeo mobilnych.
![Page 16: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/16.jpg)
Przykład – układ strony na ekranie zwykłego komputera
![Page 17: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/17.jpg)
Przykład – szablon dostosowany do ekranu tabletu
![Page 18: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/18.jpg)
Przykład – szablon strony dostosowany do ekranu smartfona
![Page 19: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/19.jpg)
Przygotowanie do pracy z Bootstrapem
![Page 20: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/20.jpg)
http://getbootstrap.com
![Page 21: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/21.jpg)
Przygotowywanie do pracy z Bootstrapem
Otwieramy archiwum i wypakowujemy następujące foldery:
• /css
• /fonts
• /js
Tworzymy folder roboczy i nadajemy mu dowolną nazwę.
Przenosimy rozpakowane foldery do folderu roboczego.
![Page 22: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/22.jpg)
Przygotowywanie do pracy z Bootstrapem
Potrzebny będzie nam edytor HTML, w którym utworzymy plik o nazwie index.html i następującym wstępnym kodzie:<!DOCTYPE html>
<html lang="pl">
<head>
<title>Mój Bootstrap</title>
</head>
<body>
</body>
</html>
![Page 23: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/23.jpg)
Katalog z Bootstrapem
![Page 24: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/24.jpg)
Dołączanie Bootstrapa do dokumentu HTML
![Page 25: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/25.jpg)
Dołączanie Bootstrapa do dokumentu HTML
W folderze /css znajduje się plik o nazwie bootstrap.css – jest to główny plik CSS Bootstrapa.
We wspomnianym folderze znajduje się też plik bootstrap.min.css – jest to „odchudzona” wersja bootstrap.css.
<link rel="stylesheet"
type="text/css"
href="css/bootstrap.css">
![Page 26: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/26.jpg)
Dołączanie Bootstrapa do dokumentu HTML
Bootstrap wymaga biblioteki jQuery do działania komponentów JavaScript.
Pobierzemy ją ze strony jquery.com.
Jeśli pobierzemy jQuery w wersji 2, IE8+ nie będzie działad poprawnie, gdyż programiści odcięli się kompletnie od IE8.
<script
src="js/jquery.js"></script>
![Page 27: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/27.jpg)
Dołączanie Bootstrapa do dokumentu HTML
Dołączamy teraz plik JavaScript z kodem Bootstrapa:
<script
src="js/bootstrap.js"></script>
![Page 28: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/28.jpg)
Dołączanie Bootstrapa do dokumentu HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Mój Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<script src="js/jquery.js"></script>
<scriptsrc="js/bootstrap.js"></script>
</body>
</html>
![Page 29: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/29.jpg)
Zapewnienie zgodności ze wszystkimi rodzajami urządzeo
![Page 30: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/30.jpg)
Znaki Unicode
Aby zapewnid zgodnośd Bootstrapa ze wszystkimi rodzajami urządzeo, trzeba dodatkowo umieścid w pliku kilka znaczników meta:
• Musimy poinformowad przeglądarkę, że nasza strona internetowa zawiera znaki z zestawu Unicode (znacznie obszerniejszego niż zestaw znaków ASCII:
<meta charset="utf-8">
![Page 31: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/31.jpg)
Najnowszy silnik renderujący dla IE
• Czasem IE działa w trybie zgodności. Zastosowanie poniższego kodu wymusi na IE zastosowanie najnowszego silnika renderującegodo wyświetlania strony:
<meta http-equiv="X-UA-
Compatible" content="IE=edge">
![Page 32: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/32.jpg)
Wypełnianie całego okna przeglądarki
• Zadbajmy o to, by strona wypełniła całą przestrzeo dostępną w oknie przeglądarki, niezależnie od tego czy mamy do czynienia z tabletem, smartfonem, czy ekranem komputera. Poinformujemy przeglądarkę, by przeskalowała projektowaną stronę do rozmiarów okna:
<meta name"viewport"
content="width=device-width,
initial-scale=1">
![Page 33: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/33.jpg)
Zapewnienie obsługi HTML5 i CSS3 dla Internet Explorer 8
• Jako, że Bootstrap 3 korzysta z wielu elementów HTML5 oraz właściwości CSS3, które nie funkcjonują poprawnie w IE8, musimy dodad kilka skryptów, które zostaną wywołane tylko w przypadku otwarcia strony w IE8 i pośrednio zapewnią obsługę HTML5 i CSS3, te skrypty to:
– html5shiv.js,
– respond.js.
![Page 34: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/34.jpg)
Zapewnienie obsługi HTML5 i CSS3 dla Internet Explorer 8
<!--[if lt IE 9]>
<script
src="https://oss.maxcdn.com/libs/h
tml5shiv/3.7.0/html5shiv.js">
</script>
<script
src="https://oss.maxcdn.com/libs/r
espond.js/1.4.2/respond.min.js">
</script>
<![endif]-->
![Page 35: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/35.jpg)
System siatkowy Bootstrapa
![Page 36: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/36.jpg)
System siatkowy
Umożliwia poprawne rozmieszczenie zawartości strony WWW.
Dzieli on ekran na rzędy i kolumny, które następnie można wykorzystad do projektowania różnych układów treści.
Po zdefiniowaniu rzędów i kolumn możemy zdecydowad o rozlokowaniu poszczególnych elementów HTML.
![Page 37: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/37.jpg)
System siatkowy
System siatkowy dzieli ekran na kolumny – do 12 w każdym rzędzie, a szerokośd kolumny jest uzależniona od wielkości ekranu, na którym jest wyświetlana strona.
![Page 38: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/38.jpg)
Tworzenie prostej siatki
![Page 39: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/39.jpg)
Kontener
Twórcy Bootstrapa zalecają umieszczenie wszystkich rzędów i kolumn w kontenetrze, który gwarantuje:
• poprawne wyrównanie i
• zachowanie odstępów.
W Bootstrapie istnieją dwie klasy kontenerów:
• container,
• container-fluid.
![Page 40: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/40.jpg)
Kontener
• container – służy do tworzenia kontenerów o stałej szerokości w oknie przeglądarki, zaprojektowany tak, aby znajdował się na środku ekranu, w równych odstępach od obydwu boków
• container-fluid – umożliwia tworzenie kontenerów o płynnie zmieniających się rozmiarach
![Page 41: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/41.jpg)
Rząd w kontenerze
Do tworzenia rzędu służy klasa row.
<div class="container">
<div class="row">
</div>
</div>
![Page 42: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/42.jpg)
Tworzenie kolumn w rzędzie
W Bootstrapie kolumny tworzone są pośrednio – poprzez określenie jak wiele spośród standardowych 12 kolumn chciałbyś połączyd.
![Page 43: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/43.jpg)
<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>
![Page 44: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/44.jpg)
Efekt utworzenia kolumn w rzędach
![Page 45: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/45.jpg)
Prefiksy klas w Bootstrapie
• col-xs dla bardzo małych wyświetlaczy (szerokośd ekranu < 768px),
• col-sm dla małych wyświetlaczy (szerkośdekranu ≥ 768px),
• col-md dla średnich wyświetlaczy (szerokośd ekranu ≥ 992px),
• col-lg dla dużych wyświetlaczy (szerokośd ekranu ≥ 1200px).
![Page 46: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/46.jpg)
<div class="col-xs-12 col-sm-6
col-md-3">
![Page 47: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/47.jpg)
Tworzenie prostego panelu
![Page 48: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/48.jpg)
Nagłówek w kontenerze
<div class="page-header">
<h1>Panel</h1>
</div>
![Page 49: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/49.jpg)
Podtytuł, obok głównego tytułu strony
<div class="page-header">
<h1>Panel. <small>Podtytuł
nagłówka</small></h1>
</div>
![Page 50: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/50.jpg)
Prosty panel<div class="panel panel-default">
<div class="panel-heading">
UWAGA
</div>
<div class="panel-body">
Treść...
</div>
<div class="panel-footer">
<a href="#" class="btn btn-danger btn-sm">Zgoda</a>
<a href="#" class="btn btn-default btn-sm">Odmowa</a>
</div>
</div>
![Page 51: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/51.jpg)
Prosty panel
![Page 52: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/52.jpg)
Warianty kolorystyczne panelów
• panel-primary daje kolor ciemnoniebieski,
• panel-success daje kolor zielony,
• panel-info daje kolor błękitny,
• panel-warning daje kolor żółty,
• panel-danger daje kolor czerwony.
![Page 53: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/53.jpg)
![Page 54: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/54.jpg)
Miniatury
![Page 55: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/55.jpg)
thumbnail
Służy do wyświetlania podglądu obrazów i materiałów wideo w ramce, która sugeruje użytkownikowi możliwośd kliknięcia miniatury.
Komponent ten pozwala ponadto uzyskad elegancki efekt wyróżnienia miniatury po wskazaniu jej kursorem myszy: kolor jej ramki zmienia się wtedy na niebieski.
![Page 56: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/56.jpg)
Tworzenie miniatury
<a href="#" class="thumbnail">
<img
src="ścieżka/do/obrazka">
</a>
![Page 57: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/57.jpg)
Miniatury z podpisami
<a href="#" class="thumbnail">
<img
src="ścieżka/do/obrazka">
<div class="caption">
<h3>Podpis</h3>
</div>
</a>
![Page 58: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/58.jpg)
Miniatury z podpisem
![Page 59: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/59.jpg)
Opis pod miniaturą
Pod każdą miniaturą można umieścid dodatkowy opis oraz przyciski z napisem Więcej, odwołujące się np. do różnych stron serwisu.
W tym celu musimy najpierw zastąpid element a klasy thumbnail analogicznym elementem typu div.
Dopiero wtedy można dodad rozszerzony opis przy użyciu znacznika <p> umieszczonego wewnątrz elementu div klasy caption.
![Page 60: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/60.jpg)
Opis pod miniaturą
<div class="thumbnail">
<img
src="images/sitepoint.png">
<div class="caption">
<h3>SitePoint</h3>
<p>Opis...</p>
<p><a href="#" class="btn
btn-primary">Więcej</a></p>
</div>
</div>
![Page 61: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/61.jpg)
Opis pod miniaturą
![Page 62: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/62.jpg)
Pasek nawigacji
![Page 63: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/63.jpg)
Pasek nawigacji
Komponent navbar należy do najciekawszych komponentów Bootstrapa.
Z Bootstrapem tworzenie pasków nawigacji jest bardzo proste – dzięki licznym opcjom można projektowad wiele różnych responsy-wnych pasków nawigacji, które automatycznie zmniejszają się przy wyświetlaniu na małym ekranie.
![Page 64: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/64.jpg)
Tworzenie paska nawigacji
Tworzymy element div i przypisujemy mu dwie klasy: navbar i navbar-default .
<div class="navbar navbar-
default">
</div>
![Page 65: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/65.jpg)
Tworzenie paska nawigacji
Wewnątrz elementu klasy navbar tworzymy kolejny div klasy container-fluid.
<div class="navbar navbar-
default">
<div class="container-fluid">
</div>
</div>
![Page 66: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/66.jpg)
Tworzenie paska nawigacji
Wstawiamy div klasy navbar-header.
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar-content">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Moja Firma</a>
</div>
![Page 67: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/67.jpg)
Tworzenie paska nawigacji
![Page 68: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/68.jpg)
Tworzenie paska nawigacji
Tworzymy kolejny div, który jest rodzeostwem elementu navbar-header –temu elementowi przypisujemy dwie klasy: collapse i navbar-collapse.
Musimy pamiętad o nadaniu odpowiedniego id, którego użyliśmy wcześniej.
<div class="collapse navbar-
collapse" id="mynavbar-content">
</div>
![Page 69: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/69.jpg)
Tworzenie paska nawigacji
Wewnątrz nowoutworzonego div`adodajemy listę odsyłaczy:
<ul>
<li><a href="#">Główna</li>
<li><a href="#">O Nas</li>
<li><a href="#">Cennik</li>
<li><a href="#">Kontakt</li>
</ul>
![Page 70: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/70.jpg)
![Page 71: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/71.jpg)
Inne przykłady
![Page 72: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/72.jpg)
![Page 73: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/73.jpg)
![Page 74: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/74.jpg)
![Page 75: Tworzenie interfejsów stron grochu/wiki/lib/exe/fetch.php?media=...Projektowanie responsywne Ma na celu tworzenie stron internetowych, które dynamicznie adaptują się do swojego](https://reader033.vdocuments.mx/reader033/viewer/2022052816/60aea6b87a0d3c6ff014d811/html5/thumbnails/75.jpg)
Dziękuję za uwagę