Bootstrap 4 - Szybki przewodnik

Czym jest Bootstrap 4?

Bootstrap 4 to potężna i popularna platforma front-end dla urządzeń mobilnych do tworzenia responsywnych, pierwszych witryn mobilnych w Internecie. Jest to najnowsza wersja Bootstrap , która wykorzystuje HTML, CSS i JavaScript.

Historia

Ostatnia stabilna wersja Bootstrap v3.3.7 miała miejsce w lipcu 2016 r., Aw sierpniu 2017 r. Wydano wersję beta Bootstrap 4.0.0.

Dlaczego warto korzystać z Bootstrap?

  • Zawiera mobilne pierwsze style w całej bibliotece, zamiast używać ich w oddzielnych plikach.

  • Dzięki znajomości HTML i CSS każdy może zacząć korzystać z Bootstrap. Również oficjalna strona Bootstrap ma dobrą dokumentację.

  • Jest obsługiwany przez wszystkie popularne przeglądarki, a jego responsywny CSS dostosowuje się do komputerów stacjonarnych, tabletów i telefonów komórkowych.

  • Zapewnia czyste i jednolite rozwiązanie do tworzenia interfejsu dla programistów.

  • Zawiera piękne i funkcjonalne wbudowane komponenty, które można łatwo dostosować.

  • Jest to oprogramowanie typu open source, które umożliwia dostosowywanie przez Internet.

Bootstrap 3 v / s Bootstrap 4

Bootstrap 4 to najnowsza wersja Bootstrap 3, którego źródłowe pliki CSS są konwertowane na SCSS. Używa modalnego flex dla systemu grid i obsługuje wszystkie najnowsze przeglądarki. Obsługuje jednak Internet Explorer 9+ i iOS 7+, a porzucono obsługę IE 8 i mniejszych wersji, iOS 6 i mniejszych wersji. Więcej informacji na temat różnic między Bootstrap 3 a Bootstrap 4 znajdziesz w tym rozdziale .

Możesz zacząć używać Bootstrap 4 w swojej witrynie, dołączając ją z CDN (Content Delivery Network) lub pobierając z getbootstrap.com .

Korzystanie z CDN

Bootstrap 4 może być używany w witrynie internetowej, włączając go z Content Delivery Network .

Użyj w swoim projekcie skompilowanego poniżej CDN Bootstrapa zawierającego CSS i JS.

<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet" 
   href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin = "anonymous">

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
   integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
   crossorigin = "anonymous">
</script>

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
   integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "anonymous">
</script>

Dołącz wersje CDN jQuery i Popper.js (Bootstrap 4 używa jQuery i Popper.js do korzystania z komponentów JavaScript, takich jak modały, podpowiedzi, popovers itp.) Przed zminimalizowanym JavaScriptem Bootstrap , jeśli używasz skompilowanej wersji JavaScript.

Oto kilka komponentów, które wymagają jQuery -

  • Służy do zamykania alertów

  • Przełączaj stany za pomocą przycisków i pól wyboru / przycisków opcji i zwiń, aby przełączać zawartość

  • Karuzela na slajdy, kontrolki i wskaźniki

  • Dropdowns (używa Popper.js do idealnego pozycjonowania)

  • Otwieranie i zamykanie modali

  • Do zwijania paska nawigacyjnego

  • Etykiety narzędzi i okna podręczne (używa Popper.js do idealnego pozycjonowania)

Pobieranie Bootstrap 4

Możesz pobrać Bootstrap 4 z https://getbootstrap.com/docs/4.1/getting-started/download/. Po kliknięciu tego linku zobaczysz ekran, jak pokazano poniżej -

Tutaj możesz zobaczyć dwa przyciski -

  • Download- Klikając to, możesz pobrać prekompilowane i zminimalizowane wersje CSS i JavaScript Bootstrap. Nie zawiera dokumentacji ani oryginalnych plików z kodem źródłowym.

  • Download Source - Klikając to, można uzyskać najnowszy Bootstrap SCSS, kod źródłowy JavaScript i pliki dokumentacji.

Dla lepszego zrozumienia i ułatwienia użytkowania, będziemy używać prekompilowanej wersji Bootstrap w całym tutorialu. Ponieważ pliki są zgodne i zminimalizowane, nie musisz za każdym razem zawracać sobie głowy dołączaniem oddzielnych plików dla poszczególnych funkcji.

