tutorial-bootstrap

Tutorial Bootstrap – Twoja pierwsza responsywna strona.

Witam w tutorialu Bootstrapa, w którym opiszę jak stworzyć responsywną stronę krok po kroku z wykorzystaniem tego frameworka. Strona, którą stworzymy to będzie strona główna nieistniejącego portalu aukcyjnego. Końcowy efekt widoczny jest pod tym linkiem lub pod linkiem demo z prawej strony. Możesz pobrać gotowe pliki źródłowe finalnego efektu pod przyciskiem Załącznik (również po prawej stronie). Tyle tytułem spraw organizacyjnych. Przed nami zaprojektowanie strony RWD w Bootstrapie. Zaczynajmy!

Jak zainstalować Bootstrap’a

Zaczynamy oczywiście nie inaczej, jak od pobrania bibliotek Bootstrapa. Wchodzimy na stronę http://getbootstrap.com/getting-started/#download i klikamy na przycisk Download Bootstrap.

1_tutorial_bootstrap

Tworzymy na dysku folder na nasz projekt i wypakowujemy tam zawartość pobranego pliku. Powinniśmy otrzymać następującą strukturę:

|-Tutorial Bootstrap
|—— css/
|—— js/
|—— fonts/

W folderze css znajdują się style frameworka Bootstrap, z których będziemy korzystać. W folderze js jest sa skrypty Bootstrapa – zarówna pełna jak i zminifikowana wersja. Natomiast folder fonts zawiera ikonki czcionki glyphicons – w sumie około 200 ikonek do wykorzystania. Tak wygląda podstawowa struktura strony internetowej opartej na Bootstrapie. Do pełni szczęścia brakuje nam tylko pliku .html. Stwórzmy więc takowy w kolejnej części.

Tworzymy pierwszą wersję pliku html

Mamy folder „Tutorial Bootstrap” z bootstrapowym projektem, najwyższy czas go wykorzystać. W środku tworzymy plik index.html (możesz użyć do tego celu notatnika, ale polecam coś bardziej ‘dedykowanego’, np. notepad++) z następującym kodem html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Tutorial Bootstrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>Pierwsza wersja<h1>
    </body>
    </html>

Jak widzisz jest to zwykły kod html i nie ma w nim śladu Bootstrapa. Natomiast <meta name="viewport" jest wymagana przez Bootstrapa ponieważ zapewnia skalowalność strony na urządzeniach mobilnych. Teraz dołączamy pliki CSS oraz JS z biblioteki, którą pobraliśmy na początku. Pliki JS dołączam na dole, przed ostatnim zamykającym tagiem <body>, ponieważ takie rozwiązanie poprawia prędkość wczytywania strony (kod HTML jest parsowany do przeglądarki zanim ta musi czekać na załadowanie plików .js). Z tego samego względu używamy też zminifikowanej wersji bootstrap.min.js a nie bootstrap.js, ponieważ waży ona mniej kilobajtów.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Tutorial Bootstrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    </head>
    <body>
        <h1>Pierwsza wersja<h1>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
    </html>

Jak może zauważyłeś, dodaliśmy również link do biblioteki jQuery. Dlaczego? Ponieważ niektóre skrypty Bootstrapa wymagają tej biblioteki do poprawnego działania. Zapisujemy nasz plik index.html i wyświetlamy go w przeglądarce. Na ten moment strona wygląda tak: 2-tworzenie-strony-w-bootstrap

Tworzymy nawigację na górze strony

Można powiedzieć, że mamy już „podkład” dla naszej strony. Teraz popracujemy nad strukturą zawartości. Na górze chcemy mieć nawigację, a konkretnie dwa paski nawigacji horyzontalnej – jeden dla elementów związanych z obsługą panelu użytkownika, drugi, poniżej, dla menu kategorii. Bootstrap posiada gotowe style dla tagów nav, stworzone specjalnie do celów nawigacji po stronie. Tuż za tagiem body w naszym pliku index.html wstawiamy zatem kod:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span> Super Aukcje</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Kupuj</a></li>
        <li><a href="# ">Sprzedawaj</a></li>
        <li><a href="# ">Moje konto</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav> 

