Bootstrap 5 to najnowsza wersja frameworka Bootstrap, która pozwala użytkownikom tworzyć responsywne strony internetowe zbudowane z techniki mobilnej. Bootstrap 5 został wydany w 2021 roku i ma wiele cech wyróżniających się, takich jak szybkie arkusze stylów i zwiększona reakcja. W tym samouczku zademonstrujemy, w jaki sposób możesz utworzyć prostą stronę internetową za pomocą Bootstrap 5.

Zaczynajmy.

Jak utworzyć pierwszą stronę internetową za pomocą Bootstrap 5

Dołącz bootstrap 5

Pierwszym krokiem jest oczywiście dodanie Bootstrap 5 do pliku HTML. W celu włączenia Bootstrap 5 uzyskaj CDN dla CSS i JavaScript i dodaj go do pliku, jak pokazaliśmy poniżej.

Oprócz CDN dodaliśmy również zestaw znaków UTF-8 wraz z responsywną meta tag. W tym znaczniku szerokość jest ustawiona na szerokość urządzenia, co oznacza, że ​​szerokość strony internetowej zmieni się w korespondencji do szerokości urządzenia, podczas gdy skala początkowa jest ustawiona na 1, co oznacza, że ​​strona internetowa jest ładowana przez przeglądarkę Po raz pierwszy poziom powiększenia wyniesie 1.

Zrób pasek nawigacyjny

Po włączeniu Bootstrap 5 do naszego pliku stworzymy teraz najlepszy pasek nawigacyjny za pomocą różnych klas Bootstrap 5.

Poniżej wyjaśnimy różne klasy używane do utworzenia paska nawigacyjnego.

1. .Navbar służy do owinięcia paska nawigacyjnego wraz z .Navbar-Expand-SM W międzyczasie responsywne upadki .BG-Secondary I .Navbar-Dark to różne schematy kolorów dostarczone dla paska nawigacyjnego.
2. .pojemnik Klasa obejmuje wszystkie elementy paska nawigacyjnego z szerokością stałą.
3. .tekst-biały I .Centrum tekstu Zajęcia odpowiadają koloru i wyrównaniu głównego nagłówka witryny.
4. .Navbar-Nav służy do tworzenia paska nawigacyjnego, który ma maksymalną wysokość i jest lekki, a także obsługuje rozwijane rozwijane. Tymczasem, .ML-AUTO ustawia lewy margines elementów listy na automatyczne.
5. .Nav-Item, I .Nav-Link służą do tworzenia różnych elementów listy na pasku nawigacji.
6. .aktywny klasa jest aktywna.

Wyjście

Pasek nawigacyjny został pomyślnie stworzony.

Dodawanie treści

Teraz, gdy pomyślnie utworzyliśmy pasek nawigacyjny, dodamy niektóre treści na stronie internetowej. W poniższym kodzie dodajemy tylko tekst do sekcji „O nas”.

O nas

Cześć. Witaj na mojej pierwszej stronie internetowej. To jest responsywna strona internetowa, którą stworzyłem za pomocą Bootstrap 5. Bootstrap to najnowsza wersja frameworka Bootstrap, która pozwala użytkownikom tworzyć responsywne strony internetowe za pomocą techniki mobilnej. Takie podejście stwierdza, że ​​projektowanie stron internetowych jest najpierw opracowywane 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.

Wyjaśniono różne klasy używane do dodawania treści na stronie internetowej.

1. .wiersz Tymczasem klasa tworzy rząd, w którym zamierzamy umieścić nasz tekst, .Wyrównanie-pozycje-lew Klasa wyrównuje zawartość po lewej stronie.
2. .przełęcz klasa generuje kolumnę, podczas gdy .kolor tekstu Klasa zapewnia domyślny kolor dla tekstu.

Notatka: W celu dodania treści w zasadzie zbudowaliśmy powyższy system siatki. System siatki w Bootstrap 5 wykorzystuje różne pojemniki, wiersze i kolumny do dostosowywania i wyrównania zawartości.

Wyjście

Niektóre treści zostały dodane do strony internetowej.

Dodawanie galerii obrazów

Aby nasza witryna była bardziej interesująca, dodajemy teraz kilka zdjęć, budując inny system siatki.

Tutaj wyjaśniliśmy klasy używane powyżej.

1. .Col-MD-4 Klasa tworzy cztery kolumny o równej szerokości i określa, że ​​szerokość urządzenia jest średnia lub większa niż 768px, tymczasem szerokość pojemnika wynosi 720px.
2. .MT-3 klasa zapewnia margines układu do układu siatki.
3. .Col-LG-3 Klasa tworzy 3 kolumny o równej szerokości i stwierdza, że ​​szerokość urządzenia jest duża, mając rozmiar ekranu większy lub równy 992px.
4. Na koniec obrazy reagują .IMG-fluiKlasa D.

Wyjście

Z powodzeniem dodano responsywną galerię obrazów.

Dodanie przycisku

Na koniec dodamy przycisk na naszej stronie internetowej.

Skontaktuj się z nami

Zajęcia używane do utworzenia przycisku są omówione poniżej.

1. .MT-2 ustawia wierzch marginesu przycisku.
2. W celu dostosowania naszego przycisku używamy .Btn Tymczasem klasa .BTN-Secondary klasa określa kolor przycisku i .Btn-Large klasa stwierdza rozmiar przycisku.

Wyjście
Tak wygląda pełna strona internetowa.

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

Notatka: Aby ocenić reakcję strony internetowej skali przeglądarki internetowej w górę iw dół.

Wniosek

Aby utworzyć pierwszą stronę internetową za pomocą Bootstrap 5, musisz mieć podstawowe zrozumienie różnych wbudowanych klas Bootstrap 5. Podstawową koniecznością tych ram jest pojemnik, który obejmuje w nim elementy. Klasy kontenerów mogą być używane z innymi klasami do budowy różnych podmiotów, które ma stronę internetową, takie jak pasek nawigacyjny, siatka obrazu, przyciski itp. W tym artykule zademonstrowaliśmy za pomocą odpowiedniego przykładu, w jaki sposób możesz utworzyć pierwszą stronę internetową za pomocą Bootstrap 5.