Struktura plików

Skompilowany plik Bootstrap 4

Po pobraniu skompilowanej wersji Bootstrap 4 wypakuj plik ZIP, a zobaczysz następującą strukturę plików / katalogów -

Jak widać, są skompilowane CSS i JS (bootstrap. *), A także skompilowane i zminimalizowane CSS i JS (bootstrap.min. *).

Kod źródłowy Bootstrap 4

Jeśli pobrałeś kod źródłowy Bootstrap 4, struktura pliku byłaby następująca -

  • Pliki w katalogu js / i scss / to kod źródłowy dla Bootstrap CSS i JavaScript.

  • Dist / folderu obejmuje wszystko wymienione w skompilowany pobierania sekcji powyżej.

  • Dokumentacja / przykłady / zawiera kod źródłowy dokumentacji Bootstrap i przykłady użycia Bootstrap.

Tworzenie pierwszej strony internetowej za pomocą Bootstrap 4

Poniższy przykład określa prostą stronę internetową Bootstrap 4 -

Przykład

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
      href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

To da następujący wynik -

Wynik

Bootstrap 4 używa klas kontenerów do zawijania zawartości strony. Zawiera dwie klasy kontenerów -

  • .container - Reprezentuje kontener o stałej szerokości.

  • .container-fluid - Przedstawia pojemnik o pełnej szerokości.

Pojemnik

.Container klasa jest stosowany do zawijania zawartości strony ze stałą szerokość i zawartość może być umieszczony w środku łatwo za pomocą .container klasy, jak pokazano poniżej.

<div class = "container">
   ...
</div>

Przykład

Poniższy przykład określa prostą stronę internetową z kontenerem o stałej szerokości -

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
      <style>
         .container {
            background: #a52c644a;
            text-align: center;
            padding-top: 100px;
            padding-bottom: 100px;
         }   
      </style>
   </head>
   
   <body>
      <div class = "container">
         <h2>Fixed Width Container</h2>
         This is a simple web page with fixed width container by using 
         <code>.container</code> class.
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

To da następujący wynik -

Wynik

Pojemnik na płyn

Możesz utworzyć kontener o pełnej szerokości, używając klasy .container-fluid, jak pokazano poniżej.

<div class = "container-fluid">
   ...
</div>

Poniższy przykład określa prostą stronę internetową z kontenerem o pełnej szerokości -

Przykład

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
       <style>
         .container-fluid {
            background: #a52c644a;
            text-align: center;
            padding-top: 100px;
            padding-bottom: 100px;
         }   
      </style>
   </head>
   
   <body>
      <div class = "container-fluid">
         <h2>Full Width Container</h2>
         This is a simple web page with full width container by using 
         <code>.container-fluid</code> class.
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity =" sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

To da następujący wynik -

Wynik

Opis

System siatek Bootstrap 4 zbudowany na bazie flexbox, który jest w pełni responsywny i skaluje do 12 kolumn (w zależności od rozmiaru urządzenia), tworząc układ z wierszami i kolumnami w poprzek strony. Zapewnia responsywny, mobilny pierwszy system płynnej siatki, który skaluje kolumny wraz ze wzrostem wielkości urządzenia lub obszaru roboczego.

Działanie systemu Grid

  • Wiersze muszą być umieszczone w klasie .container, aby zapewnić prawidłowe wyrównanie i dopełnienie.

  • Aby uzyskać responsywną szerokość, użyj klasy .container i dla stałej szerokości we wszystkich rzutniach, użyj klasy .container-fluid .

  • Użyj wierszy, aby utworzyć poziome grupy kolumn.

  • Treść powinna być umieszczona w kolumnach, a tylko kolumny mogą być bezpośrednimi elementami podrzędnymi wierszy.

  • Kolumny zawierają wypełnienie do kontrolowania odstępu między nimi.

  • Jeśli umieścisz więcej niż 12 kolumn w rzędzie, kolumny zostaną umieszczone w nowej linii.

  • Kolumny tworzą przerwy między zawartością kolumn poprzez wypełnienie. Dlatego można usunąć marginesy z wierszy i dopełnienie z kolumn z klasą .no-gutters w wierszu.

  • Możesz sprawić, by system siatki odpowiadał za pomocą pięciu punktów przerwania siatki, takich jak bardzo mały, mały, średni, duży i bardzo duży.

  • Predefiniowane klasy siatki, takie jak .col-4, są dostępne do szybkiego tworzenia układów siatki. MNIEJSZE mieszanki mogą być również używane do bardziej semantycznych układów.

