Bootstrap to rama CSS, która została zaprojektowana do tworzenia responsywnych stron internetowych, a zwłaszcza stron internetowych opracowanych dla telefonów komórkowych przed zaprojektowaniem dla dowolnego innego typu urządzenia. Ramy te zostały opracowane przy użyciu HTML, CSS i JavaScript i składa się z szablonów do tworzenia różnych elementów, takich jak przyciski, formy, rozwijane i wiele innych. Ponadto ramy te są open source i jest również bezpłatne w użyciu.

Jak sugeruje tytuł artykułu, tutaj głównym celem naszej dyskusji będzie Bootstrap 5. Dlatego bez zbędnych ceregieli, zacznijmy.

Co to jest Bootstrap 5?

Bootstrap 5 to najnowsza wersja frameworka Bootstrap, która pozwala użytkownikom tworzyć niesamowite strony z szybkimi arkuszami CSS i ulepszoną reaktywność. Został wprowadzony na rynek w 2021 roku i jest wspierany przez prawie wszystkie przeglądarki i platformy. \

Cechy bootstrap

Niektóre z wyróżniających się funkcji Bootstrap 5 są następujące.

1. Ta najnowsza wersja Bootstrap jest lekka i można ją dostosować zgodnie z potrzebami użytkowników.
2. Składa się z zwiększonej reakcji.
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. Jest szybszy, tym samym oszczędzając dużo czasu i energii.

Bootstrap 5 vs. inne wersje

W porównaniu z innymi wersjami, w szczególności wersja 3 i wersja 4, Bootstrap 5 używa waniliowego JavaScript, a nie jQuery. Jednak starsze wersje mogą być nadal używane do naprawy błędów lub zmiany dokumentacji.

Teraz, gdy mamy podstawowe wprowadzenie tego, czym jest Bootstrap 5, zbudujmy naszą pierwszą stronę internetową za pomocą tej frameworka.

Mój pierwszy program Bootstrap5

Aby użyć Bootstrap 5, oczywiście musisz go najpierw zainstalować. Możesz dołączyć tę framework z sieci dostarczania treści, albo pobrać i zainstalować ją z Bootstrap.com. Pierwsze podejście jest preferowane, jeśli nie chcesz hostować Bootstrap 5. Poniżej podaliśmy CDN Bootstrap 5.

Dla CSS

Dla JavaScript

Teraz, gdy mamy nasz CDN, zbudujmy stronę internetową za pomocą Bootstrap 5. Poniżej przedstawiliśmy przewodnik krok po kroku.

Krok 1
Pierwszym krokiem do użycia Bootstrap 5 jest włączenie html5 DocType, aby Bootstrap 5 mógł pełne wykorzystanie różnych elementów HTML i właściwości CSS.

>

Oprócz html5 Doctype, uwzględniliśmy również atrybut LANG wraz z zestawem znaków.

Krok 2
Jak wiemy Bootstrap 5 opracowuje stronę internetową z podejściem mobilnym, więc następnym krokiem jest dodanie responsywnego meta tag.

Dołącz następujące tag.

Krok 3
Podstawową koniecznością Bootstrap 5 jest włączenie kontenera w celu owinięcia treści witryny. Te pojemniki w zasadzie obejmują w nich elementy. 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-płyn Aby stworzyć kontener pełnej szerokości, który obejmuje całkowitą szerokość rzutni.

Krok 4
W tym kroku będziemy dodawać trochę treści, aby utworzyć naszą stronę internetową za pomocą kontenera o stałej szerokości. Utrzymujemy nasz program bardzo prosty, aby jako początkujący łatwo było zrozumieć 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.

W powyższym kodzie, za pomocą klasy kontenera utworzyliśmy element DIV, który dodatkowo gniazduje nagłówek, i dwa akapity. Aby zobaczyć pełny efekt Bootstrap 5 rozmiar okna przeglądarki. Na poniższym wyjściu pokazaliśmy, jak wygląda strona na losowych rozmiarach ekranu.

Wyjście
Gdy szerokość ekranu wynosi 837px i powyżej.

Gdy szerokość ekranu wynosi 677px i mniejsza.

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

Wniosek

Bootstrap 5 to najnowsza wersja frameworka CSS Bootstrap, która pozwala użytkownikom tworzyć witryny reagujące na przyrodę i przy podejściu mobilnym. Ta wersja ma szybkie arkusze stylów i zwiększoną reakcję i została uruchomiona w 2021 roku. Ma wiele niesamowitych funkcji, które odróżniają go od innych wersji. W porównaniu z innymi wersjami, w szczególności wersja 3 i wersja 4, Bootstrap 5 używa waniliowego JavaScript, a nie jQuery. Ten samouczek obejmuje wszystkie niezbędne szczegóły dotyczące Bootstrap 5 wraz z prostym programem.