Tutorial Bootstrap i RWD – responsywne strony

content-like-water-rwd-128

Poziom średnio-zaawansowany

Dziś szybki tutorial Bootstrap o tworzeniu responsywnych stron WWW. A właściwie szablonu, stanowiącego dobry punkt wyjścia dla dalszych projektów. Opowiemy też o kilku technikach, które pozwalają osiągnąć określone rezultaty. Zebraliśmy także linki do zasobów z cennymi informacjami.

Tutorial Bootstrap i RWD – szablon od ręki

Jak wiemy, Twitter Bootstrap (TB) to framework CSS, rozwijany jako projekt open-source. Niesamowicie ułatwia i przyśpiesza tworzenie solidnych, przyjemnych dla oka projektów web (UI). Mobile-first! Przejdźmy więc od razu do rzeczy i stwórzmy podstawowy szablon. Chcemy, aby szablon był gotowy do uruchomienia na przeglądarkach desktop oraz mobilnych. Pierwszym detalem będzie więc zdefiniowanie meta viewport (obszar strony widoczny dla użytkownika na jednym ekranie). Więcej o podstawach HTML5 tutaj.

Dokument HTML5 i dołączenie potrzebnych plików

Stwórzmy dokument HTML5, dodajmy do niego jQuery oraz Bootstrap 3.3.7 (np. z https://www.bootstrapcdn.com).

Po prostu szkielet strony. Przykład A:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    </head>
    <body>
        <div class="container">
            <h1>Bootstrap starter</h1>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    A
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    B
                </div>
            </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </body>
</html>

Container – wiersze (rows) musimy umieszczać wewnątrz elementu z klasą .container (fixed-width) lub .container-fluid (full-width) dla poprawnego wyrównania elementów – dopasowania i wypełnienia.

content-like-water-rwd

Dalej widzimy nadane klasy CSS, takie jak:

class=”col-xs-12 col-sm-6 col-md-4 col-lg-3″

poprzez które (w dużym skrócie) definiujemy zasady CSS dla dowolnych urządzeń (desktop, tablet, mobile, …). Oczywiście jeśli określmy tylko wybrane przypadki, np.:

class=”col-xs-12 col-sm-6″

to dla pozostałych przypadków zostaną przyjęte domyślne zasady.

OK, ale .col-xs-3, -md, -wtf?

To w gruncie rzeczy proste, a jakże przydatne. Rozszyfrujmy więc co oznaczają te prefiksy. Mówiąc najprościej, są one używane to zdefiniowania, na jakich rozmiarach ekranu klasy te powinny być zastosowane. Grid system w Bootstrap 3+ definiuje takie 4 rozmiary:

xs = extra small screens (mobile phones, max 767px)

sm = small screens (tablets, >= 768px)

md = medium screens (some desktops, >= 992px)

lg = large screens (remaining desktops, >= 1200px)

Zwykle powinno się określić klasy, które zdefiniują pożądane zachowanie elementu, dla przypadków urządzeń, które chcemy obsłużyć.

Przykładowo element div z klasami col-xs-6 oraz col-sm-4 obejmie połowę ekranu na telefonie (extra small), oraz 1/3 ekranu na tablecie (sm).

Analogicznie:

<div class="col-xs-6 col-sm-8">Column 2</div>

obejmie połowę ekranu na telefonie, oraz 2/3 na tablecie. I tak dalej.

Bootstrap grid to świetne „rusztowanie” dla responsywnych projektów. Z całą pewnością wart poświęcenia dłuższej chwili na jego przestudiowanie i wypróbowanie w praktyce:

http://getbootstrap.com/css/#grid

Dodatkowe artykuły o Bootstrap Grid:

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap

Bootstrap oferuje coś jeszcze – definiowanie czy element ma być widoczny / ukryty na ekranie określonej wielkości, dzięki klasom:

.visible-xs

.visible-sm

.visible-md

.visible-lg

oraz:

.hidden-xs

.hidden-sm

.hidden-md

.hidden-lg

To najprostsza droga do kontroli wyświetlania / ukrywania elementów na różnych urządzeniach.

Przykład:

<div class="visible-xs-block visible-sm-block"></div>

W tym przypadku element div będzie wyświetlany (block) tylko na smartfonach i tabletach, a ukryty w przypadku desktop.

Dokumentacja:

http://getbootstrap.com/css/#responsive-utilities

Przy okazji, warto przyjrzeć się bliżej dokumentacji komponentów, które to pozwalają wzbogacać nasz projekt o elementy UI, w bardzo komfortowy sposób:

http://getbootstrap.com/components


Be more responsive

Pora na bardziej rozwinięty przykład. Tym razem coś, co bardziej przypomina normalną stronę, oraz dostosowuje się do rozmiarów ekranu. W tym celu dodamy również media queries.

Przykład B

HTML:

...
<body>
  <div id="container">
    <div id="header">
      <h1>Page template</h1>
    </div>

    <div id="content">
      <h2>Content</h2>
      <p>Lorem ipsum ...</p>
      <p>Foo bar ...</p>
      <p>Lorem ipsum ...</p>
      <p>Foo bar ...</p>
      <br>
      <p>Thank you!</p>
    </div>

    <div id="sidebar">
      <h2>Options</h2>
      <p>Option A</p>
      <p>Option B</p>
      <p>Option C</p>
      <p>Option D</p>
    </div>

    <div id="footer">
      <h3>Our awesome footer!</h3>
    </div>
  </div>
</body>

Przykładowy CSS:

html, body {
    height: 100%;
    margin: 5px;
    padding: 5px;
    font: 100% Arial, sans-serif;
}

/** Defaults **/
#header {
    height: 150px;
}

