Wprowadzenie do Bootstrap

Jak do tej pory, mimo że raczej ciągnie mnie w stronę UI, nie miałem za wiele styczności z czymś takim jak Bootstrap czyli framework służący do tworzenia „responsywnych” i z pudełka dostosowanych do obsługi na urządzeniach mobilnych interfejsów użytkownika. Do tej pory miałem tylko trochę do czynienia z jednym z bardziej popularnych „preprocesorów” CSS czyli z Less’em. Jednak to tak naprawdę dwie różne sprawy. Less jest fajny, bo rozszerza CSS o kilka przydatnych „ficzerów” takich jak zmienne, funkcje itp. Bootstrap, stworzony przez programistów Twittera, można by z kolei określić jako zestaw klas CSS, dzięki którym możliwe jest budowanie w pełni „pływających” interfejsów użytkownika, nie martwiąc się o różnego rodzaju haki w celu dostosowania wyglądu strony pod różne przeglądarki. Dla porządku dodam jeszcze, że Bootstrap „pod spodem” wykorzystuje właśnie Less’a. Ok, starczy tego wstępu! Wprowadzenie do Bootstrap czas zacząć!

Ogólny zamysł interfejsu użytkownika opartego o Bootstrap

Generalnie, w Bootstrap’ie caly interfejs użytkownika pomyślany jest jako siatka/tabelka (ang. grid). Na każdym poziomie, a więc tyczy się to zarówno całego ekranu przeglądarki jak i pojedynczego „div’a” czyli mówiąc ogólnie kontenerów, mamy podział takiej jednostki na 12 kolumn. Za pomocą odpowiednich klas CSS możemy określać ile kolumn zawiera dany element w kontenerze. Oczywiście elementy w kolumnach możemy też grupować horyzontalnie w wiersze.

Powyższe to tylko taki ogólny zarys tego jak działa Bootstrap. Mam nadzieję, że w miarę sensownie to opisałem. Jeśli nie, to poniżej prosty przykład, oparty na tym co możemy znaleźć w dokumentacji tego frameworka.

Jak zacząć używać Bootstrap’a na prostym przykładzie

Na początek oczywiście musimy pobrać odpowiednie pliki – wszystko znajdziecie na odpowiedniej stronie projektu. Następnie wystarczy podlinkować do naszej strony dwa CSS’y i jeden skrypt JavaScript:

<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-theme.min.css">
<script src="/js/bootstrap.min.js"></script>

Przy czym drugi z CSS’ów jest opcjonalny – są to ustawienia podstawowego tematu CSS Bootstrap’a. Na stronie projektu znajduje się edytor, który pozwala nam na całkowicie dowolne skonfigurowanie zmiennych Less (możemy ich później użyć w naszym własnym temacie), włączenie lub wyłączenie niektórych wtyczek jQuery i komponentów. Dzięki temu możemy sobie wygenerować naszą własną wersję Bootstrap’a.

Oprócz powyższych plików, wypadałoby też oczywiście podlinkować do naszej strony najnowsze jQuery.

Budujemy layout

Teraz nie pozostaje nam nic innego jak zbudować prosty „layout” i nadać jego elementom odpowiednie klasy CSS. Poniżej przykład wraz z wyjaśnieniem:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-4">Left sidebar</div>
        <div class="col-md-8">Content here…</div>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Jak widać bardzo prosty dokument. Podlinkowane odpowiednie CSS’y i JavaScript’y. To co nas interesuje to to co znajduje się wewnątrz znacznika “body”. W powyższym przykładzie stworzyłem kontener i dodałem mu klasę „container” – jest to klasa Bootstrapa oznaczająca główny kontener z ustaloną szerokością (standardowo dla desktopów jest to 970px). Dzięki takiemu ustawieniu kontener ma odpowiednią szerokość, wyświetla się na środku ekranu i będzie się odpowiednio zachowywać na przy zmianie szerokości ekranu.

Wewnątrz kontenera utworzyłem wiersz za pomocą klasy „row”. W jego wnętrzu mamy z kolei dwa elementy – w tym przypadku są to „divy” ale równie dobrze mogą to być jakieś inne elementy DOM. Poprzez nadanie im odpowiednich klas CSS ustalam aby pierwszy z „divów” zajmował cztery kolumny kontenera, a drugi z nich osiem kolumn. Tutaj również nie musimy nic więcej robić. Elementom nadane są odpowiednie style i będą one odpowiednio zmieniać swoje rozmiary w przypadku zmiany rozmiaru ekranu.

Oczywiście to tylko podstawy podstaw. W Bootstrap’ie mamy klasy tak naprawdę dla wszystkich elementów DOM. Możemy za ich pomocą budować na przykład świetnie wyglądające na wszystkich urządzeniach formularze, przyciski, tabele itp. Zresztą spójrzcie na przykłady zamieszczone na stronie projektu. Pomyśleli o wszystkim ;)