Twój kompletny podręcznik Bootstrap

Załóżmy, że musisz zbudować Panel analityczny dla swojego biznesu.

Potrzebujesz strony, która wygląda profesjonalnie i działa dobrze na różnych urządzeniach, ale nie masz dużo czasu, aby zaprojektować wszystko od zera.

To miejsce, w którym przydaje się framework taki jak Bootstrap. Daje on początek budowania responsywnych stron internetowych. Zamiast wpatrywać się w pustą stronę, zaczynasz od siatki i gotowych komponentów. To jak posiadanie zestawu klocków Lego. Nadal musisz je złożyć, ale trudna część polegająca na wykonaniu wszystkich pojedynczych elementów jest już za tobą.

Jeśli Bootstrap wydaje się odpowiedni dla Twojego projektu, ten przewodnik jest dla Ciebie. Przeprowadzimy Cię przez wszystko, co musisz wiedzieć, aby zacząć tworzyć strony internetowe z Bootstrap.

Zacznijmy!

Co to jest Bootstrap?

Bootstrap to darmowe, otwarte framework CSS, który oferuje kolekcję gotowych komponentów, stylów i narzędzi do tworzenia spójnych i responsywnych projektów stron internetowych. Opracowany przez inżynierów z Twittera Marka Otto i Jacoba Thorntona w 2011 roku, od tego czasu stał się jednym z głównych frameworków dla programistów stron internetowych na całym świecie.

Bootstrap jest obecnie szóstym najpopularniejszym frameworkiem w pierwszym milionie stron w kategorii bibliotek JavaScript.

Chociaż jQuery i React otrzymały dużo uwagi w ostatnich latach, ponad 1,2 miliona stron na całym świecie nadal używa Bootstrap.

Ta struktura stawia na pierwszym miejscu urządzenia mobilne, co oznacza, że priorytetem jest układ i stylizacja dla mniejszych ekranów, a projekt jest stopniowo ulepszany dla większych ekranów. Dzięki temu podejściu, wszystkie strony zbudowane przy użyciu Bootstrap są domyślnie responsywne na różne rozmiary ekranów.

Co Wyróżnia Bootstrap?

Bootstrap wyróżnia się na tle innych frameworków CSS pod kilkoma kluczowymi względami.

Jego gotowe komponenty, takie jak paski nawigacyjne, przyciski, formularze i karty, pozwalają zaoszczędzić deweloperom dużo czasu. Odpowiedni system siatki Bootstrap ułatwia tworzenie układów, które dobrze wyglądają na różnych rozmiarach ekranów, od dużych monitorów komputerowych po małe ekrany telefonów.

Każdy komponent Bootstrap jest konfigurowalny, więc możesz zmieniać kolory i rozmiary, aby dostosować je do swojego konkretnego projektu. Podejście to oferuje kilka zalet:

1. Szybki rozwój: Dzięki szerokiej gamie gotowych komponentów i klas pomocniczych, programiści mogą szybko prototypować i tworzyć strony internetowe, nie tracąc nadmiernie czasu na niestandardowy CSS.
2. Jednolity design: Bootstrap wprowadza jednolity język projektowania w projektach, zapewniając spójny i profesjonalny wygląd oraz odczucie.
3. Domyślna responsywność: Komponenty i system siatki Bootstrap są zaprojektowane tak, aby były responsywne, dostosowując się do różnych rozmiarów ekranów i urządzeń bez konieczności tworzenia obszernych niestandardowych zapytań medialnych.
4. Kompatybilność między przeglądarkami: Bootstrap zajmuje się problemami z kompatybilnością między przeglądarkami, pozwalając programistom skupić się na budowaniu funkcjonalności zamiast martwić się o niezgodności przeglądarek.

Jednakże, Bootstrap, jak każda struktura, nie jest rozwiązaniem uniwersalnym.

