Sie 07
Wstęp do Bootstrap 4

Wstęp do Bootstrap 4

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

http://blog.getbootstrap.com/2018/04/09/bootstrap-4-1/.

 

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.

Bootstrap 4 cardsBootstrap 4 cards

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.

Bootstrap 4 Card Group

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:

Bootstrap 4 projekt layoutuSponsorem Wyzwania jest Strefa Kursów.

Ciał! Natka.

16
Dodaj komentarz

avatar
8 Comment threads
8 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
9 Comment authors
ZiemowitKasztanJuliaSewerynKaja Recent comment authors
  Subscribe  
najnowszy najstarszy oceniany
Powiadom o
Ziemowit
Gość
Ziemowit

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 »

Kasztan
Gość
Kasztan

0 merytoryki

Julia
Gość
Julia

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

Ziemowit
Gość
Ziemowit

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 »

Seweryn
Gość

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ą.

Kaja
Gość
Kaja

Ładny projekt Natka!
To będzie moje 3 wyzwanie i już nie mogę się doczekać 🙂

Jacek
Gość
Jacek

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.

Michał
Gość
Michał

To będzie ciekawe!

Kinga
Gość
Kinga

Pytanie laika mam, gdzie tworzysz layout? Czy tworzenie wpierw layout a to podstawa do bootstrapa?