Opcje siatki

Poniższa tabela podsumowuje aspekty działania systemu grid Bootstrap 4 na wielu urządzeniach -

Bardzo małe urządzenia (<576 pikseli) Małe urządzenia (≥576 pikseli) Średnie urządzenia (≥768 pikseli) Duże urządzenia (≥992 piksele) Bardzo duże urządzenia (≥1200 pikseli)
Zachowanie siatki Poziomy przez cały czas Początek zwinięty, poziomo nad punktami przerwania Początek zwinięty, poziomo nad punktami przerwania Początek zwinięty, poziomo nad punktami przerwania Początek zwinięty, poziomo nad punktami przerwania
Maksymalna szerokość pojemnika Brak (automatycznie) 540px 720px 960px 1140px
Zajęcia klasowe .col- .col-sm- .col-md- .col-lg- .col-xl-
Liczba kolumn 12 12 12 12 12
Szerokość rynny

30px

(15 pikseli po każdej stronie kolumny)

30px

(15 pikseli po każdej stronie kolumny)

30px

(15 pikseli po każdej stronie kolumny)

30px

(15 pikseli po każdej stronie kolumny)

30px

(15 pikseli po każdej stronie kolumny)

Gniazdo tak tak tak tak tak
Kolejność kolumn tak tak tak tak tak

Podstawowa struktura siatki

Poniżej przedstawiono podstawową strukturę siatki Bootstrap 4 -

<div class = "container">
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>
   
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>	  
   </div>
   
   <div class = "row">...</div>
</div>

Przykład systemu siatki

Oto przykład systemu siatki Bootstrap 4 -

Przykład

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
      </style>
         .grid_system  div[class^="col"] {
            border: 1px solid white;
            background: #e4dcdc;
            text-align: center;
            padding-top: 5px;
            padding-bottom: 5px
         }
      </style>
   </head>
   
   <body>
      <div class = "grid_system">
         <div class = "row">
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
         </div>
         
         <div class = "row">
            <div class =" col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-6">.col-sm-6</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-5">.col-sm-5</div>
            <div class = "col-sm-7">.col-sm-7</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-6">.col-sm-6</div>
            <div class = "col-sm-6">.col-sm-6</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-12">.col-sm-12</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

To da następujący wynik -

Wynik

Tworzenie układów dwóch kolumn

Poniższy przykład opisuje tworzenie dwóch układów kolumn dla małych, średnich i dużych urządzeń. Na małych urządzeniach, takich jak telefony komórkowe, domyślnie kolumny automatycznie ustawiają się poziomo.

Przykład

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "grid_system">
         <div class = "row">
            <div class = "col-sm-6">.col-sm-6</div>
            <div class = "col-sm-6">.col-sm-6</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-7">.col-sm-7</div>
            <div class = "col-sm-5">.col-sm-5</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-8">.col-sm-8</div>
         </div>
		 
         <div class = "row">
            <div class = "col-sm-9">.col-sm-9</div>
            <div class = "col-sm-3">.col-sm-3</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

To da następujący wynik -

Wynik

Tworzenie układów trzech kolumn

Poniższy przykład opisuje tworzenie układów trzech kolumn dla średnich i dużych urządzeń. Jeśli rozdzielczość ekranu jest większa lub równa 992 piksele, będzie on wyświetlany w trybie poziomym na tabletach i jak zwykle będzie wyświetlany w trybie pionowym.

Przykład

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = " stylesheet" href = " https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "grid_system">
         <div class = "row">
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-5">.col-sm-5</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-2">.col-sm-2</div>
            <div class = "col-sm-8">.col-sm-8</div>
            <div class = "col-sm-2">.col-sm-2</div>
         </div>
		
         <div class = "row">
            <div class = "col-sm-2">.col-sm-2</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-7">.col-sm-7</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

To da następujący wynik -

Wynik

Opis

Bootstrap 4 wykorzystuje zbiór metod zawartości do wyświetlania tekstu, bloków kodu, responsywnych obrazów, danych w formacie tabelarycznym itp. Na stronie internetowej.

Poniższa tabela zawiera listę metod zawartości, których możesz użyć do manipulowania Bootstrap 4 -