Górna nawigacja jest gotowa. Ta ikona metek, która pojawiła się przy nazwie portalu jest wygenerowana za pomocą tzw. glyphicon. Jest to czcionka, która właściwe zawiera same ikony – przeróżne ikony, które możemy wykorzystywać w projekcie, ponieważ są łatwo wkomponowane w bibliotekę Bootstrap. Więcej informacji na ich temat znajdziesz w dokumentacji Bootstrapa. Teraz czas utworzyc miejsce na menu z kategoriami. Pod powyższym kodem wpisujemy:

<div class="container-fluid">
    <div class="nav_second">
        Menu kategorii
    </div> <!—koniec .nav_second -->
</div><!—koniec .container-fluid -->

.container-fluid to klasa CSS Bootstrapa, która tworzy element rozciągnięty na całą szerokość okna przeglądarki. Natomiast klasa ‘nav_second’ to nasza własna klasa, której atrybuty musimy zdefiniować w pliku css. Aby nie mieszać w oryginalnym pliku css Bootstrapa dołączonym do naszego projektu, stwórzmy własny plik w folderze CSS i wklejmy do niego poniższy kod:

.nav_second{
margin-top:50px;
margin-right: -15px;
margin-left: -15px;
margin-bottom:-20px;
background-color: #7D7D7D;
}

Zapisujemy plik pod nazwą „custom.css”, następnie dołączamy go do naszego projektu w pliku index.html dodając odpowiednią linijkę w sekcji <head>:

<head>
    <meta charset="utf-8">
    <title>Tutorial Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css"> <!-- nasze wlasne style w custom.css -->
</head>

Usuńmy też fragment <h1>Pierwsza wersja</h4> z naszego pliku .html, bo nie jest nam do niczego potrzebny. Sprawdźmy, jak na tym etapie wygląda nasza strona w przeglądarce:

3-tutorial-bootstrap-strona-responsywna

Jak się pewnie domyślasz, następnym krokiem będzie rozbudowa menu kategorii w coś bardziej użytecznego. Do tego celu przerobimy gotowy szablon bootstrapa do nawigacji <nav>, którego zresztą w górnym menu strony.

Do naszego <div class="nav_second"> wklejamy więc kod:

<nav class="navbar kategorie">
    <div class="container">
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Start</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" >Elektronika</a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">RTV AGD</a></li>
                        <li><a href="#">Konsole</a></li>
                        <li><a href="#">Fotografia</a></li>
                        <li><a href="#">Telefony</a></li>
                    </ul>
                </li>
            </ul>
        </div><!--koniec .navbar -->
    </div><!--koniec .container -->
</nav>

