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.
- 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 - 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.scsszmienić wartość$enable-flexnatrue - Outline buttons – Nowy wygląd buttonów, możemy teraz za pomocą klasy
btn-*-outlinegdzie*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 - 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
- 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-fluida w jego wnętrzu umieścić div z klasą.container-> http://v4-alpha.getbootstrap.com/components/jumbotron/#jumbotron - 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 - Karty (Cards) – to największy z nowych elementów, jak dowiedzieliście się w poprzednim wpisie BS4 porzuca takie elementy jak
well,panelorazthumbnail. 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 - Ł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-lightlubnavbar-darkw zależności od tego jaki kolor navbara chcemy użyć (chodzi tu o to, że np. w przypadkunavbar-lightBootstrap zrobi nam czarne fonty w navbarze lub białe w przypadkunavbar-dark, aby były czytelne gdy zmienimy tło) a następnie dopisać jedną linijkę CSS zmieniającąbackground-colordla naszego navbara -> http://v4-alpha.getbootstrap.com/components/navbar/#color-schemes - 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
- 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-toznaczamargin-topa klasap-x-0oznaczapaddingpo osi X czylipadding-leftorazpadding-rightno 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...Komentarze: 20 komentarzy
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/ :)
OdpowiedzMarcin 19 listopada 2015 o 00:23
Pewnie, że zainteresowanie tutorialem Sassa :D
Co do tematu „flex”, który będzie w BS4 to obejrzałem podaną przez Ciebie serię szkoleniową tego gościa „gwiżdżącego” ;) i moja reakcja to WOW!!! Wydaje mi się, że to będzie ogromny krok w uproszczeniu tworzenia stron internetowych :D ale nasuwa mi się od razu pytanie: w takim razie standardowa siatka Bootstrapowa odchodzi do lamusa…?? Bo po co rozpisywać się w „col col-md-4 col-sm-8 col-xs-12” jak można to załatwić „flex’em” dużo szybciej….. :) Czyż nie? Chyba, że źle zrozumiałem przeznaczenie komendy „flex”????
OdpowiedzRobert 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.
OdpowiedzMarcin 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 :)
OdpowiedzRobert 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 ;)
OdpowiedzMarcin 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 :)
Hamlet 31 stycznia 2016 o 23:00
Pochwały zasłużone za tutorial, ale jak na kurs brakuje zasadniczej rzeczy. Uruchomienie i konfiguracja Bootstrapa4 + flex. Tego zabrakło. Nie każdy pobiera wszystko na dysk i bawi się na lokal hoscie lub z nodejs. Ja próbowałem uruchomić bootstrap z flexboxem korzystając z cdn. Czy Pan Panie Robercie znajdzie czas w swoim kursie czas, aby pokazać jak skonfigurować na serwerze bootstrapa4 razem z gridem i flexem? Na pewno to też bedzie pomocne dla tych co zaczynają swoją drogę od BS4.
Pozdrawiam
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/
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/ :)
OdpowiedzHamlet 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)?
Hamlet 3 lutego 2016 o 23:41
Chyba zadałem trochę dużo pytań i zbyt ogólnikowych, ale mam pomysł który mnie i pewnie wielu początkujących by to doceniło. Oczywiście Pan wybierze według własnego uznania.
Moja propozycja by zamiast prezentowania możliwości każdego elementu bootstrap’a jak to miało do tej pory uprościć formę do słownika pojęć z bootstrapa. Z tego co widziałem najbardziej tego brakuje w sieci więc domniemam że podbiłby sobie Pan oglądalność kilkukrotnie. Już tłumaczę o co z tym chodzi. Taki poradnik jaki do tej pory Pan prowadził już się ukazał dla wersji bootstrap 4 w prostym angielskim więc jedynie napisanie przez Pana takiego tutoriala byłoby bliźniaczo podobne do tego: https://www.youtube.com/watch?v=a4dy_xMmTrQ tyle że po Polsku. Ja bym proponował zrobienie czegoś (z tego co widzę jest to unikatowe) co było by ogólną tabelą rozwijaną z każdą opcją bootstrapa czyli: mamy wiersz w tabeli (Klasy bootstrap) class=”Cards” po czym jak użytk. kliknie na ten wiersz poniżej rozwinie się krótki opis wraz z małym przykładem zastosowania (oczywiście jak będzie miał Pan tyle sił może być to dokładnie opisane jak do tej pory Pan robił w tutorialach). wtedy cała treść byłaby w jednym miejscu anie w oddzielnych postach (wg mnie jest to bardziej uporządkowane) i tak widzielibyśmy tabele:
+ bootstrap 2 clasy, toogle data, itp
+ bootstrap 3 —–,,—— itd
+ bootstrap 4 —–,,—— itd
Ja jako użytkownik wcisnąłbym w ctrl+f wpisał cards i widziałbym o znalazło mi przy zielonej tabeli (zielona np to bootstrap 4, czerwona 3 itp)
Używałyby to też osoby które umieją już bootstrapa tylko im nap wypadło z głowy np: „Hmm czemu te cards nie działa chyba coś wpisałem muszę wejść na słownik i zobaczyć jak użyć cards).
Wg. mnie osoby które już nauczą się BS już nie odwiedzają kursu ew. wybiórczo a to zapewniłoby Panu Robercie taki mały http://stackoverflow.com/ dl BS 4.0 xD
Pozdrawiam i mam nadzieje że nie wymagam wiele, a moja propozycja okazała się merytoryczna w Pana oczach :)
OdpowiedzRobert 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ę:)
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