Różnice między HTML a XHTML

Twórcy HTML5 zaimplementowali w nim 2 tryby parsowania danych – HTML oraz XML. W zależności od tego, w jaki sposób programista określi typ zawartości „Content-Type” w nagłówku dokumentu html, taki tryb parsowania (składni) zostanie przyjęty w całym dokumencie. Programista możę użyć następujących tagów do określenia składni:

Content-type: text/html

Content-type: application/xml+xhtml

Typ `text/html` charakteryzuje się poniższymi cechami:

  • Dokument musi zaczynać się definicją !DOCTYPE html.

    <!DOCTYPE html />

  • Nie jest wymagane stosowanie otwierających lub zamykających znaczników dla wszystkich tagów,

    <p> Tu jest pierwszy akapit. <p> A tu drugi, zauważ że nie zamknęliśmy poprzedniego...

  • Tylko elementy nie obejmujące innych mogą (ale nie muszą) być zamykane za pomocą />. Np. br, img, hr, link,

  • Tagi i atrybuty można pisać zarówno małymi jak i wielkimi literami bez wpływu na działanie strony,

    <span>Jakiś tekst</spAN>

  • Wartości dla atrybutów nie muszą być w cudzysłowiach,

    <img src=obrazek.jpg />

  • Można stosować puste atrybuty (checked, disabled), Nie trzeba stosować znaków unikowych dla znaków specjalnych,

Natomiast XML to drugi tryb składni, który może być stosowany. Jest on dużo bardziej restrykcyjny i nazywa się go również XHTML. Innymi słowy, XHTML jest to kod HTML zapisany za pomocą składni XML. W nagłówku dokumenty określany jest jako Content-Type: application/xml+xhtml.

Cechy charakterystyczne XHTML:

  • Wszystkie elementy muszą mieć tag otwierający,
  • Wszystkie elementy, które mogą obejmować inne muszą mieć tag zamykający (np. ‚p‚, ‚span‚, ‚div‚),
  • Elementy można zamykać za pomocą />, Rozmiar ma znaczenie 🙂 – należy używać jednolitego rozmiaru liter dla tagów i atrybutów (z reguły jest to zapis małymi literami),
  • Wartości atrybutów muszą być zawierane w cudzysłowie Nie można stosować pustych atrybutów (zamiast disabled, stosujemy disabled = "disabled" itd.)
  • Znaki specjalne muszę być być zastąpione wersjami unikowymi.

Z powyższych informacji łatwo wysnuć wniosek, że stosowanie składni XHTML może przyprawić o większy ból głowy, z kolei składnia text/html jest dużo bardziej „liberalna” i ma większą tolerancję na różne sposoby pisania kodu.

Tworzenie stron w HTML5 i CSS3 oraz Bootstrap

Zajrzałeś tu, bo pewnie chcesz się nauczyć tworzyć strony internetowe.

W tym celu możesz tygodniami czytać grube tomiska opasłych książek, poznając każdy aspekt tworzenia stron w teorii.

Albo możesz obejrzeć ten kurs i od razu wskoczyć w wir tworzenia stron, korzystając z nowoczesnych trendów HTML5 i CSS3 oraz biblioteki Bootstrap.

W tym kursie pokazuję jak zbudować nowoczesną stronę – widoczną pod tym linkiem – a Ty oglądasz, wykonujesz to samo i uczysz się poprzez praktykę.

Tworzenie stron jest łatwiejsze niż myślisz. Oczywiście, jeśli uczysz się z wartościowych źródeł. Przez cały kurs jestem do Twojej dyspozycji, osobiście odpowiadając na Twoje pytania i wątpliwości.

Dla kogo jest ten kurs?

  • Dla wszystkich, którym zależy na praktycznym nauczeniu się tworzenia stron internetowych, takich jak ta.
  • Dla tych, którzy nie chcą czytać teorii, ale wolą zobaczyć jak tworzenie stron działa w praktyce
  • Dla tych, którzy mają doświadczenie z HTML i CSS, ale chcieliby szybko nauczyć się Bootstrapa

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 ;).

Działanie Bootstrapa w kontekście responsywnych stron

Framework Twitter Bootstrap w ostatnich kilku latach szturmem zdobywa serca programistów, pragnących budować responsywne strony. Praktycznie każdy, kto tworzy nowy projekt, rozważa wykorzystanie Bootstrapa do „zasilania” frontendu. Nic dziwnego, bo z każdą kolejną wersją Bootstrapa dostajemy zestaw gotowych klas, które znacząco ułatwiają i przyspieszają budowę responsywnych stron internetowych (a z wersją Bootstrap 3 również stron mobilnych).

Zatem przyjrzyjmy się bliżej jak działa Bootstrap i dlaczego tak dobrze wspiera budowę responsywnych stron.

Zapytania mediów

Po pierwsze, Bootstrap dzieli urządzenia na których przeglądana jest strona na 4 kategorie pod kątem rozmiaru ekranu:

  • Extra Small Devices – urządzenia z ekranem o szerokości mniejszej niż 768px, np. smartfony.

  • Small Devices – urządzenia z ekranem o minimalnej szerokości min-width: 768px i maksymalnej szerokości max-width: 991px. Na przykład tablety.

  • Medium Sized Devices – urządzenia z ekranem o minimalnej szerokości min-width:992px oraz maksymalnej szerokości max-width:1199px. Na przykład monitory komputerów stacjonarnych.

  • Larger devices – urządzenia z ekranem szerszym niż min-width: 1200px, np. monitory panoramiczne.

