Wprowadzenie do Bootstrap 5

Co to jest Bootstrap?

  • Co to jest Bootstrap?
  • Bootstrap zawiera projektowane na HTML i CSS szablony, które są używane do formatowania, formularzy, przycisków, tabel, nawigacji, modalnych okien, pokazów slajdów obrazów itp.
  • Bootstrap oferuje bogaty zestaw wtyczek JavaScript
  • Bootstrap umożliwia łatwe tworzenie projektów responsywnych

Co to jest responsywny projekt stron internetowych?

Responsywny projekt stron internetowych ma na celu tworzenie stron, które automatycznie dostosowują się do wszystkich urządzeń, niezależnie od telefonu czy dużego komputera stacjonarnego, aby poprawić doświadczenie użytkownika.

Przykład Bootstrap 5

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Moja pierwsza strona Bootstrap</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Wiersz 1: Wiosna</h3>
      <p>W słoneczny dzień szukam kwiatów nad rzeką Si, wszystkie widoki są nowe.</p>
      <p>Bez trudności rozpoznaję twarz wiatru wiosennego, tysiące kolorów to wiosna.</p>
    </div>
    <div class="col-sm-4">
      <h3>Wiersz 2: Koniec wiosny</h3>
      <p>Cały świat róż i fiołków stał się pyłem, w dźwięku koguta letni czas się zaczął.</p>
      <p>Ścieżka przez lasy klonu i konopi nie ma końca, zrozumiałem, że jestem mieszkańcem太平.</p>
    </div>
    <div class="col-sm-4">
      <h3>Wiersz 3: Podróż na górę</h3>
      <p>Odległe góry, ścieżki kamienne są strome, w miejscu, gdzie białe chmury powstają, jest dom.</p>
      <p>Stojąc w parku klonu, kocham wieczór, liście mrozem są czerwone jak kwiaty w lutym.</p>
    </div>
  </div>
</div>

Spróbuj sam

Wersja Bootstrap

Bootstrap 5 (wydana w 2021 roku) to najnowsza wersja Bootstrap (wydana w 2013 roku); używa nowych komponentów, szybszych stylów, oferując szybszą reaktywność.

Bootstrap 5 obsługuje najnowsze stabilne wersje wszystkich głównych przeglądarek i platform. Jednak nie obsługuje Internet Explorer 11 i wcześniejszych wersji.

Główna różnica między Bootstrap 5 a Bootstrap 3 & 4 polega na tym, że Bootstrap 5 przejdzie na Vanilla JavaScript zamiast jQuery.

Komentarz:Zespół nadal wspiera kluczowe poprawki błędów i zmiany dokumentacji Bootstrap 3 i Bootstrap 4, więc ich kontynuacja jest całkowicie bezpieczna. Jednak nie będą wprowadzane żadne nowe funkcje.

Dlaczego warto używać Bootstrap?

Zalety Bootstrap:

  • Łatwość użycia:Każdy, kto ma podstawową wiedzę na temat HTML i CSS, może natychmiast zacząć używać Bootstrap.
  • Właściwości reaktywne:CSS reaktywne Bootstrap można dostosować do telefonów, tabletów i komputerów stacjonarnych.
  • Metoda na urządzenia mobilne:W Bootstrap, stylowanie na urządzenia mobilne jest częścią głównego szkieletu.
  • Kompatybilność przeglądarki:Bootstrap 5 jest kompatybilny z wszystkimi nowoczesnymi przeglądarkami (Chrome, Firefox, Edge, Safari i Opera).

Uwaga:Jeśli potrzebujesz obsługi IE11 i wcześniejszych wersji, musisz używać BS4 lub BS3.

Skąd uzyskać Bootstrap 5?

Są dwa sposoby, aby używać Bootstrap 5 na swojej stronie.

Możesz:

  • Zawiera Bootstrap 5 z CDN
  • Pobierz Bootstrap 5 z getbootstrap.com

Bootstrap 5 CDN

Jeśli nie chcesz pobrać i hostować Bootstrap 5 samodzielnie, możesz go odnosić z CDN (networka dostarczania treści).

CodeW3C.com oferuje wsparcie CDN dla CSS i JavaScript Bootstrap:

MaxCDN:

<!-- Najnowsze skompilowane i skompresowane CSS -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- Najnowsze skompilowane JavaScript -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

Jednym z zalet użycia Bootstrap 5 CDN jest:

Wiele użytkowników już pobrało Bootstrap 5 z jsDelivr podczas odwiedzania innej strony. Zatem, gdy odwiedzą Twoją stronę, zostanie ona załadowana z pamięci podręcznej, co skraca czas ładowania. Ponadto, większość CDN zapewnia, że po pierwszym żądaniu pliku, będzie on dostarczany z najbliższego serwera, co również prowadzi do szybszego czasu ładowania.

JavaScript?

Bootstrap 5 używa JavaScript do różnych komponentów (np. modal, tooltip, pop-up itp.). Ale jeśli używasz tylko części CSS Bootstrap, nie są one potrzebne.

Pobierz Bootstrap 5

Jeśli chcesz pobrać i hostować Bootstrap 5 samodzielnie, odwiedź https://getbootstrap.com/, a następnie postępuj zgodnie z instrukcjami tam.

Użyj Bootstrap 5 do stworzenia swojej pierwszej strony internetowej

1. Dodaj HTML5 doctype

Bootstrap 5 używa elementów HTML i atrybutów CSS wymagających doctype HTML5.

Zawsze włącz HTML5 doctype na początku strony oraz atrybut lang oraz poprawny tytuł i zestaw znaków:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 przykład</title>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 5 priorytet mobilny

Cel projektowania Bootstrap 5 to responsywne urządzenia mobilne. Styl priorytetu mobilnego jest częścią głównego frameworka.

Aby zapewnić poprawne renderowanie i skalowanie dotykowe, proszę <head> Dodaj do elementu następujące <meta> Znacznik:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width Ustawia szerokość strony, aby śledziła szerokość ekranu urządzenia (co może się różnić w zależności od urządzenia).

initial-scale=1 Ustawia początkowy poziom skalowania przeglądarki przy pierwszym ładowaniu strony.

3. Kontener

Bootstrap 5 jeszcze potrzebuje elementów do opakowania treści strony.

Istnieją dwa typy klas kontenerów do wyboru:

  1. .container Klasa dostarcza responsywny kontener o stałej szerokości
  2. .container-fluid Klasa dostarcza kontener szeroki na pełną szerokość, przekraczając całą szerokość okna przeglądarki

Dwie podstawowe strony Bootstrap 5

Przykład kontenera

Poniżej znajduje się kod podstawowej strony Bootstrap 5 (z kontenerem o stałej szerokości, który jest responsywny):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Przykład Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>Moja pierwsza strona Bootstrap</h1>
  <p>Ten fragment znajduje się w klasie .container.</p>
  <p>.container klasa dostarcza kontener o stałej szerokości, który jest responsywny.</p>
</div>
</body>
</html>

Spróbuj sam

Przykład kontenera płynnego

Poniżej znajduje się kod podstawowej strony Bootstrap 5 (z kontenerem szerokim na pełną szerokość):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Przykład Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>Moja pierwsza strona Bootstrap</h1>
  <p>Ten fragment znajduje się w klasie .container-fluid.</p>
  <p>.container-fluid klasa dostarcza kontener szeroki na pełną szerokość, przekraczając całą szerokość okna przeglądarki.</p>
</div>
</body>
</html>

Spróbuj sam