S.No. Metody i opis
1

Typografia

Funkcja typografii tworzy nagłówki, akapity, listy i inne elementy wbudowane.

2

Kod

Służy do wyświetlania wbudowanych i wielowierszowych bloków kodu w dokumencie.

3

Zdjęcia

Bootstrap 4 zapewnia obsługę obrazów przy użyciu tagu <img>.

4

Tabele

Tabele służą do wyświetlania danych w formacie tabelarycznym.

5

Liczby

Element figure określa zawartość wraz z powiązanymi obrazami z opcjonalnym podpisem.

Opis

Bootstrap 4 wykorzystuje zbiór metod zawartości do wyświetlania tekstu, bloków kodu, responsywnych obrazów, danych w formacie tabelarycznym itp. Na stronie internetowej.

Poniższa tabela zawiera listę metod zawartości, których możesz użyć do manipulowania Bootstrap 4 -

S.No. Metody i opis
1

Alerty

Komponent alertu określa predefiniowany komunikat dotyczący działań użytkownika.

2

Odznaki

Odznaki służą do wyróżnienia dodatkowych informacji w treści.

3

Bułka tarta

Służy do wyświetlania informacji o witrynie opartych na hierarchii.

4

guziki

Bootstrap zapewnia klikalny przycisk do umieszczania treści, takich jak tekst i obrazy.

5

Grupa przycisków

Grupy przycisków pozwalają na zestawianie wielu przycisków w jednej linii.

6

Karty

Karta to pojemnik na zawartość, który wyświetla obramowane pole otoczone odrobiną wyściółki.

7

Karuzela

Carousel to elastyczny, responsywny sposób dodawania suwaka do witryny.

8

Zawalić się

Służy do pokazywania lub ukrywania treści.

9

Listy rozwijane

Menu rozwijane mogą być używane do wyświetlania łączy w formacie listy.

10

Formularze

Element formularza służy do zbierania danych wejściowych od użytkownika.

11

Grupa wejściowa

Korzystając z grup wprowadzania, możesz łatwo dodawać tekst lub przyciski przed tekstem i dodawać je do danych wejściowych.

12

Jumbotron

Zwiększa rozmiar nagłówków i dodaje dużo marginesu na zawartość strony docelowej.

13

Modalny

Modalne to okno potomne nałożone na swoje okno nadrzędne.

14

Navs

Bootstrap zapewnia elementy nawigacji dla Twojej witryny w poziomym menu.

15

Navbar

Pasek nawigacyjny udostępnia nagłówki nawigacji dla aplikacji lub witryny.

16

Paginacja

Paginacja służy do dzielenia powiązanych treści na wiele stron.

17

Popovers

Popover jest podobny do podpowiedzi, oferując rozszerzony widok wraz z nagłówkiem.

18

Postęp

Pasek postępu pokazuje postęp procesu z nałożonymi paskami, animowanym tłem i etykietami tekstowymi.

19

Scrollspy

Scrollspy służy do wskazywania aktualnie aktywnego łącza w menu na podstawie pozycji przewijania.

20

Etykietki narzędzi

Etykietki narzędzi są przydatne, gdy trzeba opisać łącze.

Opis

Bootstrap 4 wykorzystuje zbiór narzędzi do wyświetlania obramowań, koloru tekstu, umieszczania wideo itp. Na stronie internetowej.

W poniższej tabeli wymieniono typy narzędzi, których można używać do manipulowania Bootstrap 4 -

S.No. Metody i opis
1

Granice

Narzędzie Border zapewnia styl, kolor i promień obramowania elementu.

2

Clearfix i ikona zamknięcia

Clearfix służy do usuwania pływającej zawartości i ikony zamykania do odrzucania zawartości.

3

Zabarwienie

Użyj klas kontekstowych, aby zmienić kolor tekstu, łącza i kolor tła elementu.

4

Osadzać

Służy do osadzania wideo na stronie za pomocą elementu <iframe>.

5

Pływak

Służy do przenoszenia elementu na lewą lub prawą stronę.

6

Cienie i odstępy

Narzędzie Shadow dodaje cień do elementów, a narzędzie do tworzenia odstępów zapewnia marginesy lub wartości dopełnienia elementu.

7

Dobór

Możesz ustawić rozmiar elementu jako szeroki lub wysoki, używając narzędzi szerokości i wysokości.