Strony zbudowane przy użyciu Bootstrap wyglądają podobnie z różnymi układami, ponieważ elementy interfejsu użytkownika są ponownie wykorzystywane. Framework zawiera również dużo CSS i JavaScript, które mogą nie być używane, co może spowolnić działanie Twojej strony, jeśli nie będziesz uważny. Istnieje również krzywa uczenia się w przyjęciu klas w ramach frameworka.

Pomimo tych potencjalnych wad, Bootstrap nadal jest potężnym i popularnym narzędziem do tworzenia stron internetowych, szczególnie jeśli chcesz szybko zacząć. Przyjrzyjmy się, jak to zrobić.

Rozpoczynanie z Bootstrap

Zanim zaczniemy omawiać podstawy, oto trzy sposoby na zaimportowanie frameworka:

1. Pobierz skompilowane pliki CSS i JavaScript ze strony oficjalnej Bootstrap i dołącz je do swojego pliku HTML.
2. Użyj Content Delivery Network (CDN), aby załadować Bootstrap z zdalnego serwera.
3. Zainstaluj Bootstrap za pomocą menedżera pakietów takiego jak npm, jeśli używasz narzędzia do budowy.

Dla uproszczenia użyjmy metody CDN. Dodaj poniższe linie wewnątrz tagu <head> twojego pliku HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

Następnie, dodaj poniższą linię tuż przed zamykającym tagiem </body>.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Uwaga: Musisz dodać te linie, aby wszystkie poniższe przykłady kodu działały.

System Siatki Bootstrap

System siatki Bootstrap jest jedną z jego kluczowych funkcji, umożliwiającą tworzenie elastycznych układów, które bez trudu dostosowują się do różnych rozmiarów ekranów.

Opiera się na układzie 12-kolumnowym i używa predefiniowanych klas do określenia zachowania elementów przy różnych punktach przerwania.

Podstawowa Siatka

Podstawowa siatka to prosta ramka z kolumnami o równych szerokościach, które stają się wyższe, gdy zawartość wewnątrz jest dłuższa. Aby stworzyć podstawową, zacznij od kontenera <div> i dodaj wiersze oraz kolumny. Oto przykład:

<div class="container">
  <div class="row">
    <div class="col">
      <div class="bg-light border p-3 text-center">
        <h3>Kolumna 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="col">
      <div class="bg-light border p-3 text-center">
        <h3>Kolumna 2</h3>
        <p>Pellentesque euismod dapibus odio, at volutpat sapien.</p>
      </div>
    </div>
    <div class="col">
      <div class="bg-light border p-3 text-center">
        <h3>Kolumna 3</h3>
        <p>Sed tincidunt neque vel risus faucibus fringilla.</p>
      </div>
    </div>
  </div>
</div>

Jak widzisz, stworzyliśmy trzy kolumny o równej szerokości. Bootstrap zarządza wypełnieniem, odstępami między kolumnami oraz wyrównaniem.

Długość Kolumny Siatki

Co jeśli chcesz kontrolować długość kolumny? Bootstrap ma ustawienia 12 jednostek, które pozwalają zdecydować, jak szeroka lub wąska może być kolumna.  Na przykład, aby utworzyć wiersz z dwiema kolumnami, gdzie pierwsza kolumna zajmuje osiem jednostek, a druga cztery jednostki, możesz zrobić to następująco:

<div class="container">
  <div class="row">
    <div class="col-8">
      <div class="bg-light border p-3 text-center">
        <h3>Szersza kolumna</h3>
        <p>Nunc vitae metus non velit aliquam rhoncus vel in leo.</p>
      </div>
    </div>
    <div class="col-4">
      <div class="bg-light border p-3 text-center">
        <h3>Węższa kolumna</h3>
        <p>Fusce nec tellus sed augue semper porta.</p>
      </div>
    </div>
  </div>
</div>

Jak możesz zauważyć, występuje różnica w klasach kolumn, gdzie szersza kolumna ma klasę col-8, a węższa kolumna ma klasę col-4.

