Bootstrap 4 Nowe i fajne funkcje pokochasz

Następne główne wydanie frameworka Bootstrap jest tuż za rogiem. Wersję alfa można już pobrać ze strony rozwojowej Bootstrap, a kod źródłowy jest również dostępny na Github.

Twitter Bootstrap jest obecnie najpopularniejszym frameworkiem frontendowym. Umożliwia programistom szybko buduj strony mobilne i responsywne. Bootstrap umożliwia inteligentne korzystanie ze standardowego trio HTML5, CSS3 i Javascript. Obecnie jest wykorzystywany przez ponad 6 milionów witryn w sieci.

Mimo że Bootstrap 4 jest nadal w fazie rozwoju (więc nie używaj go jeszcze na żywo), programiści wykonali fantastyczną pracę. W tym poście przyjrzymy się nowej wersji, która zawiera wiele wspaniałych funkcji, które na pewno usprawnienie i usprawnienie procesu rozwoju frontendu.

1. Sass zamiast LESS

Do tej pory Bootstrap wykorzystywał LESS jako główny preprocesor CSS, ale w nowym wydaniu głównym zasady stylu zostaną przeredagowane na Sass, który jest znacznie bardziej popularny wśród programistów frontendowych, ma ogromną bazę kontrybutorów, ogólnie łatwiejszy w użyciu i oferuje więcej możliwości. Dzięki potężnemu Libsass Sass Complier napisanemu w C / C++ Bootstrap 4 skompiluje się znacznie szybciej niż wcześniej.

2. Nowa warstwa siatki dla mniejszych ekranów

Bootstrap ma zaawansowany system responsywnej siatki, który pozwala programistom na kierowanie na urządzenia z różnymi rzutniami. Bootstrap 3 ma obecnie 4 klasy siatki dla kolumn, .col-xs-XX dla telefonów komórkowych, .col-sm-XX na tablety, .col-md-XX dla komputerów stacjonarnych i .col-lg-XX dla większych komputerów stacjonarnych. Bootstrap 4 wzbogaci system siatki o piąty, który ułatwi programistom celuj w mniejsze urządzenia o szerokości 480 pikseli.

Nowa klasa siatki przyjęła nazwę poprzedniego najmniejszego i przesunęła bieżące nazwy warstw siatki w górę o jeden stopień. W Bootstrap 4 duże komputery stacjonarne będą korzystać z .col-xl-XX selektor klasy. Ważne jest, aby wiedzieć, że pomimo nowej nazwy nie dodali nowej klasy dla bardzo dużych ekranów, ale dla bardzo małych.

3. Przedstawia względne jednostki CSS

Bootstrap 4 w końcu przerywa obsługę przeglądarki Internet Explorer 8. To naprawdę sprytny krok, ponieważ pozwala im pozbyć się nieznośnych wypełnień i konwertować na względne jednostki CSS. Zamiast pikseli, nowa wersja główna będzie użyj REM i EM to umożliwia wdrażaj responsywną typografię na stronach Bootstrap. Zwiększy to również czytelność i zwiększy dostępność witryn dla użytkowników niepełnosprawnych.

Jeśli chcesz wypróbować, jak jednostki względne działają z nowym Bootstrap 4, sprawdź to demo na Codepen.

4. Nowe karty Bootstrap

Zespół programistów postanowił ujednolicić niektóre poprzednie elementy interfejsu użytkownika Bootstrap, więc zdecydowali się na wprowadzenie nowy komponent interfejsu użytkownika o nazwie Karty. Karty zastąpią poprzednie studnie, miniatury i panele i zapewnią użytkownikom bardziej usprawniony przepływ pracy. Nie martw się, karty będą przechowywać znane elementy, takie jak tytuły, nagłówki i stopki studni, miniatur i paneli.

Ponieważ karty będą bardziej elastyczne niż obecne elementy interfejsu użytkownika, pozwolą na większą przestrzeń dla kreatywnych wdrożeń. Istnieją pionierzy, którzy przeprowadzili już eksperymenty na Codepen z kartami Bootstrap. Możesz je sprawdzić lub stworzyć własne karty.

5. Nowy moduł ponownego uruchamiania