Bootstrap dopasowuje arkusz stylów CSS do danego urządzenia dzięki zastosowaniu zapytań @media.

Layout oparty o Grid

Po drugie, Bootstrap działa w oparciu o tzw. GRID system. W uproszczeniu, po prostu dzieli stronę na kolumny, a precyzyjniej – na 12 kolumn. Poniżej znajduje się szablon według którego tworzona jest struktura treści strony – w tym wypadku jest ona dwukolumnowa:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <p>kolumna 1</p>
        </div>
        <div class="col-xs-6">
            <p>kolumna 2</p>
        </div>
    </div>
</div>

Według powyższego, struktura strony zawiera się w div.container. Obejmuje ona całą powierzchnię ekranu z odstępem 15px od lewej i prawej krawędzi ekranu (padding-left:15px oraz padding-right:15px zdefiniowane w bootstrap.css). Dzięki powyższym zapytaniom mediów, .container może przyjmować następujące szerokości:

  • width: auto (lub brak) na smartfonach (ekran mniejszy niż 768px)
  • width: 750px na tabletach (ekran większy równy 768px)
  • width: 970px na komputerach stacjonarnych (ekran większy równy 992px)
  • width: 1170px na monitorach panoramicznych (ekran większy równy 1200px)

Kolejnym elementem jest div z klasą .row. Jest on używany jako „opakowanie” dla kolumn. Jego najważniejsze atrybuty to margin-left:-15px oraz margin-right:-15px. Te minusowe wartości marginesów niwelują padding nadany klasie .container, która obejmuje .row. W wyniku tego .row dotyka lewej i prawej krawędzi ekranu. Dlaczego? Wszystko wyjaśnia się, jeśli zobaczymy jak zaprogramowane są kolumny. Poniżej klasa .xs-col-6:

.col-xs-6 {
padding-right: 15px;
padding-left: 15px;
}

A więc widzimy, że kolumny posiadają 15px padding. Dzięki temu zapewniona jest nie tylko odległość zawartości kolumn od krawędzi ekranu (zaznaczam, padding zapewnia odległość zawartości kolumn, sama krawędź kolumny dotyka krawędzi ekranu), ale także symetryczne odległości między zawartością sąsiadujących kolumn.

Taka struktura sprawia, że zawartość strony pozostaje w odległości 15px od krawędzi ekranu. Gdybyśmy chcieli tworzyć na całej szerokości, korzystamy z klasy .container-fluid zamiast .container, która wypełnia całą szerokość ekranu.

O co chodzi z tymi kolumnami i systemem GRID

Przestrzeń każdej strony opartej na Bootstrapie zajmuje w sumie 12 „niewidocznych” kolumn. To od nas jako developerów zależy, ile z tych kolumn chcemy wykorzystywać w danym miejscu. W jaki sposób wpływa to na responsywność? Po pierwsze, istnieją 4 kategorie klas dla kolumn w zależności od tego jak dużo miejsca mają zajmować, i na jakim urządzeniu przeglądana jest strona:

  • .col-xs-… – na smartfonach
  • .col-sm-… – na tabletach
  • .col-md-… – na komputerach
  • .col-lg-… – na dużych monitorach panoramicznych

W deklaracji każdej klasy po ostatnim myślniku dodajemy cyfrę od 1 do 12. Wyznacza ona liczbę kolumn, jaką zajmie nasz div. Na przykład col-xs-6 tworzy kolumnę szeroką 6 razy bardziej od pojedynczej kolumny:

bootstrap-tutorial

Po drugie, w domyśle szerokości tych kolumn nie są zdefiniowane (width:auto) jednak w wyniku zapytań mediów, szerokość każdej kolumny przyjmuje wartości procentowe:

.col-*-12 { width: 100%; }

.col-*-11 { width: 91.66666667%; }

.col-*-10 { width: 83.33333333%; }

.col-*-9 { width: 75%; }

.col-*-8 { width: 66.66666667%; }

.col-*-7 { width: 58.33333333%; }

.col-*-6 { width: 50%; }

.col-*-5 { width: 41.66666667%; }

.col-*-4 { width: 33.33333333%; }

.col-*-3 { width: 25%; }

.col-*-2 { width: 16.66666667%; }

.col-*-1 { width: 8.33333333%; }

Responsywne tabele

W Bootstrapie tworzymy tabele za pomocą klasy .table. W jej wyniku tabela wypełnia całą szerokość elementu, w którym sięznajduje (rodzica DOM), ponieważ posiada atrybuty width:100% oraz max-width:100%.

To sprawia, że tabela odpowiednio reaguje na zmniejszanie/powiększanie ekranu. Ale bardzo duże (wielokolumnowe) tabele wyglądają nieczytelnie na bardzo wąskich ekranach, kiedy je tak „miażdżymy”. Z pomocą przychodzi nam druga klasa Bootstrapa poświęcona tabelom: .table-responsive. Zastosowanie .table-responsive zamiast .table sprawia, że nie pozwalamy tabeli zwężać się na małych ekranach, ale zamiast tego dodajemy możliwość przewijania zawartości tabeli w poziomie:

tutorial-bootstrap-responsywna-strona

Ciekaw jestem czy znalezliście jeszcze inne pomysły autorów Bootstrapa zastosowane w celu radzenia sobie z responsywnością stron i prawidłowym wyświetlaniem contentu na różnych ekranach.