Nowości w Bootstrap 4

autor: Robert

9 października 2015

W poprzednim wpisie napisałem o różnicach pomiędzy Bootstrap 3 a Bootstrap 4. W tym wpisie przybliżę wam co nowego w Bootstrap 4 i pokrótce opiszę każdą z nowości.

1. Wielkość nagłówka H1 – Aby zwiększyć rozmiar fonta nagłówka wystarczy dodać do niego klasę .display-* gdzie * ma mieć wartość 1-4 i im wyższy numer tym większy font -> http://v4-alpha.getbootstrap.com/content/typography/#display-headings
2. Flexbox – Jest to nowy sposób układania elementów na stronie. Można je układać w wierszach lub kolumnach, centrować w pionie i poziomie, wyrównywać do dołu, góry itp. Planuję zrobić krótki tutorial o flexboxie ale póki co mogę polecić stronę -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/ z którego w prosty sposób dowiecie się „z czym to się je”. Dla tych którzy wolą filmiki polecam ten tutorial -> http://flexbox.io/ Bootstrap będzie wspierał flexbox w swoim layoucie, wystarczy w pliku _variables.scss zmienić wartość $enable-flex na true
3. Outline buttons – Nowy wygląd buttonów, możemy teraz za pomocą klasy btn-*-outline gdzie * to standardowe klasy kolorów bootstrapa. Te przyciski nie są wypełnione w środku a jedynie posiadają ramkę. Można je zobaczyć tutaj -> http://v4-alpha.getbootstrap.com/components/buttons/#outline-buttons
4. Własne style dla radio i checkboxów – stylowanie przycisków radio czy checkboxów z wykorzystaniem Open Iconic lub WTF Forms będzie od tej pory dużo łatwiejsze -> http://v4-alpha.getbootstrap.com/components/forms/#custom-forms
5. Jumbotron fluid – Znany z BS3 jumbotron otrzymał możliwość wyświetlania się na całej szerokości i bez zaokrąglonych rogów. Wystarczy stworzyć jumbotron z klasą jumbotron-fluid a w jego wnętrzu umieścić div z klasą .container -> http://v4-alpha.getbootstrap.com/components/jumbotron/#jumbotron
6. Pill labels – jeśli mieliście styczność z BS2 to pewnie pamiętacie, że posiadał on element „pill” czyli taki „label” ale z zaokrąglonymi rogami. Element ten zniknął w BS ale znów się pojawia. Wystarczy stworzyć label z klasą label-pill -> http://v4-alpha.getbootstrap.com/components/label/#pill-labels
7. Karty (Cards) – to największy z nowych elementów, jak dowiedzieliście się w poprzednim wpisie BS4 porzuca takie elementy jak well, panel oraz thumbnail. Karty łączą wszystkie te elementy oraz dodają kilka nowych funkcjonalności jak na przykład grupowanie kilku elementów, „overlay” czyli przykrywanie zdjęcia tekstem czy wyświetlanie kart w stylu „masonry”. Więcej o kartach znajdziecie tutaj -> http://v4-alpha.getbootstrap.com/components/card/#cards
8. Łatwiejsze „kolorowanie” navbara – W BS3 mieliśmy tylko 2 standardowe opcje zmiany tła górnego menu. Zmiana go według własnych upodobań wymagała dopisywania własnych CSSów. Teraz wystarczy wybrać jedną z dwóch klas navbar-light lub navbar-dark w zależności od tego jaki kolor navbara chcemy użyć (chodzi tu o to, że np. w przypadku navbar-light Bootstrap zrobi nam czarne fonty w navbarze lub białe w przypadku navbar-dark, aby były czytelne gdy zmienimy tło) a następnie dopisać jedną linijkę CSS zmieniającą background-color dla naszego navbara -> http://v4-alpha.getbootstrap.com/components/navbar/#color-schemes
9. Element Collapsible – Jest to element, który umożliwia na przykład stworzenie ukrytego menu uruchamianego za pomocą przycisku. Można go umieścić na górze strony lub w dowolnym jej miejscu. Przykład działania znajdziecie tutaj -> http://v4-alpha.getbootstrap.com/components/navbar/#collapsible-content
10. Marginesy i wypełnienia jako klasy – Ja co prawda mam swój własny zestaw klas pomocniczych, które kopiuję sobie do nowego projektu ale Bootstrap przyszedł z pomocą tym, którzy jeszcze nie stworzyli sobie czegoś takiego i sam udostępnia komplet klas służących do tworzenia marginesów i wypełnień. Bootstrapowe klasy są bardzo krótkie ale bardzo łatwo można je odczytać. Przykładowo klasa m-t oznacza margin-top a klasa p-x-0 oznacza padding po osi X czyli padding-left oraz padding-right no i zero czyli de facto brak owego paddingu:) Rozpiska wszystkich klas znajduje się tutaj -> http://v4-alpha.getbootstrap.com/components/utilities/#spacing

Na daną chwilę to chyba wszystkie nowości. Ale jak wiecie jest to dopiero wersja Alpha, więc jeszcze dużo może się zmienić. Staram się śledzić na bieżąco co dzieje się w tej kwestii, więc na pewno będę Was informował o kolejnych nowościach:)

