Układ siatki Grid

System siatki Bootstrap to responsywny system układu strony internetowej opracowany przez Twittera, który umożliwia tworzenie responsywnych układów stron internetowych, dzieląc stronę internetową na szereg wierszy i kolumn. System siatki Bootstrap wykorzystuje 12-kolumnowy układ, który może być łatwo dostosowany do konkretnych potrzeb strony internetowej.

System siatki składa się z trzech podstawowych elementów: kontenerów wierszy kolumn

kod HTML, który tworzy podstawową strukturę siatki grid

							
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Moja strona z siatką Bootstrap</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <p>To jest pierwsza kolumna.</p>
        </div>
        <div class="col-md-6">
          <p>To jest druga kolumna.</p>
        </div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
  </body>
</html>

Wyjaśnienie

Dołączyliśmy arkusz stylów Bootstrap za pomocą atrybutu href w elemencie link. Utworzyliśmy kontener, który zawiera jedną sekcję z dwoma kolumnami. Użyliśmy klasy .col-md-6, aby podzielić wiersz na dwie kolumny, z których każda zajmuje połowę szerokości ekranu na urządzeniach o szerokości większej niż 768 pikseli. Dołączyliśmy plik JavaScript Bootstrap za pomocą atrybutu src w elemencie script.

Notatka

System siatki Bootstrap składa się z 12 kolumn, które mogą być dowolnie grupowane i umieszczane w wierszach. Programiści mogą użyć różnych klas CSS, aby określić, jak szerokie powinny być kolumny i jak powinny się zachowywać na różnych urządzeniach. Na przykład, klasa .col-sm-4 oznacza, że dana kolumna powinna zajmować 4 z 12 dostępnych kolumn na ekranie o szerokości mniejszej niż 576 pikseli, czyli na małych ekranach smartfonów. Natomiast klasa .col-md-6 oznacza, że dana kolumna powinna zajmować 6 z 12 dostępnych kolumn na ekranie o szerokości większej niż 576 pikseli, ale mniejszej niż 992 piksele, czyli na ekranach tabletów i większych smartfonów.