Responsywna Szerokość Kolumny

Bootstrap oferuje również klasy responsywne, które pozwalają na określenie różnych szerokości kolumn dla różnych rozmiarów ekranów. Te klasy są oparte na punktach przerwania, które są predefiniowanymi szerokościami ekranu. Dostępne punkty przerwania to:

• xs (bardzo mały): Mniej niż 576px
• sm (mały): 576px i więcej
• md (średni): 768px i więcej
• lg (duży): 992px i więcej
• xl (bardzo duży): 1200px i więcej
• xxl (ekstra duży): 1400px i więcej

Aby użyć klas responsywnych, dodaj skrót punktu przerwania do prefiksu col-. Na przykład:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="bg-light border p-3 text-center">
        <h3>Kolumna 1</h3>
        <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
      </div>
    </div>
    <div class="col-md-6">
      <div class="bg-light border p-3 text-center">
        <h3>Kolumna 2</h3>
        <p>Donec id elit non mi porta gravida at eget metus.</p>
      </div>
    </div>
  </div>
</div>

Dodaliśmy tutaj szerokość col-md-6, więc kolumny będą automatycznie zmieniać rozmiar, gdy rozmiar ekranu wynosi 768px i więcej.

Komponenty Bootstrap

Bootstrap oferuje szeroki zakres gotowych komponentów do szybkiego tworzenia interfejsów użytkownika. Te komponenty są responsywne i można je dostosować. Przyjrzyjmy się niektórym często używanym.

Przyciski

Bootstrap oferuje dobrze zaprojektowane style przycisków od razu po rozpakowaniu. Aby utworzyć przycisk, dodaj klasę btn do elementu <button> lub <a>.

Dostosuj to, dodając klasy takie jak btn-primary, btn-secondary, btn-success itd.

<button type="button" class="btn btn-primary">Przycisk Główny</button>
<button type="button" class="btn btn-secondary">Przycisk Dodatkowy</button>
<a href="#" class="btn btn-success">Przycisk Linku Sukcesu</a>

Karty

Karty to wszechstronne pojemniki na treści takie jak obrazy, teksty i przyciski. Zapewniają uporządkowany sposób prezentacji informacji.

<div class="card">
  <img src="https://getbootstrap.com/docs/4.5/assets/img/bootstrap-icons.png" class="card-img-top" alt="Obraz karty">
  <div class="card-body">
    <h5 class="card-title">Tytuł karty</h5>
    <p class="card-text">Krótki przykładowy tekst, który posłuży jako rozwinięcie tytułu karty.</p>
    <a href="#" class="btn btn-primary">Idź gdzieś</a>
  </div>
</div>

Tutaj możesz zobaczyć kartę ze zdjęciem na górze, po którym następuje tytuł, trochę tekstu i przycisk. Klasa card-img-top umieszcza obraz na górze karty, podczas gdy klasa card-body zapewnia wypełnienie i odstępy dla zawartości wewnątrz karty.

Pasek Nawigacyjny

Komponent paska nawigacyjnego to responsywny nagłówek nawigacji z brandingiem, linkami, formularzami i innymi elementami. Automatycznie zwija się na mniejszych ekranach i zapewnia przycisk przełącznika, który rozszerza menu.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Moja Strona</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Przełącz nawigację">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Strona główna</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Funkcje</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Ceny</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Za pomocą tego prostego fragmentu kodu stworzyliśmy przycisk menu rozwijanego dla małych ekranów oraz listę linków nawigacyjnych.

Klasa navbar-expand-lg określa, że pasek nawigacyjny powinien się rozszerzać na dużych ekranach i zwijać na mniejszych. Klasy navbar-light i bg-light ustawiają schemat kolorów dla paska nawigacyjnego. Porównaj to z tworzeniem menu za pomocą zwykłego CSS, a zrozumiesz, ile kroków zaoszczędził nam Bootstrap.

Formularze