P.S Interesował by Was tutorial o podstawach Sassa, czy już wszyscy go potrafią?:)

---

Post się przydał? Oceń go proszę.

(7 głosów, średnia: 5,00 na 5)

Loading...

---

← Starszy post
Różnice pomiędzy Bootstrap 3 a Bootstrap 4
Nowszy post →
Bootstrap Cheat sheet

Robert 9 października 2015 o 13:14

Sass to tak jakby nowy szybszy sposób zapisywania CSSów, który dodatkowo udostępnia zmienne, funkcje, mixiny, operatory, zagnieżdżanie i inne rzeczy których brakuje w CSSie:) Tutaj oficjalna strona -> http://sass-lang.com/ :)

Odpowiedz

Robert 19 listopada 2015 o 09:12

Flexbox jest niejako kolejnym etapem rozwoju layoutu stron bo w sumie odkąd odeszliśmy od tabelek to nawet RWD nie zmieniło niczego w sposobie układania elementów. Jak widziałeś na kursie koniec w wyliczaniem szerokości, odstępów czy nawet tym nieszczęsnym środkowaniem w pionie;) Można go też bez problemu łączyć ze standardowym layoutem. Flexbox ma ten minus, że nie jest tak oczywisty jak klasyczny układ kolumnowy i może na początku sprawiać trudności. Dlatego właśnie wrzuciłem tutorial tego „gwiżdzącego” gościa, bo on świetnie tłumaczy:) Podsumowując – myślę, że flexbox zastąpi klasyczny układ kolumn ale jeszcze nie tak szybko gdyż nie jest on wspierany przez starsze przeglądarki a kompatybilność wstecz jest ważna bo nie wszyscy aktualizują oprogramowanie.

Odpowiedz

Marcin 19 listopada 2015 o 14:50

No właśnie, a co z kompatybilnością ze starszymi przeglądarkami? Bo gość na tych filmikach w pewnym momencie pokazuje jak „zamienić” polecenia flex boxów na zwykłe polecenia CSS, aby były odczytywane przez każde przeglądarki, ale muszę przyznać, że jest to dość skomplikowane (niby pokazuje krok po kroku, ale to jest po angielsku i potrzeba kilku dodatkowych programów/wtyczek). Robert, moje pytanie: Czy jak „flex boxy” zaczną być wspierane przez BS4 to automatycznie nie będzie to jednoznaczne ze wsparciem dla starszych przeglądarek? Nie będzie to na zasadzie „tłumaczenia” flex boxów w bibliotekach nowego Bootstrapa? Dobrze to rozumiem? Bo jeśli tak to temat tworzenia responsywnych stron wejdzie na niespotykanie prosty sposób dzięki BS4 :)

Odpowiedz

Robert 19 listopada 2015 o 15:00

Z tym wsparciem chodzi o to, że przeglądarka nie zrozumie zapisu display:flex i zwyczajnie go nie wykona. Wątpię czy ludzie od BS będą się bawili w fallback flexboxa bo nie wspiera go właściwie tylko IE w wersjach <11. http://caniuse.com/#feat=flexbox tutaj masz informacje o obsługiwanych wersjach i znanych problemach. Myślę, że możesz spokojnie zacząć tworzyć strony w oparciu o flexbox i nie przejmować się tym procentem ludzi;) Chyba, że dostaniesz do roboty stronę międzynarodowej korporacji za miliony dolarów, która w wymaganiach będzie miała wsparcie dla IE6 ;)

Odpowiedz

Marcin 19 listopada 2015 o 17:09

eeee…. no to faktycznie nie ma co się za bardzo przejmować tym IE ;) Robert, to jeszcze dwa pytania:
1. Więc możesz mi wyjaśnić czemu ten gość w jednym z filmików pokazuje w jaki sposób zamieniać polecenia Flexbox na zwykłe CSS? Tylko po to aby były czytelne w każdej przeglądarce (nawet starszych IE) czy jest w tym jeszcze jakaś głębsza zasadność?
2. Jeśli Flexboxy mają mieć wsparcie od BS4, to jeśli teraz zacznę robić stronę pod BS 3.5 i zacznę wykorzystywać polecenia „Flex” to BS albo przeglądarka zgłupieje? Nie rozumiem tego, bo przecież polecenia „Flexbox” są zwykłymi poleceniami CSS’a, więc czemu oficjalnie wsparcie ma być OD BS4, jeśli tak naprawdę już teraz spokojnie można z nich korzystać w plikach CSS. W skrócie – czy nie mozna użyć „flexboxów” z BS 3.5? Jeśli tak, to dlaczego?

Robert 20 listopada 2015 o 13:24

1. Chodzi tutaj o zachowanie zgodności ze starymi przeglądarkami. Jeśli ktoś ma starą wersję to nie chcemy aby strona mu się „wykrzaczyła”.
2. Patrzysz na to od złej strony. Flexboxa można wykorzystać nawet bez korzystania z Bootstrapa, można go wykorzystać w połączeniu z Bootstrapem 3 itp. Tutaj chodzi o to, że Bootstrap 4 będzie go „wspierał” w ten sposób, że będą przygotowane odpowiednie klasy do jego używania (np. zamiast samemu wpisywać w CSS display:flex to będzie wystarczyło zrobić diva z klasą np. .flex. Tak samo jak w BS nie musisz zmieniać ręcznie koloru buttona tylko nadajesz mu odpowiednią klasę bo twórcy za Ciebie napisali odpowiednie CSSy)