Nowy moduł Reboot zastępuje poprzedni normalize.css zresetować plik. Nie przekreśla go; przeciwnie, buduje na nim więcej reguł. Celem tego ruchu było włączenie wszystkich ogólnych selektorów CSS i zresetowanie stylów w a pojedynczy, łatwy w użyciu plik SCSS. Możesz zapoznać się z kodem źródłowym tutaj, jeśli chcesz lepiej zrozumieć, jak działa nowy moduł.

Dobrze wiedzieć, że nowe style resetowania inteligentnie ustawiają właściwość CSS o rozmiarach boxów obramowanie na element, który jest zatem dziedziczony przez każdy element podrzędny na stronie. Nowa reguła stylu ułatwia zarządzanie responsywnymi układami. Jeśli chcesz doświadczyć różnicy między typem pola zawartości a układem ramki, spójrz na to poręczne demo udostępnione przez CSS-Tricks.com (nie zostało ono stworzone dla Bootstrap 4, to tylko pokazuje, jak wielkość pudełka) ogólnie działa).

6. Włącz obsługę Flexbox

Bootstrap 4 umożliwia jednak wykorzystanie układu Flexbox CSS3 - ponieważ Internet Explorer 9 nie obsługuje modułu Flexbox - domyślna wersja Bootstrap 4 raczej korzysta z pływaka i wyświetla właściwości CSS, aby zaimplementować układ płynny.

Flexbox ma łatwy w użyciu układ, który można doskonale wykorzystać w responsywnym projektowaniu, ponieważ zapewnia elastyczny pojemnik, który rozszerza się lub kurczy, wypełniając dostępną przestrzeń w najlepszy sposób. Korzystaj z opcji opt-in flexbox tylko jeśli nie trzeba zapewnić wsparcie dla IE9.

7. Usprawnione dostosowywanie zmiennych

Wszystkie zmienne Sass używane w nowym wydaniu Bootstrap są zawarte w jednym pliku o nazwie _variables.scss, który znacznie usprawni proces tworzenia. Nie musisz robić niczego innego oprócz kopiowania ustawień z tego pliku do innego, który nazywa się _custom.scss aby zmienić wartości domyślne.

Możesz dostosuj wiele rzeczy takie jak kolory, odstępy, style linków, typografia, tabele, punkty przerwania siatki i pojemniki, numer kolumny i szerokość rynny i wiele innych.

8. Nowe klasy narzędzi do rozstawiania

Bootstrap 3 ma już wiele praktycznych klas narzędzi, takich jak te, które zmieniają pływające lub clearfix, ale Bootstrap 4 dodaje jeszcze więcej. The nowe klasy odstępów pozwala programistom szybko zmieniać paddings i marginesy na swoich stronach.

Składnia nowych klas jest dość prosta, na przykład dodanie .klasa m-a-0 łączy regułę stylu, która ustawia marginesy na 0 ze wszystkich stron danego elementu (margin-all-0). Podczas gdy marginesy używają m- prefiks, obicia są stylizowane na str- prefiks. W dokumentach dotyczących rozwoju możesz przyjrzeć się wszystkim nowym klasom narzędzi do rozmieszczania.

9. Podpowiedzi i Popovers Powered By Tether

W podpowiedziach i popoversach Bootstrap 4 wykorzystywana jest biblioteka supercool Tether, silnik pozycjonujący, który umożliwia zachowanie elementu pozycjonowanego absolutnie tuż obok innego elementu na tej samej stronie. Oznacza to podpowiedzi i popovers zostanie automatycznie umieszczony prawidłowo na stronach Bootstrap 4.

Nie zapominaj, że jako Tether jest biblioteką JavaScript innej firmy, musisz osobno dołączyć ją do HTML przed plikiem bootstrap.js.

10. Refaktowane wtyczki JavaScript

Zespół programistów zreformował każdą wtyczkę JavaScript do nowej wersji przy użyciu EcmaScript 6. Dzięki inteligentnemu wykorzystaniu najnowszych specyfikacji i najnowszych ulepszeń, które zamierzają poprawić doświadczenie frontendu.

Nowy Bootstrap 4 przeszedł również inne ulepszenia JavaScript, takie jak sprawdzanie typu opcji, ogólne metody łez, i Obsługa UMD, wszystko to będzie działać razem, aby najpopularniejsza struktura frontendowa działała sprawniej niż kiedykolwiek wcześniej.

Odczyt: 10 lekkich alternatyw dla Bootstrap & Foundation