Przechodząc do formularzy, Bootstrap oferuje szereg kontrolek formularzy oraz opcji układu, aby stworzyć interaktywne i dostępne formularze.

Możesz łatwo stylizować elementy formularza takie jak pola wprowadzania, pola wyboru, przyciski radiowe i inne.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Adres e-mail</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">Nigdy nie udostępnimy Twojego adresu e-mail nikomu innemu.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Hasło</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Zaznacz mnie</label>
  </div>
  <button type="submit" class="btn btn-primary">Wyślij</button>
</form>

Stylizacja Bootstrap automatycznie wyrównała i upiększyła układ tego formularza w tle.

Przykład tego formularza zawiera pole na adres e-mail, pole na hasło, pole wyboru i przycisk wysyłania. Klasa form-label stylizuje etykiety, podczas gdy klasa form-control stylizuje pola wejściowe. Klasa mb-3 dodaje dolny margines do grup formularza dla odstępów.

Tworzenie Prostego Panelu Analitycznego z Bootstrap

Teraz, gdy omówiliśmy podstawy, złożmy to wszystko razem i stwórzmy prawdziwy przykład: panel analityczny.

Wyobraź sobie, że budujesz aplikację internetową, która wyświetla dane analityczne dla firmy. Panel będzie zawierał nagłówek z logo i nawigacją, główny obszar treści z danymi oraz stopkę z dodatkowymi linkami.

Podzielmy to na zarządzalne sekcje, używając prostego języka, który jest łatwy do zrozumienia.

Konfiguracja HTML

Po pierwsze, musimy skonfigurować nasz plik HTML.

Zacznij od utworzenia nowego pliku i dodania podstawowej struktury, takiej jak deklaracja <!DOCTYPE html> oraz tagi <html>, <head> i <body>. W sekcji <head> pamiętaj, aby określić kodowanie znaków, widok i tytuł strony.

Oto jak powinien wyglądać Twój HTML do tej pory, w tym Bootstrap.css (zaimportowany w <head>) oraz pliki Bootstrap.js (zaimportowane tuż przed zamknięciem <body>) wywołane w HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Panel Analiz</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <!-- Twój content znajdzie się tutaj -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

Dodawanie Nawigacji Nagłówkowej

Następnie, stwórzmy nagłówek z paskiem nawigacyjnym. Użyj znacznika <header> i dodaj w nim element <nav>. Komponent paska nawigacyjnego Bootstrap jest idealny do tego. Następnie dołącz logo oraz kilka linków nawigacyjnych, takich jak “Przegląd,” “Raporty,” i “Ustawienia.”

Wklej ten kod nagłówka wewnątrz tagów <body>

<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Panel Analityczny</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" href="#">Przegląd</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Raporty</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Ustawienia</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

Oto jak będzie wyglądał pasek nawigacyjny:

Klasa navbar-expand-lg sprawia, że nawigacja jest responsywna, zwijając się na mniejszych ekranach.

Użyliśmy navbar-dark i bg-dark, aby nadać mu elegancki, ciemny wygląd. Linki nawigacyjne znajdują się w nieuporządkowanej liście, a ms-auto przesuwa je na prawą stronę paska nawigacyjnego.

Tworzenie Głównego Obszaru Treści

Czas zająć się główną treścią! Użyjmy tagu <main> i stwórzmy układ dwukolumnowy za pomocą systemu siatki Bootstrap.

Lewa kolumna będzie zawierać karty do wyświetlania wykresów lub grafów, a prawa kolumna będzie miała kartę pokazującą kluczowe wskaźniki. Wklej ten kod zaraz poniżej znacznika zamykającego </header>.

Aby uczynić ten przykład bardziej interaktywnym, dodajmy Chart.js, aby pokazać metryki użytkownika. Dodaj ten skrypt do swojego <head>.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Pamiętaj, możesz pominąć dodawanie tego skryptu i przykładowych danych, jeśli chcesz tylko zobaczyć, jak działa Bootstrap. Dodajemy je, aby pola nie były puste.