Marcin 20 listopada 2015 o 19:17

Bardzo Ci dziękuję, za wytłumaczenie wsparcia „flexboxów” w BS4 Robert. Teraj już wszystko jest dla mnie jasne i klarowne :)

Robert 1 lutego 2016 o 07:47

Tak, tak. Zrobię cały tutorial o BS4 a także mam w planach zrobić kurs w Sassie i Flexboxie:) Jestem już w trakcie pisania nowego motywu dla bloga opartego właśnie na Bootstrap 4.

Odpowiedz

Hamlet 1 lutego 2016 o 13:06

Super. Sam zrobiłem motyw w flex’ie, ale trzeba mieć przy tym dużo cierpliwości. Sam flex mógłby mieć kurs obsługi ???? tym nie mniej jest to dzisiaj najlepsze rozwiązanie, ale wracając do tematu natrafiłem na porównanie z go z gridem. Puki co rozumiem że grid szybiej wczytuje content a potem jak flex resztę szablonu, ale nie wiem co to grid :)
https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/

Odpowiedz

Robert 1 lutego 2016 o 13:25

Grid czyli siatka to nic innego jak to czego używasz w standardowym Bootstrapie. Masz .row, który jest rzędem a wewnątrz tworzysz .col-*-*, które są kolumnami. Tworzysz sobie coś na wzór tabeli. Co do flexa, to nie chcę się wypowiadać aby nikogo nie zniechęcić, ale nie przepadam za nim i nie chciałbym robić w nim całych layoutów. Ale podobnie jak w linku, wykorzystywanie go w połączeniu z siatką stosuję (szczególnie jak trzeba coś wyrównać w pionie i poziomie;)) Co do zorientowania się o co chodzi we flexboxie to fajna jest stronka http://flexboxfroggy.com/ :)

Odpowiedz

Hamlet 1 lutego 2016 o 15:05

Haha fana stronka xD Podsumowując. Flexbox był już dostępny nawet dla Bootstrapa 3 z tym że trzeba było go dołączać w postaci biblioteki, a Boostrap4 zmienia to że jest on już zintegrowany wewnątrz bootstapa?
Siatka z bootstrapa 3 ulega zmianie względem tej z wersji 4tej? Czy idea jest taka sama + flexbox? Jest już jakiś gotowy szablon zrobiony w bootstrapie 4? Chciałbym zrobić prostą stronę testową np z CV to biorąc pod uwagę to kryterium czy jest sens korzystać z najnowszej wersji bootstrapa? Chodzi mi o to czy np szybkość ładowania strony jest na korzyść którejś wersji lub responsywność w którejś jest lepsza zoptymalizowana i w czym wystarczyłoby mniej kodu (prostszy kod)?

Robert 4 lutego 2016 o 08:12

Zdaję sobie sprawę, że nawigacja pozostawia wiele do życzenia ale na swoje usprawiedliwienie napiszę, że ten blog powstał gdy uczyłem się WP i BS:)
Mam kilka pomysłów na nowy layout, na pewno nie chcę odchodzić od dotychczasowej formuły bo moje wpisy nie tylko są suchą dokumentacją ale dorzucam też info jak to wykorzystać itp:) Ale stworzenie czegoś w rodzaju CheatSheet jest rewelacyjnym pomysłem bo faktycznie nawet w oficjalnej dokumentacji trzeba się czasami naszukać – dopisuję ten pomysł do mojej listy – dziękuję:)

Odpowiedz

Hamlet 5 lutego 2016 o 08:27

To była tylko propozycja. Ja na przykład lubię prostotę i dla mnie (os. która nie programuje w php) okazało się bardzo dobrym rozwiązaniem wyszukiwanie f-cji oraz tutoriale w sieci. Gdy tutoriale pokazały mi możliwości, korzystałem jedynie ze słonika aby składnię sobie przypomnieć. Reasumując wychodziło średni że tutorial oglądałem na początku z 4-10 razy, a słownik 100-300. Pierwsze było świetnym wprowadzeniem, a drugie szybkim sposobem wyszukiwania konkretnej dla nas opcji. Oczywiście cieszę się że mogłem w jakiś sposób podrzucić pomysł. Pańska strona ma duży potencjał do stania się takim kompendium wiedzy w sieci na temat BS i być przywoływana w literaturze drukowanej, ale moim skromnym zdaniem taki słownik byłby strzałem w dziesiątkę choć rozumiem że wymagało by to trochę pracy. Patrząc na to ile już Pan udostępnił myślę że jest Pan to w stanie ogarnąć. Pozdrawiam :)

Odpowiedz

Robert 5 lutego 2016 o 08:38

Na dniach pojawi się coś nowego i myślę, że bardzo przydatnego:)

Odpowiedz