Home-theater-designers
Bootstrap 5 ma duże zmiany, w tym rezygnację z obsługi Internet Explorera (IE) i zależności od jQuery. Opracowany przez Twittera Bootstrap jest najpopularniejszym na świecie frameworkiem CSS. Struktura interfejsu użytkownika o otwartym kodzie źródłowym ma na celu pozycjonowanie się na przyszłość, co spowodowało przełomowe zmiany w wersji 5.
Spadek Bootstrap dla IE sprawił, że stało się to pierwszym narzędziem do tworzenia stron internetowych, które to zrobiło. Ruch ten pojawia się, gdy udział w rynku Internet Explorera nadal maleje, stanowiąc mniej niż 3% wszystkich przeglądarek internetowych.
Czytaj dalej, aby zobaczyć, jakie jeszcze ulepszenia wprowadzono w Bootstrap i jak one wpływają na Ciebie.
1. Wsparcie jQuery
Bootstrap nie będzie już korzystał z biblioteki jQuery. Zespół programistów ulepszył bibliotekę JavaScript, aby wprowadzić tę zmianę. Zależność jQuery niekoniecznie była złą rzeczą w Bootstrap.
W rzeczywistości wprowadzenie jQuery radykalnie zmieniło sposób korzystania z JavaScript. Upraszczał pisanie zadań w JavaScript, które w innym przypadku zajęłyby wiele linii kodu.
Związane z: Dowiedz się, jak stworzyć element w jQuery
Mimo to zespół postanowił się tego pozbyć. Ma to zaletę mniejszych plików źródłowych i dłuższych czasów ładowania strony. To była bardzo potrzebna zmiana, dzięki której Bootstrap zyskuje bardziej przyjazny dla przyszłości styl.
Rozmiar pliku źródłowego zmniejszył się o 85 KB zminifikowanego kodu JavaScript, co jest kluczowe, ponieważ Google bierze pod uwagę czas ładowania strony w witrynach mobilnych jako czynnik rankingowy.
O ile korzystanie z jQuery nie jest już potrzebne w Bootstrap 5, nadal możesz go używać, jeśli chcesz. Warto również zauważyć, że wszystkie wtyczki JavaScript pozostają dostępne.
2. Niestandardowe właściwości CSS
Pomijając obsługę Internet Explorera, można użyć niestandardowych właściwości CSS (zmiennych). IE nie obsługuje właściwości niestandardowych — to tylko jeden powód, dla którego przez długi czas powstrzymywał twórców stron internetowych.
Niestandardowe właściwości CSS sprawiają, że CSS jest bardziej elastyczny i programowalny. Zmienne CSS są poprzedzone -bs aby zapobiec konfliktom z CSS stron trzecich.
Dostępne są dwa typy zmiennych: zmienne główne i zmienne składowe.
Dostęp do zmiennych głównych można uzyskać wszędzie tam, gdzie ładowany jest Bootstrap CSS. Zmienne te znajdują się w _root.scss plik i są częścią skompilowanych plików dist.
Zmienne komponentów są używane jako zmienne lokalne w poszczególnych komponentach. Pomagają one uniknąć przypadkowego dziedziczenia stylów w komponentach, takich jak tabele zagnieżdżone.
3. Ulepszony system siatki
Ponieważ wystąpiły pewne problemy podczas aktualizacji z wersji 3 do 4, Bootstrap 5 tym razem zachowuje większość systemu, opierając się na istniejącym systemie zamiast całkowicie go zmieniać. Niektóre ze zmian to:
- Klasa rynny ( .chłopcy ) został zastąpiony narzędziem ( .g* ) podobnie jak margines i dopełnienie
- Uwzględniono również klasy odstępów w pionie
- Kolumny nie są już domyślnie ustawione na pozycja: względna
4. Ulepszona dokumentacja
Dokumentacja została wzbogacona o więcej informacji, zwłaszcza jeśli chodzi o dostosowywanie. Częstym problemem było to, że w przypadku wielu witryn korzystających z Bootstrap można od razu zidentyfikować, że korzysta ona z Bootstrap. Bootstrap 5 ma teraz nowy wygląd i obsługę oraz lepszą personalizację.
Masz teraz większą elastyczność w dostosowywaniu motywów, dzięki czemu nie każda witryna lub aplikacja ma takie samo podobieństwo. Strona tematyczna v4 została rozszerzona o więcej treści i fragmentów kodu do tworzenia na bazie plików Sass (popularnego preprocesora CSS). Możesz również znaleźć startowy projekt npm na platformie GitHub, który jest dostępny jako repozytorium szablonów.
Paleta kolorów została również rozszerzona w wersji 5. Rozszerzony wbudowany system kolorów oznacza, że możesz łatwo stylizować swoje kolory bez konieczności opuszczania bazy kodu. Wykonano również więcej pracy w celu poprawy kontrastu kolorów, w tym dodanie metryki kontrastu kolorów w dokumentacji kolorów Bootstrap.
5. Ulepszone sterowanie formularzami
Bootstrap poprawił kontrolki formularzy, grupy danych wejściowych i nie tylko.
W wersji 4 Bootstrap używał niestandardowych kontrolek formularzy oprócz domyślnych ustawień każdej przeglądarki. W wersji 5 wszystkie są teraz dostosowane. Wszystkie przyciski opcji, pola wyboru, plik, zakres i inne, aby nadać im ten sam wygląd i zachowanie w różnych przeglądarkach.
Nowe kontrolki formularzy nie zawierają już niepotrzebnych kolorowych znaczników, ale skupiają się na standardowych i logicznych funkcjach projektu.
6. Bootstrap 5 dodaje API narzędzi
Po nowych bibliotekach CSS, takich jak Tailwind CSS, Bootstrap dodaje teraz także bibliotekę narzędzi. Zespół bootstrap twierdzi, że cieszy się, widząc, jak inni programiści kwestionują sposób, w jaki budowaliśmy sieć przez ostatnią dekadę.
Narzędzia nabierają rozpędu w społeczności programistów, a zespół bootstrapowy to zauważył. Zespół wcześniej dodał rezerwę na narzędzia w wersji 4 przy użyciu global $włącz-* zajęcia. W v5 zmienili się na podejście API oraz nowy język i składnię w Sass. Daje to możliwość tworzenia nowych narzędzi, a jednocześnie umożliwia usuwanie lub modyfikowanie podanych wartości domyślnych.
Aby zapewnić lepszą organizację, niektóre narzędzia, które były w wersji 4, zostały przeniesione do sekcji Pomocnicy.
7. Nowa biblioteka ikon Bootstrapa
Bootstrap oferuje teraz własną bibliotekę ikon SVG o otwartym kodzie źródłowym z ponad 1300 ikonami. Jest on wykonany na zamówienie dla komponentów frameworka, ale nadal możesz z nimi pracować w dowolnym projekcie.
Biorąc pod uwagę, że są to obrazy SVG, można je szybko skalować i można je zaimplementować na wiele sposobów, a także stylizować za pomocą CSS.
Możesz zainstalować ikony za pomocą npm:
$ npm i bootstrap-iconsZainstaluj Bootstrap 5
Możesz przejść do Oficjalna strona pobierania Bootstrap 5 jeśli chcesz go zainstalować. Jeśli chcesz być na bieżąco z najnowszą wersją rozwojową, możesz użyć npm wyciągnąć go:
$ npm i bootstrap@next
W chwili pisania tego tekstu framework jest w wersji Beta 3. Oznacza to, że oprogramowanie jest bezpieczne w użyciu, ale wciąż jest w fazie rozwoju. Zachęcamy do wyrażenia opinii zespołowi i wniesienia niezbędnego wkładu.
Udział Udział Ćwierkać E-mail Wprowadzenie do komponentów sieciowych i architektury opartej na komponentachPrzyjrzyjmy się typowym komponentom sieciowym i zobaczmy, dlaczego są przydatne.
Czytaj dalej Powiązane tematy- Programowanie
- Tworzenie stron internetowych
- JavaScript
- CSS
Jerome jest pisarzem sztabowym w MakeUseOf. Zajmuje się artykułami na temat programowania i systemu Linux. Jest także entuzjastą kryptowalut i zawsze śledzi branżę kryptograficzną.
Więcej od Jerome'a DavidsonaZapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
jak zmienić lokalizację kopii zapasowej dla mojego iPhone'a?Kliknij tutaj, aby zasubskrybować