Teraz, napiszmy kolumny bootstrapowe, aby zrobić miejsce dla wykresów i metryk danych.

<main class="container my-5">
    <div class="row">
      <div class="col-md-8">
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">Ruch na Stronie</h5>
            <canvas id="trafficChart"></canvas>
          </div>
        </div>
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">Pozyskiwanie Użytkowników</h5>
            <canvas id="userChart"></canvas>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">Kluczowe Metryki</h5>
            <ul class="list-group list-group-flush">
              <li class="list-group-item">Całkowita Liczba Użytkowników: 10,000</li>
              <li class="list-group-item">Nowi Użytkownicy: 500</li>
              <li class="list-group-item">Wskaźnik Odrzuceń: 25%</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </main>

W końcu, wklej te przykładowe dane tuż przed zamykającym tagiem </body>. Ponownie, to nie jest konieczne, jeśli chcesz tylko zobaczyć kolumny Bootstrap w akcji. Dodajemy te przykładowe dane, aby Chart.js mógł zbierać informacje i wyświetlać je na interaktywnym wykresie.

<script>
    // Wykres liniowy ruchu na stronie
    var trafficCtx = document.getElementById('trafficChart').getContext('2d');
    var trafficChart = new Chart(trafficCtx, {
      type: 'line',
      data: {
        labels: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze'],
        datasets: [{
          label: 'Unikalni Odwiedzający',
          data: [8000, 9500, 10200, 9800, 11000, 12500],
          borderColor: 'rgba(75, 192, 192, 1)',
          fill: false
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    // Wykres słupkowy pozyskiwania użytkowników
    var userCtx = document.getElementById('userChart').getContext('2d');
    var userChart = new Chart(userCtx, {
      type: 'bar',
      data: {
        labels: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze'],
        datasets: [{
          label: 'Nowi Użytkownicy',
          data: [400, 450, 500, 450, 550, 600],
          backgroundColor: 'rgba(54, 162, 235, 0.6)'
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>

Składając to wszystko razem, zobaczysz piękny Panel z wykresem liniowym i słupkowym pokazującym wzrost naszych kluczowych wskaźników. Kluczowe wskaźniki są również widoczne po prawej stronie w formacie tabeli.

Użyliśmy klasy kontenera, aby wyśrodkować zawartość i dodać trochę marginesu. Klasa wiersza tworzy wiersz, a klasy col-md-* definiują szerokości kolumn.

Lewa kolumna (col-md-8) ma dwie karty do wykresów, podczas gdy prawa kolumna (col-md-4) ma kartę z kluczowymi wskaźnikami w grupie listy.

Dodawanie Stopki

Prawie u celu!

Dodajmy stopkę z informacjami o prawach autorskich i linkami. Użyjemy tagu <footer> oraz systemu siatki i narzędzi do zarządzania odstępami Bootstrapa, aby kontrolować układ i wypełnienie.

<footer class="bg-light py-3">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p>&copy; 2023 Panel Analityczny. Wszelkie prawa zastrzeżone.</p>
      </div>
      <div class="col-md-6 text-md-end">
        <a href="#">Polityka prywatności</a>
        <a href="#" class="ms-3">Regulamin świadczenia usług</a>
      </div>
    </div>
  </div>
</footer>

Teraz powinieneś zobaczyć ten stopkę dodaną na dole twojego panelu.

Klasa bg-light nadaje stopce jasny kolor tła, a py-3 dodaje pionową wypełnienie. Podzieliliśmy stopkę na dwie kolumny: jedną na informacje copyright i drugą na linki. Klasa text-md-end wyrównuje linki do prawej strony na ekranach średniej wielkości i większych.

Łączenie wszystkiego

Połączmy teraz kod, abyś mógł zobaczyć całość.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Panel Analityczny</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  
</head>
<body>
<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Panel Analityczny</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" href="#">Przegląd</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Raporty</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Ustawienia</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>
  <main class="container my-5">
    <div class="row">
      <div class="col-md-8">
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">Ruch na Stronie</h5>
            <canvas id="trafficChart"></canvas>
          </div>
        </div>
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">Pozyskiwanie Użytkowników</h5>
            <canvas id="userChart"></canvas>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">Kluczowe Metryki</h5>
            <ul class="list-group list-group-flush">
              <li class="list-group-item">Całkowita liczba użytkowników: 10,000</li>
              <li class="list-group-item">Nowi użytkownicy: 500</li>
              <li class="list-group-item">Wskaźnik odrzuceń: 25%</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </main>
<script>
    // Wykres linii ruchu na stronie
    var trafficCtx = document.getElementById('trafficChart').getContext('2d');
    var trafficChart = new Chart(trafficCtx, {
      type: 'line',
      data: {
        labels: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze'],
        datasets: [{
          label: 'Unikalni Odwiedzający',
          data: [8000, 9500, 10200, 9800, 11000, 12500],
          borderColor: 'rgba(75, 192, 192, 1)',
          fill: false
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    // Wykres słupkowy pozyskiwania użytkowników
    var userCtx = document.getElementById('userChart').getContext('2d');
    var userChart = new Chart(userCtx, {
      type: 'bar',
      data: {
        labels: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze'],
        datasets: [{
          label: 'Nowi użytkownicy',
          data: [400, 450, 500, 450, 550, 600],
          backgroundColor: 'rgba(54, 162, 235, 0.6)'
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
<footer class="bg-light py-3">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p>&copy; 2023 Panel Analityczny. Wszelkie prawa zastrzeżone.</p>
      </div>
      <div class="col-md-6 text-md-end">
        <a href="#">Polityka prywatności</a>
        <a href="#" class="ms-3">Warunki usługi</a>
      </div>
    </div>
  </div>
</footer>
</html>

Jak widać, responsywny pasek nawigacyjny znajduje się na górze, a bezpośrednio pod nim wykresy. Bootstrap zarządza wypełnieniem i odstępami między elementami siatki, co możesz zobaczyć na swoich metrykach na Panel.

Na dole ekranu znajduje się stopka z linkami do Polityki Prywatności i Regulaminu.

Właśnie stworzyłeś prosty panel analityczny przy użyciu Bootstrap. Jednak Bootstrap posiada mnóstwo komponentów, których jeszcze nie dotknęliśmy. Koniecznie zapoznaj się z biblioteką komponentów Bootstrap, aby znaleźć wielokrotnego użytku komponenty do swoich przyszłych projektów.

Zestaw narzędzi dla responsywnego projektowania stron

Bootstrap jest popularnym frameworkiem, który pomaga web developerom szybko tworzyć responsywne strony internetowe. Posiada system siatki, gotowe komponenty oraz opcje dostosowywania, co ułatwia tworzenie stron internetowych, które dobrze wyglądają na różnych urządzeniach.

Deweloperzy na wszystkich poziomach doświadczenia używają Bootstrap. Jest dość łatwy do nauki, ale na tyle potężny, by obsługiwać duże projekty. Istnieje duża społeczność użytkowników Bootstrap, która zapewnia wsparcie oraz mnóstwo zasobów pomocnych w nauce frameworka.

Kiedy budujesz stronę Bootstrap, potrzebujesz również dobrej firmy hostingowej. DreamHost oferuje opcję serwera wirtualnego prywatnego (VPS), która doskonale się sprawdza. Jest elastyczna i może sprostać różnym potrzebom, w miarę jak Twoja strona Bootstrap się rozwija.

Dlaczego by nie wypróbować Bootstrap i zobaczyć, co możesz stworzyć? Z odpowiednimi narzędziami i planem hostingowym od firmy takiej jak Dreamhost, możesz tworzyć responsywne strony internetowe w mgnieniu oka.