Czego można się spodziewać po Bootstrapie 4

W ciągu ostatnich kilku lat Bootstrap stał się bardzo popularny. Istnieje duża szansa, że ​​natknąłeś się na lub stworzyłeś motywy WordPress, które zawierają elementy Bootstrap. Ewoluował od podstawowej, wstępnie responsywnej struktury do solidnej, bogatej w funkcje i nowoczesnej struktury responsywnej. Bootstrap 3 istnieje już od jakiegoś czasu, więc ekscytujące jest dowiedzieć się, co będzie dalej w Bootstrap 4.

Stan Bootstrapa 4

Bootstrap 4 jest obecnie w budowie i nie jest jeszcze gotowy do użycia w produkcji. Obecnie jest w wersji alfa. To dobra okazja do podglądu i zapoznania się z tym, jak pomoże Ci w przyszłych projektach.

Dokumentacja Bootstrap 4 nie jest jeszcze kompletna, więc eksperymentowanie jest dobrym sposobem na przetestowanie niektórych nowych funkcji. Gdy zostanie oficjalnie udostępniony do użytku produkcyjnego, będziesz w pełni świadomy wszystkich wspaniałych nowych ulepszeń.

Stworzony dla nowoczesnych przeglądarek

W miarę postępów w Internecie coraz trudniej jest obsługiwać starsze przeglądarki, korzystając z najnowszych i najlepszych możliwości tworzenia stron internetowych. Niezależnie od tego, czy jest to muzyka dla Twoich uszu, wszyscy możemy się zgodzić, że lepsze techniki CSS3 są łatwiejsze podczas pracy z nowoczesnymi przeglądarkami. Bootstrap 4 może być po prostu idealnym sposobem na oderwanie się od starszych przeglądarek. Dzięki tej aktualizacji obsługa programu Internet Explorer 8 została całkowicie porzucona. Należy pamiętać, że framework nadal obsługuje Internet Explorer 9 i nadal obsługuje CSS3 bez wielu problemów.

Ulepszony reset

Prawdopodobnie przyzwyczaiłeś się do Normalize.css, który jest świetną opcją resetowania. Jest nowy i ulepszony reset z dodanymi specyficznymi rzeczami Bootstrap o nazwie reboot.css. Specyfika Bootstrap to takie rzeczy jak rozmiar pudełka: obramowanie, remy jako jednostka miary, style linków i style formularzy. To świetna mieszanka Normalize.css i konkretnych potrzeb Bootstrap, więc na pewno zaczniesz świetnie.

SASS

W poprzednich dniach Bootstrapa wydawało się, że preferowane jest LESS. Wraz ze zmianami w branży i preferencjami projektantów skłaniającymi się ku SASS, to jest to, co jest obecnie na korzyść. Jeśli pamiętasz, wracając do wersji 3, wtedy opcja SASS stała się dostępna z opcją portu. W tej chwili nie jest planowane wsparcie dla LESS.

Modyfikacje

Bootstrap 4 ułatwia tworzenie niestandardowych projektów, a wszystko to w zorganizowany sposób. Wszystkie opcje zmiennych są skonsolidowane w jednym pliku. SASS można łatwo skompilować i nie ma potrzeby stosowania osobnego arkusza stylów, jak miało to miejsce w przeszłości.

W Bootstrap 4 jest sporo nowych opcji dostosowywania. Tutaj możesz zobaczyć aktualny stan. Najprawdopodobniej nieco się rozwinie, ponieważ szczegóły będą nadal publikowane.

Pamiętaj, że są to łatwe dostosowania do skonfigurowania na początku:

• Domyślne ustawienia ciała
• Zmienne kolorów
• Elastyczne pudełko
• Opcje projektowania CSS3, takie jak przejścia, zaokrąglone rogi, cienie itp.
• Pomiary odstępów
• Style linków
• Punkty przerwania siatki
• Pojemniki siatkowe
• Kolumny siatki
• Rozmiary typografii
• składniki
• Stoły
• Więcej!

Ktoś Flexbox?

Flexbox z pewnością zyskał na popularności i będziemy widzieć coraz więcej projektantów stron internetowych, którzy z niego korzystają. Jest to świetne narzędzie do użycia, ponieważ zapewnia proste i elastyczne opcje układu ze stylami CSS. Jeśli podoba Ci się łatwość pionowego wyrównania treści w elemencie nadrzędnym, zmiana kolejności treści na różnych urządzeniach i rozdzielczościach ekranu za pomocą zapytań o media oraz doceniasz łatwy sposób na tworzenie kolumn o równej wysokości w siatce, Flexbox jest świetnym rozwiązaniem .

Zanim uciekniesz i skonwertujesz wszystkie swoje projekty, warto wspomnieć o ważnej rzeczy. Mimo że obsługa przeglądarek drastycznie wzrosła, Internet Explorer 9 nadal nie obsługuje Flexbox. Jeśli chodzi o łatwość użycia, Bootstrap 4 ułatwia korzystanie z Flexbox, jeśli nie potrzebujesz obsługi IE9. Zasadniczo wszystko, co musisz zrobić, to znaleźć plik _variables.scss i zmienić $enable-flex z false na true. Jeśli znasz SASS, możesz to zrobić szybko.

Aktualizacje siatki

Jeśli od dawna jesteś fanem Bootstrap, prawdopodobnie jesteś ekspertem od tego, jak działa system siatki, a także konwencja nazewnictwa. W przypadku Bootstrap 4 składnia pozostaje taka sama, ale istnieje różnica w stosowanych pomiarach. System siatki jest teraz oparty na „remach”. Jest to dostosowanie, jeśli jesteś przyzwyczajony do perfekcyjnych projektów, ponieważ teraz wszystko będzie bardziej płynne.

