Jak obuwie może ułatwić życie?

Twitter Bootstrap – bo o nim będzie dzisiaj mowa – może ułatwić życie gdy tworzymy responsywne strony www. Standardowo szablon pustej strony opartej o bootstrap wygląda tak jak poniżej:

<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">&gt;</span>
    <span class="c">&lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;</span>
    <span class="nt">&lt;title&gt;</span>Bootstrap 101 Template<span class="nt">&lt;/title&gt;</span>

    <span class="c">&lt;!-- Bootstrap --&gt;</span>
    <span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">"css/bootstrap.min.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">&gt;</span>

    <span class="c">&lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;</span>
    <span class="c">&lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;</span>
    <span class="c">&lt;!--[if lt IE 9]&gt;
      &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;</span>
  <span class="nt">&lt;/head&gt;</span>
  <span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;h1&gt;</span>Hello, world!<span class="nt">&lt;/h1&gt;</span>

    <span class="c">&lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;</span>
    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
    <span class="c">&lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;</span>
    <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"js/bootstrap.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
  <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span></code></pre>
</div>

Jak wygląda strona, ano tak -> strona bootstrap czyli nic interesującego.

Jeśli chcemy mieć szybko jakiś efekt możemy użyć „gotowca” w postaci strony -> https://getbootstrap.com/examples/jumbotron/

Tym, którzy nie chcą gotowych rozwiązań pozostaje samodzielne „składanie z klocków”. Niby nie LEGO ale też jest to budowanie z klocków.

Więcej przykładów można znaleźć na https://getbootstrap.com/getting-started/ więc nie będę tu ich przytaczać.

No a teraz przejdźmy do tego – jak to się je. By „spożyć” owo rozwiązanie po pierwsze musimy (choć niekoniecznie) ściągnąć sobie ostatnią wersję frameworka Bootstrap. Najlepiej zrobić to wchodząc na stronę https://getbootstrap.com/getting-started/#download gdzie mamy kilka możliwości. Nas będzie interesowała możliwość ściągnięcia gotowego frameworka (w chwili pisania tego artykułu aktualna wersja do pobrania to https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip ale już dostępna jest wersja alfa 4.0.0)

Jeśli mamy pobraną już ostatnią wersję to po rozpakowaniu pobranego pliku pojawiają się nam pliki w takiej strukturze folderów.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Całość kopiujemy np. do głównego folderu naszej witryny WWW. Teraz tylko dodajemy domyślny szablon strony i zapisujemy go jako index.html

Domyślny szablon strony (tak jak na wstępie):

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Inną metodą jest korzystanie z serwerów CDN (Content delivery network), które zwalniają nas z trzymania bibliotek na swoim serwerze oraz mogą sprawić, że strona będzie ładować się szybciej. Poniżej wersja z wykorzystaniem serwerów CDN.

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>    
  </body>
</html>

Kontener (container)

No dobrze, mamy szablon i co dalej? Teraz kilka słów na temat koncepcji jaka przyświeca rozwiązaniu Bootstrap. Rozwiązanie opiera się na siatce złożonej z 12 kolumn jednakowej szerokości, które mogą być dowolnie łączone tak aby nie przekroczyć 12 w rzędzie (czyli rozwiązanie 6 + 6 lub 2 + 8 + 2 lub 3 + 9 itd.).  Siatka (grid) umieszczona musi być w kontenerze (container), który jest definicją klasy .container  – dzięki temu treść zawarta w kontenerze jest centrowana na stronie a po bokach pojawiają się białe paski. (przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener.html)

Poniżej przykład tego jak wykorzystujemy kontener.

    <div class="container">
        <p></p>
    </div>

Szerokość wyświetlanego przez przeglądarkę kontenera zależna jest od urządzenia, na którym strona będzie wyświetlana a dokładnie od rozdzielczości jaką to urządzenie oferuje.

Jeśli chcemy mieć zawartość strony na pełnej szerokości przeglądarki to korzystamy z następującego rozwiązania:

    <div class="container-fluid">
        <p></p>
    </div>

(przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener_full.html)

Wiersz (row)

W kontenerze umieszczamy wiersze, które definiowane są przy użyciu klasy .row. Wiersze jak w tabeli ułożone są jeden nad drugim.

(przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener_row.html)

    <div class="container">
        <div class="row">
            <p></p>
        </div>
        <div class="row">
            <p></p>
        </div>
        <div class="row">
            <p></p>
        </div>
    </div>

Mamy już wiedzę na temat kontenera i wiersza. Pozostał nam jeszcze jeden element,który służy do budowy szkieletu strony a mianowicie wspomniana wcześniej kolumna (col).

Kolumna (col)

W poszczególnych wierszach treść umieszczana jest w 12 jednakowej szerokości kolumnach, które mogą być „grupowane”. Szerokość kolumny definiowana jest poprzez klasę, której użyjemy.

