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 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.

Przykład Bootstrapa

<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>

Historia Bootstrapa

Bootstrap został opracowany przez Marka Otto i Jacoba Thorntona na Twitterze i wydany jako produkt open source w sierpniu 2011 r. na GitHub.

W czerwcu 2014 Bootstrap był projektem nr 1 na GitHub!

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
  • Responsywne funkcje: Responsywny CSS Bootstrap dostosowuje się do telefonów, tabletów i komputerów stacjonarnych
  • Podejście mobile-first: w Bootstrap 3 style mobile-first są częścią podstawowego frameworka
  • Kompatybilność z przeglądarkami: Bootstrap jest kompatybilny ze wszystkimi nowoczesnymi przeglądarkami (Chrome, Firefox, Internet Explorer, Edge, Safari i Opera)

Wersje Bootstrapa

Ten samouczek jest oparty na Bootstrap 3 , który został wydany w 2013 roku. Jednak omawiamy również nowsze wersje; Bootstrap 4 (wydany w 2018 r.) i Bootstrap 5 (wydany w 2021 r.) .

Bootstrap 5 to najnowsza wersja Bootstrap ; z nowymi komponentami, szybszymi arkuszami stylów, większą responsywnością itp. Obsługuje najnowsze, stabilne wersje 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.

Gdzie zdobyć Bootstrapa?

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

Możesz:

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

Pobieranie Bootstrapa

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

Bootstrap CDN

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

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

Max CDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Jedna z zalet korzystania z Bootstrap CDN:
Wielu użytkowników pobrało już Bootstrap z MaxCDN 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
Bootstrap używa jQuery do wtyczek JavaScript (takich jak mods, podpowiedzi itp.). Jeśli jednak używasz tylko części CSS w Bootstrap, nie potrzebujesz jQuery.

Utwórz pierwszą stronę internetową za pomocą Bootstrap

1. Dodaj dokument HTML5

Bootstrap 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 3 jest zorientowany na urządzenia mobilne

Bootstrap 3 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 wymaga również elementu zawierającego, aby zawinąć zawartość 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 strony Bootstrap

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

Przykład

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.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 (z kontenerem o pełnej szerokości):

Przykład

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.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 ❯