#content {
    background: #ffdb19;
    float: left;
    padding: 5px 15px;
    width: 75%;
}

#sidebar {
    margin-top: 20px;
    float: right;
    width: 20%;
}

#footer {
    clear: both;
    text-align: center;
}

#header, #sidebar, #footer {
    border: solid 1px #ccc;
    padding: 5px 15px;
}

Dodajmy jeszcze tylko media queries, które dostosują wygląd elementów zależnie od tego, na jakim ekranie (urządzeniu) uruchomimy stronę:

/** Media Queries to handle particular cases **/

/* 980px or less */
@media screen and (max-width: 980px) {
    #content {
        width: 60%;
    }
    #sidebar {
        width: 30%;
    }
}

/* 700px or less */
@media screen and (max-width: 700px) {
    #content {
        width: auto;
        float: none;
    }
    #sidebar {
        width: auto;
        float: none;
    }
}

/* 480px or less */
@media screen and (max-width: 480px) {
    #header {
        height: auto;
    }
    h1, h2 {
        font-size: 22px;
    }
    #sidebar {
        display: none;
    }
}

Zgodnie z tym co zdefiniowaliśmy, wygląd strony dostosuje się odpowiednio na ekranach o różnych rozmiarach. Przykładowe zrzuty ekranu:

https://www.screencast.com/t/Cw7bS4TTbnl

https://www.screencast.com/t/O9UZCGVrM

https://www.screencast.com/t/j8IqJM88M

https://www.screencast.com/t/fxR4xajsvAxx

Do pobrania źródła (pełny kod HTML i CSS naszych przykładów):

http://javascript-html5-tutorial.net/demos/tutorial-bootstrap-start.zip

Wydawnictwo Strefa Kursów

Zasoby

– Bootstrap od podstaw + przykłady:

http://javascript-html5-tutorial.pl/twitter-bootstrap-w-pigulce.html

http://javascript-html5-tutorial.pl/uzycie-mustache-js-na-przykladzie-aplikacji-express-czesc-12.html

http://javascript-html5-tutorial.pl/mustache-js-na-przykladzie-aplikacji-express-czesc-22.html

– Tutoriale:

http://inspirationalpixels.com/tutorials/creating-a-responsive-menu-with-html-css-jquery

https://scotch.io/tag/bootstrap

– Media queries:

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

http://www.moreofless.co.uk/bootstrap-3-media-queries-default-sizes

http://www.vandelaydesign.com/turn-any-site-into-a-responsive-site

https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

– Szablony – gotowe przykłady stron responsywnych, bazujących na Bootstrap:

http://www.w3schools.com/bootstrap/bootstrap_templates.asp

Na przykład:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_temp_blog&stacked=h

– Więcej przykładów – dobry start point dla naszych projektów:

http://getbootstrap.com/getting-started/#examples

Na przykład:

http://getbootstrap.com/examples/carousel

http://getbootstrap.com/examples/dashboard

– Różne rozwiązania:

http://www.initializr.com

http://javascript-html5-tutorial.net/category/bootstrap

Polecamy również

Modernizr – biblioteka wspomagająca m.in. wykrywanie funkcjonalności dostępnych w przeglądarce i pracę z media queries

Kurs: Responsive Web Design & Bootstrap

Podsumowanie

Mobile first, tworzenie responsywnych stron www, wyglądających znakomicie na różnych urządzeniach, to nie lada frajda. Bootstrap pomaga z tym znakomicie. Planujemy już kolejne artykuły o Boostrapie i podejściu mobile first.

Miłej zabawy!

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+1Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.