HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap 4 Rozpocznij

❮ Poprzedni Następny ❯

Co to jest Bootstrap?

  • Bootstrap to darmowy framework front-end do szybszego i łatwiejszego tworzenia stron internetowych
  • Bootstrap zawiera szablony projektowe oparte na HTML i CSS dla typografii, formularzy, przycisków, tabel, nawigacji, modów, karuzeli obrazów i wielu innych, a także opcjonalne wtyczki JavaScript
  • Bootstrap daje również możliwość łatwego tworzenia responsywnych projektów

Czym jest responsywne projektowanie stron internetowych?

Responsywne projektowanie stron internetowych polega na tworzeniu stron internetowych, które automatycznie dostosowują się, aby dobrze wyglądać na wszystkich urządzeniach, od małych telefonów po duże komputery stacjonarne.

Bootstrap 4 Przykład

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>

Wersje Bootstrapa

Ten samouczek jest zgodny z Bootstrap 4 , który został wydany w 2018 roku jako aktualizacja do Bootstrap 3 , z nowymi komponentami, szybszym arkuszem stylów, większą responsywnością itp.

Bootstrap 5 (wydany w 2021 r.) to najnowsza wersja Bootstrap ; Obsługuje najnowsze, stabilne wydania wszystkich głównych przeglądarek i platform. Jednak Internet Explorer 11 i starsze nie są obsługiwane.

Główna różnica między Bootstrapem 5 a Bootstrapem 3 i 4 polega na tym, że Bootstrap 5 przełączył się na JavaScript zamiast jQuery .

Uwaga: Bootstrap 3 i Bootstrap 4 są nadal wspierane przez zespół w zakresie krytycznych poprawek błędów i zmian w dokumentacji, a dalsze ich używanie jest całkowicie bezpieczne. Jednak NIE zostaną do nich dodane nowe funkcje.

Dlaczego warto korzystać z Bootstrapa?

Zalety Bootstrapa:

  • Łatwy w użyciu: każdy, kto ma tylko podstawową wiedzę na temat HTML i CSS, może zacząć korzystać z Bootstrap
  • Funkcje responsywne: Responsywny CSS Bootstrap dostosowuje się do telefonów, tabletów i komputerów stacjonarnych
  • Podejście mobile-first: w Bootstrap style mobile-first są częścią podstawowego frameworka
  • Kompatybilność z przeglądarkami: Bootstrap 4 jest kompatybilny ze wszystkimi nowoczesnymi przeglądarkami (Chrome, Firefox, Internet Explorer 10+, Edge, Safari i Opera)

Skąd wziąć Bootstrapa 4?

Istnieją dwa sposoby na rozpoczęcie korzystania z Bootstrap 4 na własnej stronie internetowej.

Możesz:

  • Dołącz Bootstrap 4 z CDN
  • Pobierz Bootstrap 4 z getbootstrap.com

Bootstrap 4 CDN

Jeśli nie chcesz samodzielnie pobierać i hostować Bootstrap 4, możesz dołączyć go z sieci CDN (Content Delivery Network).

jsDelivr zapewnia obsługę CDN dla CSS i JavaScript Bootstrap. Musisz również dołączyć jQuery:

jsDelivr:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Jedna z zalet korzystania z usługi Bootstrap 4 CDN:
Wielu użytkowników pobrało już Bootstrap 4 z jsDelivr podczas odwiedzania innej witryny. W rezultacie zostanie załadowany z pamięci podręcznej, gdy odwiedzą Twoją witrynę, co prowadzi do szybszego czasu ładowania. Ponadto większość sieci CDN upewni się, że gdy użytkownik zażąda od niego pliku, zostanie on udostępniony z najbliższego serwera, co również prowadzi do szybszego czasu ładowania.

jQuery i Poppera?
Bootstrap 4 używa jQuery i Popper.js dla komponentów JavaScript (takich jak modals, tooltips, popovers itp.). Jeśli jednak używasz tylko części CSS w Bootstrap, nie potrzebujesz ich.

  • Zamykane alerty
  • Przyciski i pola wyboru/przyciski radiowe do przełączania stanów
  • Karuzela na slajdy, kontrolki i wskaźniki
  • Zwiń, aby przełączyć zawartość
  • Dropdowns (also requires Popper.js for perfect positioning)
  • Modals (open and close)
  • Navbar (for collapsible menus)
  • Tooltips and popovers (also requires Popper.js for perfect positioning)
  • Scrollspy for scroll behavior and navigation updates

Pobieranie Bootstrapa 4

Jeśli chcesz samodzielnie pobrać i hostować Bootstrap 4, przejdź do https://getbootstrap.com/ i postępuj zgodnie z podanymi tam instrukcjami.

Utwórz pierwszą stronę internetową za pomocą Bootstrapa 4

1. Dodaj dokument HTML5

Bootstrap 4 używa elementów HTML i właściwości CSS, które wymagają doctype HTML5.

Zawsze dołączaj dokument HTML5 na początku strony, wraz z atrybutem lang i poprawnym zestawem znaków:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 4 jest zorientowany na urządzenia mobilne

Bootstrap 4 został zaprojektowany tak, aby reagować na urządzenia mobilne. Style zorientowane na urządzenia mobilne są częścią podstawowej struktury.

Aby zapewnić prawidłowe renderowanie i powiększanie dotykiem, dodaj następujący <meta>tag wewnątrz <head>elementu:

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

Część width=device-widthustawia szerokość strony zgodnie z szerokością ekranu urządzenia (która będzie się różnić w zależności od urządzenia).

Część initial-scale=1ustawia początkowy poziom powiększenia, gdy strona jest ładowana po raz pierwszy przez przeglądarkę.

3. Pojemniki

Bootstrap 4 wymaga również elementu zawierającego do zawijania zawartości witryny.

Do wyboru są dwie klasy kontenerów:

  1. Klasa .containerzapewnia responsywny kontener o stałej szerokości
  2. Klasa .container-fluidzapewnia kontener o pełnej szerokości , obejmujący całą szerokość okna roboczego
.pojemnik
.pojemnik-płyn

Dwie podstawowe Bootstrap 4 strony

Poniższy przykład przedstawia kod podstawowej strony Bootstrap 4 (z responsywnym kontenerem o stałej szerokości):

Przykład kontenera

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

Poniższy przykład przedstawia kod podstawowej strony Bootstrap 4 (z kontenerem o pełnej szerokości):

Przykład płynu w pojemniku

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

❮ Poprzedni Następny ❯