Kurs Bootstrap (#1) Zrozumieć siatkę bootstrapową

Jeżeli masz ochotę zobaczyć więcej naszych filmów, podcastów i artykułów w coraz lepszej jakości, to zachęcamy do pozostawienia subskrypcji, a także do odwiedzenia prowadzonych przez nas witryn oraz do polubienia fanpage'u Pasji informatyki na Facebooku. 🔔 Subskrybuj - http://bit.ly/pasja-sub Jeśli masz ochotę wesprzeć to co robimy, to możesz: 🖐 Zostać Patronem - https://patronite.pl/pasja-informatyki ☕️ Ufundować nam wirtualną kawę - https://buycoffee.to/pasja-informatyki 👉 Fanpage na Facebooku - http://bit.ly/pasja-fb 👉 Profil Patronite - https://patronite.pl/pasja-informatyki 👉 Lista Patronów - http://pasja-informatyki.pl/patroni 👉 Donacje na blogu - http://miroslawzelent.pl/donate 👉 Harmonogram publikacji - http://bit.ly/pasja-harmonogram 👉 Kontakt z nami - http://pasja-informatyki.pl/kontakt/ 👉 Współpraca reklamowa - http://bit.ly/pasja-wspolpraca 👉 Kursy video dla technikum - http://pasja-informatyki.pl 👉 Blog informatyczny - http://miroslawzelent.pl 👉 Trenażer egzaminacyjny - http://egzamin-informatyk.pl 👉 Egzamin-E13.pl - http://egzamin-e13.pl 👉 Forum dyskusyjne - https://forum.pasja-informatyki.pl/ 👉 Witryna podcastowa - http://podcast.pasja-informatyki.pl/ 👉 Twitter MZ - https://twitter.com/MiroslawZelent 👉 Twitter DS - https://twitter.com/stelmach_damian 🕐 TIMESTAMPS (CHWILE CZASOWE): [ 00:00:12 ] Wstęp do odcinka [ 00:00:33 ] Opis plików projektu [ 00:02:18 ] Kod HTML i CSS wersji nieresponsywnej [ 00:05:02 ] Struktura witryny: intuicja tabelaryczna, bloki [ 00:06:14 ] Wersja mobilna witryny vs. RWD (responsywność) [ 00:08:17 ] Pomysł stworzenia responsywnej siatki (grida) [ 00:10:30 ] 12 możliwych kolumn w siatce [ 00:12:35 ] 5 progów szerokości (rozmiaru ekranu) [ 00:15:42 ] Co oznacza skrócony zapis szerokości? [ 00:18:36 ] Odstępy poziome między kolumnami (guttery) [ 00:19:45 ] 4 progi szerokości w Bootstrapie 3 [ 00:20:12 ] Podpięcie Bootstrapa 4 do witryny [ 00:25:52 ] Zbiorczy pojemnik siatki: .container [ 00:26:39 ] Zbiorczy pojemnik siatki: .container-fluid [ 00:28:45 ] Wiersz siatki: .row (wrapper dla kolumn) [ 00:30:52 ] Kolumny siatki: .col-sm-4 [ 00:32:21 ] Plik normalize.css [ 00:32:55 ] Responsywność obrazów: .img-fluid [ 00:35:02 ] Responsywność obrazów: własny CSS [ 00:37:42 ] Sprawdzenie działania siatki dla .col-sm-4 [ 00:39:06 ] Kolumny siatki: .col-sm-6 .col-md-4 [ 00:40:32 ] Kolumny siatki: .col-sm-6 .col-md-4 .col-xl-3 [ 00:41:18 ] Zróżnicowanie wielkości kafelków sekcji [ 00:45:42 ] Offsetowanie kolumn: .offset-md-1 [ 00:47:57 ] Usunięcie poziomych odstępów kolumn: .no-gutters [ 00:49:25 ] Przeniesienie kolumny do nowej linii: .w-100 [ 00:51:25 ] Brak contentu pomiędzy .row a .col [ 00:52:01 ] Kilka słów końcowych [ 00:53:46 ] Podsumowanie odcinka na slajdach 💾 POBIERZ PLIKI Z ODCINKA: http://miroslawzelent.pl/kurs-bootstrap/zrozumiec-siatke-grid/ 🎬 NOWE INTRO: Kuba Klonowski-Bieda (dziękujemy!) 🎵 MUZYKA: Sappheiros - Embrace https://soundcloud.com/sappheirosmusic/embrace Zajrzyjcie, facet tworzy świetną muzykę! Please, follow this awesome artist, he totally deserves it! Sappheiros na YT: http://bit.ly/2fuOcTG https://twitter.com/SappheirosMusic https://www.facebook.com/SappheirosMusic https://soundcloud.com/sappheirosmusic A Creative Commons Attribution License (CC BY) states that the material can be shared, remixed and used commercially: http://bit.ly/CCAttribution #pasjainformatyki #programowanie #kursbootstrap