Istotną różnicą w porównaniu z menu na górze jest fakt, że tym razem nasze menu ma schemat główna kategoria -> kategoria podrzędna. W tym wypadku główną kategorią jest Elektronika, która po kliknięciu myszką rozwija kategorie podrzędne – RTV AGD, Konsole, Fotografia i Telefony. Aby stworzyć takie menu podrzędne, kategorii głównej, tzn. dla jej tagu <li>nadaje się bootstrapową klasę .dropdown’, a poźniej tworzy kolejną listęulz elementami podrzędnymi.
Naszą własną przeróbką w tym menu jest zastąpienie Bootstrapowej klasy
. navbar-inversenaszą własną klasą.kategorie`. Dzięki temu możemy nadać temu menu własną kolorystykę (dla bloków, dla linków, po najechaniu kurosrem, po wciśnięciu itd.). Robimy to poprzez dodanie stylów w pliku custom.css:

.nav_second .kategorie {
        background-color:#5C5C5C;
        border-color:#080808
}
.kategorie .navbar-nav > .active > a, .kategorie .navbar-nav > .active > a:focus, .kategorie .navbar-nav > .active > a:hover , .kategorie .navbar-nav > .open > a, .kategorie .navbar-nav > .open > a:focus, .kategorie .navbar-nav > .open > a:hover{
    color: #FFF;
    background-color: #7D7D7D;
}
.kategorie .navbar-nav > li > a {
    color: #D8D8D8;
}
.kategorie .navbar-nav > li > a:hover  {
background-color:#7D7D7D;
}
.kategorie .dropdown-menu > li > a {
    display: block;
    padding: 10px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857;
    white-space: nowrap;
}

Nie przygotowywałem ich wszystkich od nowa. Po prostu skopiowałem style .navbar-inverse z oryginalnego pliku css Bootstrapa i podmieniłem nazwę na ‘kategorie’, dokonując zmian w atrybutach dotyczących kolorystyki. Tak wygląda nasz plik index.html do tej pory:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css"> <!-- nasze wlasne style w custom.css -->
</head>
<body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span> Super Aukcje</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Kupuj</a></li>
            <li><a href="#">Sprzedawaj</a></li>
            <li><a href="#">Moje konto</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    <div class="container-fluid">
        <div class="nav_second">
            <nav class="navbar kategorie">
                <div class="container">
                    <div id="navbar" class="collapse navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Start</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" >Elektronika</a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">RTV AGD</a></li>
                                    <li><a href="#">Konsole</a></li>
                                    <li><a href="#">Fotografia</a></li>
                                    <li><a href="#">Telefony</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div><!--koniec .navbar -->
                </div><!--koniec .container -->
            </nav>
        </div> <!--koniec .nav_second -->
    </div><!--koniec .container-fluid -->

    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Kolejnym krokiem jest uzupełnienie menu kategorii o pozostałe kategorie. Tak wygląda cały fragment:

<div class="container-fluid">
    <div class="nav_second">
        <nav class="navbar kategorie">
            <div class="container">
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Start</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" >Elektronika</a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">RTV AGD</a></li>
                                <li><a href="#">Konsole</a></li>
                                <li><a href="#">Fotografia</a></li>
                                <li><a href="#">Telefony</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" >Moda</a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Biżuteria</a></li>
                                <li><a href="#">Odzież</a></li>
                                <li><a href="#">Kosmetyki</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" >Dom</a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Ogród</a></li>
                                <li><a href="#">Nieruchomości</a></li>
                                <li><a href="#">Meble</a></li>
                                <li><a href="#">Narzędzia</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" >Dziecko</a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Obuwie</a></li>
                                <li><a href="#">Odzież</a></li>
                                <li><a href="#">Artykuły szkolne</a></li>
                                <li><a href="#">Zabawki</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" >Rozrywka</a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Film</a></li>
                                <li><a href="#">Gry planszowe</a></li>
                                <li><a href="#">Gry wideo</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" >Sport</a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Obuwie</a></li>
                                <li><a href="#">Akcesoria sportowe</a></li>
                                <li><a href="#">Odzież sportowa</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" >Motoryzacja</a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Auta nowe</a></li>
                                <li><a href="#">Auta używane</a></li>
                                <li><a href="#">Części</a></li>
                                <li><a href="#">Narzędzia</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" >Sztuka</a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Obrazy</a></li>
                                <li><a href="#">Instrumenty</a></li>
                                <li><a href="#">Kolekcje</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" >Kultura</a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Bilety</a></li>
                                <li><a href="#">Pamiątki</a></li>
                                <li><a href="#">Autografy</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" >Książki</a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Dokumenty</a></li>
                                <li><a href="#">beletrystyka</a></li>
                                <li><a href="#">Podręczniki</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" >Usługi</a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Strony internetowe</a></li>
                                <li><a href="#">Pozycjonowanie</a></li>
                            </ul>
                        </li>
                        </ul>
                    </ul>
                </div><!--koniec .navbar -->
            </div><!--koniec .container -->
        </nav>
    </div> <!--koniec .nav_second -->
</div><!--koniec .container-fluid --> 

A tak całe menu w przeglądarce: 4-bootstrap-tutorial-jak-stworzyc-strone-w-bootstrap

Dobra, nawigacja skończona. Bezpośrednio pod nawigacją chcemy umieścić główny blok strony, trochę do celów marketingowych, a także z polem do wyszukiwania produktów na aukcjach oraz przyciskiem. Wykorzystamy do tego div z klasą .jumbotron Bootstrapa. Więcej na jej temat tutaj. Wklejamy poniższy kod za </div><!--koniec .container-fluid -->:

<div class="jumbotron">
  <div class="container text-center">
    <h1>Znajdź i kup. Tanio!</h1>
    <p>Wspaniałe przedmioty, niskie ceny. Znajdź to, czego szukasz i kup najtaniej na SuperAukcje.pl.</p>
  </div>
</div>

Natomiast w pliku custom.css dodajemy kod, aby zmienić jego domyślny Bootstrapowy, szary kolor:

.jumbotron {
    background-color: #CFCF7C;
}

Klasa text-center wyrównuje tekst na środku diva. Efekt powinien być mniej więcej taki: 6-tutorial-strona-na-bootstrap Brakuje jeszcze wyszukiwarki. Korzystamy z dostępnych w Bootstrapie styli do formularzy i tworzymy formularz składający się z jednego pola input type=”text” oraz przycisku:

<br/>
<form class="form-horizontal">
    <div class="form-group">
        <div class="col-sm-6 col-sm-offset-3">
            <input type="email" class="form-control" id="inputEmail3" placeholder="książki, gry, laptopy...">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-4 col-sm-4">
            <button type="submit" class="btn-lg btn-primary">Szukaj przedmiotów</button>
        </div>
    </div>
</form>

Gotowe. O co chodzi z tymi klasami .col-sm- lub ‘.col-sm-offset-? Są to klasy Bootstrapa służące do rozmieszaczania elementów na tzw. siatce, co sprzyja responsywności strony. W zależności od rozmiaru ekranu, strona dzieli zawartość strony na klocki, czyli elementy na siatce, które można potem dowolnie aranżować. Jest ich maksymanie 12 w jednym rzędzie obok siebie. Za pomocą tych klas możemy umieszczać zawartość w różnych miejscach na stronie. W naszym projekcie formularz zajmuje 6 elementów siatki (.col-sm-6) oraz posiada odstęp 3 elementów siatki od lewej strony (.col-sm-offset-3). W ten sposób z prawej zostaje odstęp również 3 elementów, ponieważ zajęliśmy obszar 6+3 =9 elementów, a jest ich w sumie na siatce 12. Więcej na temat siatki Bootstrapa możesz poczytać w dokumentacji oraz w innym moim artykule na Infected na temat responsywności stron na Bootstrapie.

Pod tą sekcją chcemy umieścić kolejne dwie, podobne do siebie. Pierwsza z popularnymi aukacjami oraz druga z aukcjami, które kończą się w krótkim terminie. Linki do aukcji będą wyświetlane w boksach, tzw. ‘thumbnails’, których wygląd również jest przygotowany w Bootstrapie. Zdjęcia aukcji przechowywane są w folderze „img”, wszystko znajduje się już w paczce pod linkiem „Załącznik” do tego artykułu. Kod wygląda tak:

<div class="container">
    <div class="row">
        <div class="col-sm-10">
            <h2>Polecane aukcje</h2>
            <p>Smakowite kąski i najlepsze okazje</p>
        </div>

        <div class="col-sm-2">
            <a href="#" class="btn btn-success">Zobacz wszystkie</a>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <a href="#" class="thumbnail">
                <img src="img/1.jpg" style="height:143px">
                <h4><strong>Moneta z 1894 roku</strong> <span class="label label-default text-right">45 zł</span></h4>
            </a>
        </div>
                <div class="col-sm-3">
            <a href="#" class="thumbnail">
                <img src="img/2.jpg" style="height:143px">
                <h4><strong>Telefon komórkowy</strong> <span class="label label-default text-right">99 zł</span></h4>
            </a>
        </div>
        <div class="col-sm-3">
            <a href="#" class="thumbnail">
                <img src="img/3.jpg" style="height:143px">
                <h4><strong>Stary laptop</strong> <span class="label label-default text-right">125 zł</span></h4>
            </a>
        </div>
        <div class="col-sm-3">
            <a href="#" class="thumbnail">
                <img src="img/4.jpg" style="height:143px">
                <h4><strong>Dżojstik (sprawny)</strong> <span class="label label-default text-right">20 zł</span></h4>
            </a>
        </div>

    </div>

    `<div class="row">
        <div class="col-sm-10">
            <h2>Aukcje kończące się</h2>
            <p>Wyłów okazję dla siebie</p>
        </div>

        <div class="col-sm-2">
            <a href="#" class="btn btn-success">Zobacz wszystkie</a>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2">
            <a href="#" class="thumbnail">
                <img src="img/1.jpg" style="height:143px">
                <h4><strong>Moneta z 1894 roku</strong> <span class="label label-default text-right">45 zł</span></h4>
            </a>
        </div>
                <div class="col-sm-2">
            <a href="#" class="thumbnail">
                <img src="img/2.jpg" style="height:143px">
                <h4><strong>Telefon komórkowy</strong> <span class="label label-default text-right">99 zł</span></h4>
            </a>
        </div>
        <div class="col-sm-2">
            <a href="#" class="thumbnail">
                <img src="img/3.jpg" style="height:143px">
                <h4><strong>Stary laptop</strong> <span class="label label-default text-right">125 zł</span></h4>
            </a>
        </div>
        <div class="col-sm-2">
            <a href="#" class="thumbnail">
                <img src="img/4.jpg" style="height:143px">
                <h4><strong>Dżojstik (sprawny)</strong> <span class="label label-default text-right">20 zł</span></h4>
            </a>
        </div>
        <div class="col-sm-2">
            <a href="#" class="thumbnail">
                <img src="img/1.jpg" style="height:143px">
                <h4><strong>Moneta z 1895 roku</strong> <span class="label label-default text-right">20 zł</span></h4>
            </a>
        </div>
        <div class="col-sm-2">
            <a href="#" class="thumbnail">
                <img src="img/2.jpg" style="height:143px">
                <h4><strong>Telefon komórkowy</strong> <span class="label label-default text-right">20 zł</span></h4>
            </a>
        </div>

                <div class="col-sm-2">
            <a href="#" class="thumbnail">
                <img src="img/2.jpg" style="height:143px">
                <h4><strong>Telefon komórkowy</strong> <span class="label label-default text-right">99 zł</span></h4>
            </a>
        </div>

        <div class="col-sm-2">
            <a href="#" class="thumbnail">
                <img src="img/3.jpg" style="height:143px">
                <h4><strong>Stary laptop</strong> <span class="label label-default text-right">125 zł</span></h4>
            </a>
        </div>
        <div class="col-sm-2">
            <a href="#" class="thumbnail">
                <img src="img/4.jpg" style="height:143px">
                <h4><strong>Dżojstik (sprawny)</strong> <span class="label label-default text-right">20 zł</span></h4>
            </a>
        </div>
        <div class="col-sm-2">
            <a href="#" class="thumbnail">
                <img src="img/2.jpg" style="height:143px">
                <h4><strong>Telefon komórkowy</strong> <span class="label label-default text-right">20 zł</span></h4>
            </a>
        </div>
            <div class="col-sm-2">
            <a href="#" class="thumbnail">
                <img src="img/3.jpg" style="height:143px">
                <h4><strong>Stary laptop</strong> <span class="label label-default text-right">125 zł</span></h4>
            </a>
        </div>
        <div class="col-sm-2">
            <a href="#" class="thumbnail">
                <img src="img/1.jpg" style="height:143px">
                <h4><strong>Moneta z 1895 roku</strong> <span class="label label-default text-right">20 zł</span></h4>
            </a>
        </div>

    </div>
</div>

A tak wygląda ten fragment strony:

7-tutorial-bootstrap-jak-tworzyc-strone

Przed końcem ostatniego elementy div class=”container” dodajemy krótką stopkę:

<hr/>
<p>&copy; Infected.pl 2014. <br/> Jest to strona demo dla artykułu <a href="http://www.infected.pl/web/kursy-html-css/tutorial-bootstrap-twoja-pierwsza-responsywna-strona.html">Tutorial Bootstrap - Twoja pierwsza responsywna strona.</a>"<br/></p>

i cieszymy się z gotowej responsywnej strony ;).