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.
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: 
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:
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.. navbar-inverse
Naszą własną przeróbką w tym menu jest zastąpienie Bootstrapowej klasynaszą 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: 
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: 
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:
Przed końcem ostatniego elementy div class=”container” dodajemy krótką stopkę:
<hr/>
<p>© 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 ;).
Świetny kurs, oby więcej i więcej. Pozdrawiam.
Dzięki,
ciesze się, że okazał się pomocny 🙂
Mam pytanie, jak mogę zmienić moją stronę, która jest w rozdzielczości standardowej (bez użycia bootstrap) na stronę responsywną?
Najłatwiej będzie przepisać stronę na układ Bootstrapa. To znaczy stworzyć bootstrapowy szkielet strony, a następnie powstawiać do niego elementy starej strony.
Super Tutorial
ale zdjęcia podglądowe się nie ładują i nie widzę plików „załącznika” do pobrania