Jeśli użyjemy:

    <div class="container">
        <div class="row">
            <div class="col-xs-4"></div>
            <div class="col-xs-4"></div>
            <div class="col-xs-4"></div>
        </div>
        <div class="row">
            <p></p>
        </div>
        <div class="row">
            <p></p>
        </div>
    </div>

Otrzymujemy w rezultacie treść w trzech jednakowej szerokości kolumnach.

(przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener_colxs.html)

Jeśli użyjemy:

    <div class="container">
        <div class="row">
            <div class="col-xs-3"></div>
            <div class="col-xs-7"></div>
            <div class="col-xs-2"></div>
        </div>
        <div class="row">
            <p></p>
        </div>
        <div class="row">
            <p></p>
        </div>
    </div>

Otrzymujemy w rezultacie treść w trzech różnej szerokości kolumnach.

(przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener_colxs2.html)

Jak widać zawsze suma wynosi 12, więc czy zastosujemy klasę col-xs, czy też klasę col-lg to musimy liczyć do 12.

Tutaj kilka uwag na temat kolumn. Framework Bootstrap operuje kilkoma klasami, które powinny być stosowane w zależności od urządzenia na którym będziemy chcieli wyświetlać treść. Mamy tu do dyspozycji:

  • klasę .col-xs-* (dla bardzo małych urządzeń <768px – np. telefonów) – szerokość kontenera AUTO;
  • klasę .col-sm-* (dla małych urządzeń >= 768px – np. tabletów) – szerokość kontenera 750px;
  • klasę .col-md-* (dla średnich urządzeń >= 992px – np. komputerów stacjonarnych – szerokość kontenera 970px;
  • klasę .col-lg-* (dla dużych urządzeń >= 1200 px – np. laptopów) – szerokość kontenera 1170px;

Więcej na ten temat na stronie https://getbootstrap.com/css/#grid-options

Trzeba pamiętać o tym, że kolumn ma być 12 jeśli będzie więcej to kolejna kolumna pojawi się poniżej poprzednich 12.

W przypadku gdy strona ma być wyświetlana poprawnie na rożnego rodzaju urządzeniach możliwe jest stosowanie różnych klas  dla tych samych elementów tak jak przedstawiono to poniżej:

    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-8"></div>
            <div class="col-xs-6 col-md-4"></div>
        </div>
    </div>

Na laptopie 1680×1050 zobaczymy dwie kolumny, jedna obok drugiej a na smartfonie jedną kolumnę pełnej szerokości a pod nią kolumnę o szerokości połowy okna.

(przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener_colxsmd.html)

Inny sposób wyświetlania zawartości stron przedstawiony jest poniżej. Na laptopie 1680×1050 zobaczymy trzy kolumny jednakowej szerokości, jedna obok drugiej z marginesem po lewej i prawej a na smartfonie dwie kolumny szerokości połowy okna i pod nimi trzecią kolumnę o szerokości połowy okna.

    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-4"></div>
            <div class="col-xs-6 col-md-4"></div>
            <div class="col-xs-6 col-md-4"></div>
        </div>
    </div>

(przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener_colxsmd2.html)

Jeszcze jeden z przykładów podanych na stronie Bootstrap:

    <div class="container">
        <div class="row">
            <div class="col-xs-6"></div>
            <div class="col-xs-6"></div>
        </div>
    </div>

(przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener_colxsmd3.html)

Powyższy przykład daje nam dwie kolumny równej szerokości zarówno na laptopie jak i na smartfonie.

Przypomnijmy sobie raz jeszcze col-xs-* (smartfony), col-sm-* (tablety), col-md-* (komputery), col-lg-* (laptopy).

 

No i jeszcze na koniec tego artykułu przykład, który można prześledzić na komputerze, laptopie, smartfonie, tablecie (sprawdziłem na każdym z nich).

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
            <img src="images/pic01.jpg" align="left">
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <img src="images/pic02.jpg" align="left">
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <img src="images/pic03.jpg" align="left">
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <img src="images/pic04.jpg" align="left">
        </div>            
    </div>
</div>

(przykład -> https://www.rafalrebacz.pl/examples/bootstrap/kontener_responsive.html)

Więcej w kolejnych artykułach. Zapraszam do przeglądania, czytania, komentowania.

Kolejny artykuł o bootstrap -> https://www.rafalrebacz.pl/2015/09/21/obuwnicze-zmagania-z-materia/

Avatar

Autor: gervee

Pełnoetatowy ojciec małej gromadki, programista(?), "amator" fotograf, "dłubacz" lubiący DIY, miłośnik chmielonego napitku. "Żartowniś" bez poczucia humoru ;).

Dodaj komentarz