Bootstrap 4 to takie narzędzie, które wśród developerów budzi sporo emocji. Jedni go kochają, inni nie lubią. Ja osobiście uważam, że to naprawdę fajne narzędzie, które może bardzo ułatwić pracę nad pisaniem stron internetowych. Jednak wydaje mi się, że każda osoba, nim przysiądzie do Bootstrapa, powinna choć w stopniu podstawowym ogarnąć strukturę HTML i CSS. Wówczas praca nad Bootstrapem będzie dużo przyjemniejsza.
Jeśli jeszcze nie bardzo wiesz o co chodzi z HTML i CSS, a bardzo chciałbyś zacząć i od razu z wysokiego C – czyli ze stworzeniem własnej strony internetowej, zapraszam Cię serdecznie do mojego kursu Pokaż Stronę Światu. Przeczytaj opinie o kursie i sprawdź czy jest to produkt dla Ciebie.
13 sierpnia 2018 roku startuje na blogu darmowe Wyzwanie – Poznam Bootstrapa 4 ze Strefą Kursów. Każda zapisana osoba będzie miała okazję poznać to narzędzie i wyrobić sobie opinie czy warto na nim pracować czy też nie.
Dzisiaj postanowiłam na blogu napisać wstęp do Bootstrap 4. Taki sam wstęp znajdziesz też podczas pierwszego dnia Wyzwania. Więc możesz zacząć już dziś, żeby podczas tych naszych wspólnych 5 dni mieć więcej czasu na zadania praktyczne – bo materiałów będzie naprawdę dużo.
Bootstrap – Framework czy Biblioteka?
Jeśli już trochę „siedzisz” w programowaniu Frontendu, wiesz, że Bootstrap jest Frameworkiem. Ale co to jest w ogóle Framework? Framework to taki „ułatwiacz” pracy. W przypadku Bootstrapa jest to szkielet do projektowania stron internetowych.
W przypadku innych Frameworków, może być to szkielet do tworzenia aplikacji (np. React, Angular). Framework bardzo często dostarcza programiście konkretne komponenty lub biblioteki, za pomocą tworzenie stron czy aplikacji powinno być łatwiejsze i szybsze.
Bootstrap został stworzony przez programistów Twittera. Jest on jednym z najbardziej popularnych Frameworków, który póki co, nie traci na swojej popularności. Aktualną wersją jest wersja 4.1. Jednak w Internecie możesz znaleźć masę projektów, które powstały na bazie wcześniejszych numerów.
Inne popularne Frameworki to: Bulma, Materialize, Semantic UI, Pure CSS, Zurb Foundation.
Często w przypadku Frameworków, możesz usłyszeć o pojęciu Biblioteka. Zdarza się, że ktoś ktoś określając czym jest Bootstrap, używa tych pojęć zamiennie – a to błąd.
Framework, jak już wiesz, to mocno rozbudowane narzędzie. Zdarza się, że programując w danym Frameworku, korzystasz z Biblioteki.
Biblioteka jest dużo mniejsza. Zazwyczaj dotyczy danego fragmentu kodu. Ma rozwiązać jakiś, konkretny problem. Przykładem bibliotek może być normalize.css czy reset.css.
Bootstrap 4 – wprowadzenie
Bootstrap jest bardzo rozbudowanym narzędziem. I dodatkowo posiada świetną dokumentację. Co jest dla wszystkich fantastyczną wiadomością. A to wszystko dlatego, że zupełnie nie polecam Wam uczenia się wszystkiego na pamięć. Grunt to wiedzieć, jakie funkcje Bootstrap oferuje i gdzie znaleźć informacje o tym, jak ich używać.
Całą instrukcję do Bootstrapa 4 znajdziesz tu:
https://getbootstrap.com/docs/4.0/getting-started/introduction/.
Krótka historia Bootstrapa
Bootstrap został stworzony w 2011 roku przez dwóch projektantów pracujących
w Twitterze – Marka Otto i Jacoba Throntona. Ta wersja zawierała jedynie kod
CSS i HTML. W 2012 roku pojawiła się nowa oficjalna wersja 2.0. Została ona praktyczne przepisana od nowai miała być dostosowana do smartfonów, tabletów i komputerów stacjonarnych.
Wersja 3.0 pojawiła się po 15 dużych aktualizacjach wersji 2.0, w 2013 roku. Jej głównym hasłem było „przede wszystkim mobilny, zawsze responsywny„.
Beta wersja Bootstrapa 4 pojawiła się w sierpniu 2017 roku, a oficjalna wersja w styczniu 2018.
W Kwietniu 2018 roku została opublikowana kolejna wersja Bootstrapa – 4.1.
Tutaj możesz przeczytać, jakie zmiany został wprowadzone
Bootstrap 4 oparty jest na technologii Flexbox. Jeśli jeszcze nie miałeś z nim do czynienia i nie wiesz, jak go używać bardzo serdecznie namawiam Cię do tego, abyś poznał tę technologię.
Oprócz tego, że wersja 4 korzysta z Flexboxa, Bootstrap wprowadził szereg ciekawych rozwiązań.
Bootstrap swoją popularność zawdzięcza m.in. Gridowi, czyli siatce wierszy i kolumn, których użycie gwarantuje, że projekt będzie responsywny. W wersji 4, Grid został jeszcze udoskonalony – tak naprawdę został on napisany zupełnie od nowa. Teraz opiera się właśnie na Flexboxie, we wcześniejszych wersjach opierał się on na float.
Pojawił się też komponent Cards. Twórcy połączyli kilka wcześniejszych elementów, tworząc jeden, spójny element, za pomocą którego można stworzyć wiele fajnych rzeczy.
Znacie taki problem w projektowaniu stron, gdy chcecie stworzyć boxy o takiej samej wysokości, ale z różną treścią i nijak nie możecie tego zrobić? Card group rozwiązuje ten problem.
Ważną kwestią jest też to, że najnowsza wersja Bootstrapa nie wspiera przeglądarki Internet Exploroer w wersjach starszych, czyli np. IE8, IE9.
W następnej części wpisu pokażę Ci jak podpiąć pliki Bootstrapa do naszego projektu.
Jeśli jeszcze nie dołączyłeś do Wyzwania a chciałbyś poznać lepiej Bootstrapa 4 wypełnij formularz pod tym linkiem – dołącz do Wyzwania Poznam Bootstrap 4 ze Strefą Kursów.
Tak będzie wyglądał layout, który wspólnie zakodujemy krok po kroku:
Sponsorem Wyzwania jest Strefa Kursów.
Ciał! Natka.
Dołączyłem w ostatniej chwili chyba tuż po 24 ;D Uczyłem już się Bootstrapu 3 z StrefaKursów i Udemy a obecnie w mojej pracy tworzę z wykorzystaniem 4.1. Polecam kursy na Udemy jeśli choć macie podstawową znajomość angielskiego 😉 Wyzwanie przygarnę gdyż widzę fajny efekt na www i jestem go ciekaw 😉 Pierwszą stronę stworzyłem gdy miałem 22 – 23 lata w HTML 4 .01 ale nie rozwijałem się w tym kierunku, brak dostępności materiałów i wiedzy oraz motywacji. Później 7 – 9 lat później coś próbowałem, miałem zrywy 3 tygodnie nauki aby zaprzestać na rok, dwa. Pamiętam uczyłem się z… Czytaj więcej »
0 merytoryki
Jak sama nazwa wskazuje to dopiero wstęp. Gwarantuję, że merytoryki podczas Wyzwania będzie cała masa.
Czy zakodujemy ten layout żeby działał? 🙂 Chodzi mi głównie o mechanizm po kliknięciu w menu sidebar u góry żeby scrollowało do konkretnego miejsca na onepage’u
Jak nam wystarczy czasu to tak 🙂
Proszę tu kod do smooth scroll ;D // Add smooth scrolling to all links $(„a”).on(’click’, function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== „”) { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery’s animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $(’html, body’).animate({ scrollTop: $(hash).offset().top }, 1200, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } //… Czytaj więcej »
Zawsze miałem jakieś drobne problemy z Bootstrapem i z tym Wyzwaniem wiążę duże nadzieje iż uzupełnię brakującą wiedzę. Co prawda pracuje jako junior frontend ale głównie w javascript. Projekty firmowe na razie nie wykorzystują bootstrapa ale moje własne projekty już będą.
Mam nadzieję, że Cię nie zawiodę 🙂
Ładny projekt Natka!
To będzie moje 3 wyzwanie i już nie mogę się doczekać 🙂
Cieszę się, że jesteś 🙂 I że projekt Ci się podoba. Mam wrażenie, że z każdym Wyzwaniem projekt jest coraz lepszy. Więc dzięki wyzwaniom nie tylko Wy się rozwijacie ale i ja! <3
Wprowadzenie napisane bardzo obiecująco. Do tej pory używam Bootstrapa 3.7 więc przyszła pora poznać najnowszą wersję.
Mam tylko nadzieję, że ten blog, wbrew temu, co sugeruje nazwa nie jest przeznaczony wyłącznie dla płci pięknej.
Jacku, dzięki! Broń boże nie tylko dla kobiet! 🙂 Zresztą same statystki strony pokazują, że jest połowa mężczyzn i połowa kobiet wśród odbiorców moich treści 🙂
To będzie ciekawe!
Tak jest! 🙂
Pytanie laika mam, gdzie tworzysz layout? Czy tworzenie wpierw layout a to podstawa do bootstrapa?
Cześć Kinga, mimo chęci nie bardzo rozumiem o co pytasz ;).
Layout jest stworzony poprzez napisanie tej strony i zrobienie jej screena. To nie jest makieta.
Gdy weźmiesz udział w Wyzwaniu i znasz podstawy HTML i CSS, sama napiszesz taką stronę :).
A jeśli nie znasz podstaw a chciałabyś to dość szybko ogarnąć to zapraszam do mojego kursu – da Ci solidne podstawy do dalszej nauki frontendu. https://bedeprogramistka.pl/produkt/kurs-pokaz-strone-swiatu/