autor: Robert
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.
.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_variables.scss
zmienić wartość $enable-flex
na true
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-buttonsjumbotron-fluid
a w jego wnętrzu umieścić div z klasą .container
-> http://v4-alpha.getbootstrap.com/components/jumbotron/#jumbotronlabel-pill
-> http://v4-alpha.getbootstrap.com/components/label/#pill-labelswell
, 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/#cardsnavbar-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-schemesm-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/#spacingNa 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ą?:)
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/ :)
OdpowiedzPewnie, ż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”????
OdpowiedzFlexbox 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.
OdpowiedzNo 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 :)
OdpowiedzZ 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 ;)
Odpowiedzeeee…. 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?
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)
Bardzo Ci dziękuję, za wytłumaczenie wsparcia „flexboxów” w BS4 Robert. Teraj już wszystko jest dla mnie jasne i klarowne :)
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
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/
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/ :)
OdpowiedzHaha 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)?
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 :)
OdpowiedzZdaję 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ę:)
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