8

Tekst

Bootstrap zapewnia narzędzia tekstowe do kontrolowania wyrównania tekstu, transformacji, wagi i nie tylko.

9

Zgiąć

Narzędzia Flex można użyć do zarządzania układem, wyrównaniem, kolumnami siatki, nawigacją i innymi elementami strony.

Opis

Bootstrap to potężna i popularna platforma front-end na urządzenia mobilne, służąca do tworzenia responsywnych witryn internetowych w wersji mobilnej przy użyciu ram HTML, CSS i JS.

Poniższa tabela przedstawia różnice w Bootstrap 3 i Bootstrap 4 -

S.No. Składnik Bootstrap 3 Bootstrap 4
1 Pliki źródłowe CSS MNIEJ SCSS
2 System siatki 4-warstwowy system siatki (xs, sm, md, lg) 5-warstwowy system siatki (xs, sm, md, lg, xl)
3 Jednostka CSS px rem
4 Rozmiar czcionki 14px 16px
5 Struktura rozwijana Utworzono za pomocą <ul> i <li> Utworzono za pomocą <ul> lub <div>
6 Odsuwanie kolumn col-md-offset-4 offset-md-4
7 Zdjęcia .img-responsive class .img-fluid klasa
8 Tabele Dodaj klasę .table-responsive do elementu nadrzędnego <div> Dodaj klasę .table-responsive do elementu <table>
9 Glify Utrzymany Niewspierany
10 Obiekty multimedialne Używa klas dla obiektów multimedialnych, takich jak .media , .media-body , .media-object , .media- header , .media-right , .media-left , .media-list i .media-body Używa tylko klasy .media dla obiektów multimedialnych.
11 Ciemne / odwrotne tabele Niewspierany Używa klasy .table-dark do tworzenia ciemnych / odwrotnych tabel
12 Pola wyboru i przyciski radiowe Wyświetla pola wyboru i przyciski radiowe przy użyciu .radio , .radio-inline , .checkbox lub .checkbox-inline klas Wyświetla pola wyboru i przyciski radiowe przy użyciu .form-czek , .form sprawdzić etykietę , .form-Check-wejście lub .form-check-inline klas
13 Rozmiar kontrolki formularza Zwiększ lub zmniejsz rozmiar o kontroli wejściowej za pomocą .input-LG i .input-SM klas Zwiększenia lub zmniejszenia rozmiaru kontroli wejściowej za pomocą .form-control-LG i .form-control-SM klas
14 Tekst pomocy Wyświetl tekst pomocy za pomocą klasy .help-block Wyświetl tekst pomocy za pomocą klasy .form-text
15 Style Używa klas .btn-default i .btn-info na przyciskach Używa klas .btn-secondary , .btn-light i .btn-dark na przyciskach i usuwa klasę .btn-default .
16 Przyciski konspektu Niewspierany Styl przyciski z kolorem konturu przy użyciu .btn-outline- * klasę
17 Rozmiary przycisków .Btn xs- klasa jest dostępna Dostępne tylko klasy .btn-sm i .btn-lg i usunięto klasę .btn-xs
18 Nagłówki menu Użyj klasy .dropdown-header w tagu li Użyj klasy .dropdown-header w tagach h1 - h2
19 Dzielniki Użyj klasy .divider w elemencie li Użyj klasy .dropdown-divider w elemencie div
20 Naprawiono paski nawigacyjne Fix pasek nawigacyjny na górze lub na dole za pomocą .navbar utrwalonych-top i .navbar-czas dolne klas Fix pasek nawigacyjny na górze lub na dole za pomocą .fixed-top i .fixed dnem klas
21 Pagery Wyrównaj strony za pomocą klas .previous i .next Niewspierany
22 Jumbotron o pełnej szerokości Nie używa klasy .jumbotron-fluid na jumbotronach o pełnej szerokości Używa klasy .jumbotron-fluid dla jumbotronów o pełnej szerokości
23 Pozycja karuzeli Używa klasy .item dla elementów karuzeli. Używa klasy .carousel-item dla elementów karuzeli.
24 Studnie, panele i miniatury Utrzymany Niewspierany. Zamiast tego używaj kart
25 Inline Navs Nie obejmuje klasy .nav-inline Wyświetl nawigacje jako wbudowane, używając klasy .nav-inline