Rozstając się z pikselami, do których przywykliśmy, spójrzmy na przykład czegoś powszechnego, takiego jak .container i .row. Kontener ma teraz ustawioną maksymalną szerokość w rem. Wiersz ma domyślnie ujemny lewy i prawy margines -.9375rem , podczas gdy kolumny mają domyślne dopełnienie lewego i prawego marginesu 0.9375rem . Jak być może pamiętasz, te wartości wcześniej 15px w Bootstrap 3. Te nowe wartości rem są do nich porównywalne.

Ulepszone zapytania o media

Zapytania o media w poprzednich wersjach Bootstrapa były nieco ogólne i czasami trzeba było tworzyć niestandardowe. Oto jak wyglądały:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Teraz można zastosować bardziej mobilne podejście, korzystając z tych zaktualizowanych zapytań o media:

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

Jeśli chcesz coś innego, punkty przerwania są konfigurowalne w SASS, jeśli chcesz wybrać własne.

Karty jako zamiennik

Znasz panele, studzienki i miniatury? Karty są teraz najnowsze i najlepsze i oferują wspaniałe opcje stylizacji. Jednym z przykładów są Grupy Kart. Mimo że ilość tekstu jest różna, karty mają taką samą wysokość, bez zależności od JavaScript. Działa to zarówno z Flexbox, jak i domyślnym trybem siatki. Podczas korzystania z Flexbox karty są budowane przy użyciu właściwości Flexbox. Domyślna siatka wykorzystuje sztuczkę CSS, aby uniknąć konieczności korzystania z JavaScript. Kontener wykorzystuje display: table; a każda „karta” jest display: table-cell; nadając mu właściwości tabeli – stąd bierze się równa wysokość kolumny.

Typografia

Pamiętasz, jak siatka teraz używa remów? Cóż, ma sens tylko to, że typografia też to zrobi! Zastanawiając się nad tym, pamiętaj, że wszystkie rozmiary czcionek odnoszą się do elementu głównego, tagu HTML. Gdy zmienisz rozmiar czcionki (lub dowolny inny styl) w znaczniku HTML, możesz łatwo stylizować i skalować style w całym projekcie.

Załóżmy, że styl elementu HTML ma font-size: 16px . Załóżmy, że chcesz, aby znaczniki h5 miały ten rozmiar, zadeklarowałeś rozmiar czcionki równy 1 rem.

h5 {
font-size: 1rem;
}

Teraz może być trochę matematyki, aby posunąć się do przodu. Jeśli chcesz, aby tagi h1 miały rozmiar 40 pikseli, oto jak to zrobić:

h1 {
font-size: 2.5rem; /* 16 * 2.5 = 40px */
}

Nie czujesz jeszcze remów? Jeśli chcesz, nadal możesz używać pikseli i emów do zmiany rozmiaru.

Więcej stylów nagłówków

Nagłówki świetnie nadają się do ustalania hierarchii. Ale co, jeśli chcesz czegoś bardziej widocznego niż h1, h2, h3 itd.? Dobra wiadomość jest taka, że ​​możesz dodać klasę wyświetlanego nagłówka do standardowego nagłówka, co sprawi, że będzie on większy. Wyglądałoby to mniej więcej tak:

<h1 class="display-4">Heading Display 4</h1>

display-4 jest większy niż display-2 .

Mniejszy rozmiar pliku

Bootstrap 4 zajmuje mniej miejsca. W rzeczywistości jest o około 30% mniejszy niż najnowsza wersja, Bootstrap 3. Wcześniej miał około ~123 kb, a teraz ma ~88 kb. To niesamowite, że jest mniejszy i nadal ma te same wspaniałe funkcje.

Pamiętaj, że istnieje opcja używania tylko tych części Bootstrapa, których potrzebujesz, co sprawia, że ​​rozmiary plików są jeszcze mniejsze.

Nigdy więcej glifów?

Glyphicons były szeroko stosowane w poprzednich wersjach Bootstrapa, więc smutne jest ich odejście. Nie martw się, to nie koniec ikon internetowych. Zamiast tego FontAwesome powinien ci służyć równie dobrze. Możesz także sprawdzić Octigons Github, aby uzyskać świetne opcje ikon.

Przejście do Bootstrapa 4

Chociaż jest obecnie w wersji alfa, nie ma powodu, dla którego nie można z nim pracować w środowisku testowym. Kod źródłowy jest dostępny w gałęzi v4-dev na GitHub. Gdy eksperymentujesz i widzisz wszystko, co wymaga uwagi, pojawia się żądanie ściągnięcia dla rozwoju i śledzenia, które zawiera uwagi dotyczące zmian i wszelkich innych nowych ulepszeń.

Rzeczy są w fazie alfa i ostatecznie pojawią się wersje beta, gdy funkcje i funkcje będą gotowe do przetestowania. Po wersji beta dwóch kandydatów do wydania zostanie wykorzystanych do testowania rzeczy w środowisku produkcyjnym. Gdy wszystko pójdzie dobrze, ostateczna wersja będzie gotowa!

Właśnie zarysowaliśmy tutaj powierzchnię i właśnie rozpoczęła się rozmowa Bootstrap 4. To ekscytujące widzieć, co przyniesie przyszłość i jestem podekscytowany, widząc, jak wyjdzie z alfy. Miej oko na aktualizacje i pobierz kopię, aby przetestować nowe komponenty Bootstrap 4.