Bootstrap 5 to najnowsza wersja frameworka Bootstrap, która pozwala użytkownikom tworzyć witryny, które są responsywne z natury i ze podejściem mobilnym. Takie podejście określa, że ​​projekt internetowy jest najpierw opracowywany dla telefonów komórkowych, a później dla innych urządzeń. Bootstrap 5 został wydany w 2021 roku i ma wiele niesamowitych funkcji, takich jak szybkie arkusze stylów i ulepszona reakcja. Tutaj poprowadzimy Cię, jak zacząć od Bootstrap 5, ale wcześniej dowiedzmy się trochę więcej o Bootstrap 5.

Charakterystyka bootstrap 5

Bootstrap 5 ma wiele funkcji, które wyróżniają się wśród innych wersji. Kilka z tych cech wymieniono poniżej.

1. Ta najnowsza wersja Bootstrap jest bardzo przyjazna dla użytkownika.
2. Ma szybką reakcję.
3. Jest przydatny do opracowywania stron internetowych, które są najpierw zaprojektowane do telefonów komórkowych, a inne urządzenia później.
4. Te ramy są kompatybilne ze wszystkimi nowoczesnymi przeglądarkami.
5. To jest szybkie, tym samym oszczędzając dużo czasu i energii.

Bootstrap 5 vs. Bootstrap 3 i 4

W porównaniu z innymi wersjami Bootstrap, w szczególności wersja 3 i wersja 4, główną różnicą, którą można wskazać między innymi różnic.

Zdobądź bootstrap 5

Zanim zaczniesz korzystać z Bootstrap 5, oczywiście musisz go pobrać najpierw, a za to możesz uwzględnić go z sieci dostarczania treści lub pobrać i zainstalować z Bootstrap.com. Ze względu na ten samouczek zamierzamy uwzględnić Bootstrap 5 z CDN.

Dla CSS

Dla JavaScript

Teraz, gdy Bootstrap 5 jest uwzględniony, opracujmy nasz pierwszy program.

Pierwsze kroki z Bootstrap 5

Poniżej dostarczyliśmy ci przewodnik krok po kroku, jak zacząć z Bootstrap 5.

1. Zrób dokument HTML
Celem stworzenia pliku HTML za pomocą Bootstrap 5 jest włączenie html5 DocType, aby ta framework mogła całkowite wykorzystanie różnych elementów HTML i właściwości CSS.

Uwzględnij także atrybut LANG wraz z zestawem znaków. Kolejnym, który tu dodaliśmy, jest responsywny meta tag. Jak wiemy, Bootstrap 5 opracowuje stronę internetową z podejściem mobilnym, w tym responsywną metatag.

2. Dodaj bootstrap 5
Teraz po prostu dodaj CDN dla CSS i JavaScript w pliku HTML, aby bez problemu zacząć używać Bootstrap 5.

Oba CDN zostały dodane do znacznika. Innym podejściem do dodawania CDN JavaScript w pliku jest przed końcem znacznikiem ciała.

3. Dodaj elementy
Kod powyżej całkowicie brakuje znacznika, aby dodać trochę treści, utworzyć różne elementy HTML w treści pliku. Ponieważ celem tego postu jest pokazanie reakcji Bootstrap 5, dlatego przedstawiamy tutaj podstawową wiedzę na temat klas kontenerów bootstrap.

Podstawowym wymogiem Bootstrap 5 jest włączenie kontenera w celu owinięcia treści strony internetowej. Aby użyć tych pojemników, użyj następujących dwóch klas.

1. .pojemnik Aby zbudować pojemnik o stałej szerokości, ale responsywny.
2. .pojemnik-fluid, aby uzyskać pojemnik na pełną szerokość, który obejmuje całkowitą szerokość rzutni.

Tutaj będziemy korzystać z klasy pojemników, aby zademonstrować naszą pierwszą responsywną stronę za pomocą Bootstrap 5.

Bootstrap 5

Bootstrap 5 to najnowsza wersja frameworka Bootstrap, która pozwala użytkownikowi tworzyć niesamowite strony internetowe z szybkim CSS
arkusze stylów i ulepszona reakcja.

W porównaniu z innymi wersjami konkretnie wersja 3 i wersja 4, Bootstrap 5 używa waniliowego JavaScript, a nie
JQuery.

Korzystając z klasy pojemników-pływa

element i dwa

elementy. Skal okno przeglądarki w górę i w dół, aby zobaczyć efekt.

Wyjście

Responsywna strona internetowa została pomyślnie utworzona za pomocą Bootstrap 5.

Wniosek

Aby zacząć od Bootstrap 5, najpierw musisz wykonać podstawowy plik HTML, włączając html5 DocType, aby Bootstrap 5 może pełne wykorzystanie różnych elementów HTML i właściwości CSS. Następnie musisz zainstalować Bootstrap 5, albo zdobyć jego CDN i dołączyć go do dokumentu HTML. Następnie możesz zacząć tworzyć elementy, które chcesz pokazać na stronie internetowej. Na koniec zapisz swój plik i voila, utworzono pierwszą stronę Bootstrap 5. W tym samouczku kieruje Cię krok po kroku, jak zacząć z Bootstrap 5.