WordPress i Bootstrap. Bezpłatnie i elastycznieTekst

0
Recenzje
Przeczytaj fragment
Oznacz jako przeczytane
Jak czytać książkę po zakupie
Czcionka:Mniejsze АаWiększe Aa


Projekt okładki i stron tytułowych Grzegorz Laskowski

Ilustracja na okładce Shutterstock/Seraphim Art

Wydawca Łukasz Łopuszański

Redaktor prowadzący Jolanta Kowalczuk

Redaktor Lucyna Wyciszkiewicz-Pardej

Koordynator produkcji Anna Bączkowska

Przygotowanie publikacji elektronicznej Ewa Modlińska

Skład wersji elektronicznej na zlecenie Wydawnictwa Naukowego PWN: Tomasz Szymański

Książka, którą nabyłeś, jest dziełem twórcy i wydawcy. Prosimy, abyś przestrzegał praw, jakie im przysługują. Jej zawartość możesz udostępnić nieodpłatnie osobom bliskim lub osobiście znanym. Ale nie publikuj jej w internecie. Jeśli cytujesz jej fragmenty, nie zmieniaj ich treści i koniecznie zaznacz, czyje to dzieło. A kopiując jej część, rób to jedynie na użytek osobisty.

Szanujmy cudzą własność i prawo

Więcej na www.legalnakultura.pl

Polska Izba Książki

Copyright © by Wydawnictwo Naukowe PWN SA

Warszawa 2015

eBook został przygotowany na podstawie wydania papierowego z 2015 r.

(wyd. I)

Warszawa 2015

ISBN 978-83-01-18485-8

Wydawnictwo Naukowe PWN SA

02-460 Warszawa, ul. Gottlieba Daimlera 2

tel. 22 69 54 321, faks 22 69 54 288

infolinia 801 33 33 88

e-mail: pwn@pwn.com.pl

www.pwn.pl

Spis treści

Wstęp

Rozdział 1. Bootstrap

1.1. Pierwsza strona

1.2. System siatkowy

1.3. Nagłówki stron

1.4. Panele

1.5. Przyciski

1.6. Media

1.7. Obrazy

1.8. Listy

1.9. Listy rozwijane

1.10. Nawigacja

Rozdział 2. WordPress

2.1. Przewaga CMS-a nad jego brakiem

2.2. Serwer lokalny

2.3. Instalacja WordPressa

2.4. Zaplecze WordPressa

Rozdział 3. Makieta i projekt graficzny strony www

Rozdział 4. Kodowanie strony

4.1. Bootstrap

4.2. Tło

4.3. Nagłówek

4.3.1. Wprowadzenie

4.3.2. Logo

4.3.3. Nawigacja

4.4. Slider

4.5. Główna treść strony

4.6. Sidebar

4.7. Stopka

4.8. Podstrona

Rozdział 5. Tworzenie szablonu dla WordPress

5.1. Przygotowanie WordPressa

5.2. Struktura plików szablonu

5.3. Plik style.css

5.4. Front-page.php

5.5. Header.php

5.6. The Loop

5.7. Slider

5.8. Single.php

5.9. Plik index.php

5.10. Sidebar.php

5.11. Page.php

Wstęp

W książce HTML5 i CSS3. Definicja nowoczesności (WN PWN, Warszawa 2015) pokazałem, jak zbudować prostą stronę responsywną. Znając podstawy HTML i CSS, można zrobić kolejny krok i poznać Twitter Bootstrapa i WordPressa. O ile Bootstrapa może jeszcze nie znacie, o tyle o WordPressie przynajmniej słyszeliście. Wyjaśnię krok po kroku, czym jest Bootstrap i w jaki sposób połączyć go z WordPressem. A kiedy już odkryjecie możliwości, jakie dają, pewnie już nie wrócicie do tworzenia stron internetowych w „czystym” HTML-u.

1 Bootstrap

1.1. Pierwsza strona

Obecnie internauci korzystają z sieci www w zasadzie wszędzie – na spacerze, w sklepie, biurze. Internet, który był dostępny tylko w domu, w pracy, w bibliotece czy na uczelni, to już przeszłość. Dlatego szczególny nacisk kładzie się na responsywność stron. Bootstrap to obecnie najpopularniejszy framework (ang. platforma programistyczna) łączący HTML, CSS i JavaScript, który jest wykorzystywany do budowy witryn mobile first, czyli witryn, które przede wszystkim mają być wyświetlane na smartfonach, tabletach i innych urządzeniach przenośnych.

Aby skorzystać z Bootstrapa, należy go najpierw zainstalować. Pobieramy go ze strony getbootstrap.com. Na głównej stronie klikamy Download Bootstrap (rys. 1).


Rysunek 1. Pobieranie Bootstrapa

Na kolejnej stronie znajdziemy trzy paczki do pobrania. Zaczynamy od kliknięcia Download Bootstrap. Ściągnięty zostaje plik zip, który wypakowujemy np. na Pulpit.

Po otwarciu folderu, który otrzymaliśmy, zobaczymy w nim kolejne foldery: css, fonts i js (rys. 2). Wszystkie te foldery odnoszą się wzajemnie do siebie, a skoro są powiązane, musimy pamiętać, aby podczas tworzenia witryny internetowej skopiować je do głównego folderu z pozostałymi plikami.


Rysunek 2. Folder z plikami potrzebnymi do prawidłowego działania witryny

Jeżeli mamy już potrzebne foldery, możemy spróbować utworzyć pierwszą stronę. Najwygodniejsze będzie korzystanie z edytora treści stron www, np. Brackets.

W wybranej lokalizacji zakładamy nowy folder, np. pierwsza_strona. Następnie kopiujemy do niego wspomniane wcześniej foldery: css, fonts i js. W edytorze tworzymy nowy plik i zapisujemy go w folderze pierwsza_strona pod nazwą index.html. Teraz musimy wrócić na stronę, z której pobieraliśmy pliki Bootstrapa. W sekcji Basic Template znajdziemy podstawowy kod, w którym są już zapisane odwołania do wymaganych plików. W prawym górnym rogu okienka z kodem klikamy Copy (rys. 3). Kod zostaje skopiowany do Schowka.

Wracamy do pliku index.html i wklejamy (Ctrl + V) zawartość Schowka. Struktura pliku nie jest skomplikowana, zawiera jednak odwołania do plików, dzięki którym witryna będzie responsywna. Pierwsze odwołanie do arkusza stylów znajduje się na początku pliku: <link href=”css/bootstrap.min.css” rel=”stylesheet”>. Pozostałe dwa znajdziemy przed tagiem zamykającym </body>. Jedno to odwołanie do pliku jquery.min.js, drugie – bootstrap.min.js.

Możemy uruchomić naszą stronę w przeglądarce – zobaczymy napis „Hello, world!”. Jeśli napis jest dość duży, możemy założyć, że arkusze stylów działają prawidłowo.

 

Rysunek 3. Kopiowanie podstawowej struktury pliku html

1.2. System siatkowy

Projektując strony responsywne, należy wziąć pod uwagę typowe rozdzielczości dla urządzeń mobilnych oraz ekranów monitorów. Od czego zacząć? Przede wszystkim od utworzenia siatki (ang. grid), która będzie stanowiła szkielet naszej strony.

System siatkowy, który stosuje się w Bootstrapie, to podzielenie całej strony na rzędy i kolumny. Każdy rząd składa się z dwunastu kolumn, które w sposób dynamiczny dopasowują się do rozmiaru okna przeglądarki. Liczba rzędów nie jest ściśle sprecyzowana – zależy ona od indywidulanych potrzeb.

Większość stron projektowana jest tak, aby po bokach zostawało nieco pustej przestrzeni, dzięki czemu strona jest bardziej przejrzysta. W Bootstrapie będziemy korzystali z klasy .container, która automatycznie tworzy marginesy z lewej i prawej strony oraz wyśrodkowuje zawartość. O ile podczas projektowania stron responsywnych w „czystym” HTML-u musieliśmy pamiętać o samodzielnym ustawianiu punktów granicznych, które wskazywały, jak ma się zachowywać strona przy określonych rozdzielczościach, o tyle Bootstrap nas w tym wyręcza. Założone są rozdzielczości: <768 px, 768–992 px, 992–1200 px oraz >1200 px. Wystarczy, że to wiemy, natomiast nie musimy martwić się o właściwe dostosowanie szerokości elementów.

Siatkę tworzy się w bardzo prosty sposób, korzystając z elementów <div>, w których umieszczamy rzędy, czyli <row>, a w nich kolumny – <col>. Zatrzymajmy się na chwilę i odejdźmy od tematyki informatycznej. Wyobraźmy sobie, że jesteśmy na zakupach. Rosły mężczyzna będzie szukał na siebie ubrań w rozmiarze XL, średniej budowy kobieta w rozmiarze M, a drobna osoba w rozmiarze XS. Podobnie podejdziemy do kolumn w projekcie strony. Będą one korzystały z podobnych oznaczeń, które w rzeczywistości są prefiksami klas odpowiedzialnych za tworzenie kolumn dla określonych rozdzielczości. I tak przy kolumnach dla bardzo małych wyświetlaczy stosujemy prefiks col-xs (ang. extra small), dla małych wyświetlaczy col-sm (ang. small), dla dużych col-md (ang. medium) i dla bardzo dużych col-lg (ang. large).

Zobaczmy, jak to działa w praktyce. Otwieramy w edytorze treści www utworzony wcześniej index.html. Zaczniemy od zaprojektowania rzędu dwunastu kolumn dla bardzo dużych ekranów. Usuwamy treść „Hello, world!” i w jej miejsce wprowadzamy kod:

<div class=”container”>

<div class=”row”>

<div class=”col-lg-1”>Kolumna1</div>

<div class=”col-lg-1”>Kolumna2</div>

<div class=”col-lg-1”>Kolumna3</div>

<div class=”col-lg-1”>Kolumna4</div>

<div class=”col-lg-1”>Kolumna5</div>

<div class=”col-lg-1”>Kolumna6</div>

<div class=”col-lg-1”>Kolumna7</div>

<div class=”col-lg-1”>Kolumna8</div>

<div class=”col-lg-1”>Kolumna9</div>

<div class=”col-lg-1”>Kolumna10</div>

<div class=”col-lg-1”>Kolumna11</div>

<div class=”col-lg-1”>Kolumna12</div>

</div>

</div>

Załóżmy, że drugi wiersz, również dla bardzo dużych rozdzielczości, ma składać się już tylko z dwóch kolumn. Nadal wewnątrz <div class=”container”> wprowadzamy następujący kod:

<div class=”row”>

<div class=”col-lg-6”>Kolumna1</div>

<div class=”col-lg-6”>Kolumna2</div>

</div>

Zauważmy, że nastąpiła tu istotna zmiana. Przy obu kolumnach pojawiła się wartość 6. Oznacza to, że i jedna, i druga kolumna są w rzeczywistości złożone z sześciu kolumn. Gdybyśmy chcieli, aby pierwsza kolumna była węższa, moglibyśmy określić jej szerokość, np. jako trzy kolumny, a drugiej przypisać wartość 9 (rys. 4):

<div class=”row”>

<div class=”col-lg-3”>Kolumna1</div>

<div class=”col-lg-9”>Kolumna2</div>

</div>


Rysunek 4. Podział rzędów na dwanaście kolumn, dwie równe kolumny, dwie kolumny o różnej szerokości

Pierwsza siatka jest gotowa. Jeżeli teraz zmniejszymy rozmiar okna przeglądarki, domyślnie kolumny zostaną przeniesione niżej – w pojedynczym wierszu będzie tylko jedna kolumna (rys. 5).


Rysunek 5. Zmiana wyglądu strony przy mniejszej rozdzielczości

W przypadku małych i bardzo małych rozdzielczości jedna kolumna zazwyczaj wystarcza. Jednak przy rozdzielczości tabletowej taki sposób wyświetlania treści jest niezbyt atrakcyjny. Musimy więc dopasować siatkę tak, aby strona miała sens. Ponownie określamy więc szerokość kolumn.

Załóżmy, że pierwszy rząd w rozdzielczości tabletowej (poziomej) zostanie podzielony na dwa rzędy. Wszystkie kolumny mają być jednakowej szerokości. Wystarczy, że dopiszemy właściwą klasę oraz liczbę kolumn. Jeżeli dla każdej kolumny przyjmiemy, że ma mieć szerokość dwóch kolumn, uzyskamy łącznie dwadzieścia cztery kolumny. Zatem automatycznie po dwunastu kolumnach pozostałe zostaną przeniesione do nowego rzędu:

<div class=”row”>

<div class=”col-lg-1 col-md-2”>Kolumna1</div>

<div class=”col-lg-1 col-md-2”>Kolumna2</div>

<div class=”col-lg-1 col-md-2”>Kolumna3</div>

<div class=”col-lg-1 col-md-2”>Kolumna4</div>

<div class=”col-lg-1 col-md-2”>Kolumna5</div>

<div class=”col-lg-1 col-md-2”>Kolumna6</div>

<div class=”col-lg-1 col-md-2”>Kolumna7</div>

<div class=”col-lg-1 col-md-2”>Kolumna8</div>

<div class=”col-lg-1 col-md-2”>Kolumna9</div>

<div class=”col-lg-1 col-md-2”>Kolumna10</div>

<div class=”col-lg-1 col-md-2”>Kolumna11</div>

<div class=”col-lg-1 col-md-2”>Kolumna12</div>

</div>

Kolejny rząd był podzielony na dwie kolumny – powtarzamy zapis, zmieniając jedynie prefiks lg na md.

<div class=”row”>

<div class=”col-lg-6 col-md-6”>Kolumna1</div>

<div class=”col-lg-6 col-md-6”>Kolumna2</div>

</div>

Podobnie postępujemy z ostatnim rzędem (rys. 6).

<div class=”row”>

<div class=”col-lg-3 col-md-3”>Kolumna1</div>

<div class=”col-lg-9 col-md-9”>Kolumna2</div>

</div>


Rysunek 6. Dostosowanie siatki do rozdzielczości tabletowej

W przedstawiony sposób działa siatka Bootstrapa. Oczywiście, przygotowując projekt, warto narysować wcześniej makietę, która umożliwi dokładne ustalenie, czy elementy, które umieścimy w kolumnach, zmieszczą się w nich, czy należy je rozlokować zupełnie inaczej.

Podział na kolumny co prawda jest już gotowy, jednak, żeby dokładnie było widać, jak przebiega, warto nadać kolumnom różne kolory tła. Dzięki temu zobaczymy, czy faktycznie dane kolumny mają określoną szerokość czy nie. Tworzymy nowy plik i zapisujemy go pod nazwą style.css w podfolderze css. Następnie musimy w pliku index.html odwołać się do pliku zewnętrznego, który właśnie zapisaliśmy. Najwygodniej takie odwołanie prowadzić bezpośrednio pod odwołanie do pliku bootstrap.min.css. Zmieniamy tylko nazwę pliku:

<link href=”css/style.css” rel=”stylesheet”>

W pliku style.css ustawimy dwa kolory tła. Tyle wystarczy, aby podział na kolumny był bardziej widoczny. Przydadzą się do tego dwie klasy, np. .tlo1 i .tlo2:

.tlo1 {

background: #037EF6;

}

.tlo2 {

background: #A8B71D;

}

Użyjemy teraz klas, dopisując je obok definicji kolumn. Wracamy więc do pliku index.html i wprowadzamy zmianę:

<div class=”container”>

<div class=”row”>

<div class=”col-lg-1 col-md-2 tlo1”>Kolumna1</div>

<div class=”col-lg-1 col-md-2 tlo2”>Kolumna2</div>

<div class=”col-lg-1 col-md-2 tlo1”>Kolumna3</div>

<div class=”col-lg-1 col-md-2 tlo2”>Kolumna4</div>

<div class=”col-lg-1 col-md-2 tlo1”>Kolumna5</div>

<div class=”col-lg-1 col-md-2 tlo2”>Kolumna6</div>

<div class=”col-lg-1 col-md-2 tlo2”>Kolumna7</div>

<div class=”col-lg-1 col-md-2 tlo1”>Kolumna8</div>

<div class=”col-lg-1 col-md-2 tlo2”>Kolumna9</div>

<div class=”col-lg-1 col-md-2 tlo1”>Kolumna10</div>

<div class=”col-lg-1 col-md-2 tlo2”>Kolumna11</div>

<div class=”col-lg-1 col-md-2 tlo1”>Kolumna12</div>

</div>

<div class=”row”>

<div class=”col-lg-6 col-md-6 tlo1”>Kolumna1</div>

<div class=”col-lg-6 col-md-6 tlo2”>Kolumna2</div>

</div>

<div class=”row”>

<div class=”col-lg-3 col-md-3 tlo2”>Kolumna1</div>

<div class=”col-lg-9 col-md-9 tlo1”>Kolumna2</div>

</div>

</div>

Zapisujemy plik i odświeżamy go w przeglądarce (rys. 7).


Rysunek 7. Dodanie tła do kolumn za pomocą zewnętrznego pliku CSS

Może się zdarzyć, że będziemy chcieli umieścić w projekcie kolumnę, np. o szerokości dwóch kolumn, jednak w taki sposób, aby znajdowała się na środku. Można, oczywiście, utworzyć dwie puste kolumny z lewej i prawej strony oraz kolumnę środkową, którą wypełnimy. Jednak w takiej sytuacji lepiej będzie skorzystać z klasy offset, dzięki której możemy przesunąć kolumnę o określoną liczbę kolumn.

Jeśli zatem kolumna ma szerokość dwóch kolumn, po odjęciu tej liczby od dwunastu kolumn w rzędzie, pozostaje nam dziesięć kolumn. Aby marginesy lewy i prawy były równe, dzielimy pozostałą liczbę kolumn przez dwa, co daje, rzecz jasna, pięć. O tę właśnie wartość przesuniemy kolumnę. Utwórzmy jeszcze jeden rząd, na razie tylko dla dużych ekranów. Najpierw określamy szerokość kolumny, a następnie jej przesunięcie (rys. 8):

<div class=”row”>

<div class=”col-lg-2 col-lg-offset-5 tlo2”>Kolumna1</div>

</div>


Rysunek 8. Wyśrodkowanie kolumny

Kolumny możemy przesuwać nie tylko względem pierwszej, lecz także względem pozostałych. Najważniejsze, aby zgadzała się łączna liczba dwunastu kolumn. Przypuśćmy, że kolejny wiersz ma mieć dwie kolumny, a każdej z nich odpowiada szerokość dwóch kolumn. Mają one być ustawione tak, aby pierwsza znajdowała się z lewej strony projektu, a druga z prawej. Skoro szerokość tych kolumn to dwie kolumny, łącznie użyte będą już cztery kolumny. Między nimi musi być odstęp o szerokości ośmiu kolumn. Przy pierwszej kolumnie określamy tylko jej szerokość, przy drugiej – najpierw szerokość, a następnie wartość przesunięcia (rys. 9):

<div class=”row”>

<div class=”col-lg-2 tlo2”>Kolumna1</div>

<div class=”col-lg-2 col-lg-offset-8 tlo2”>Kolumna2</div>

</div>


Rysunek 9. Rozmieszczenie kolumn za pomocą klasy offset

W analogiczny sposób przesuwa się kolumny w pozostałych rozdzielczościach, co zobaczymy dokładniej przy projekcie strony, który będziemy wykonywali później.

System siatkowy umożliwia również zagnieżdżanie kolumn. To bardzo wygodne rozwiązanie, jeżeli chcemy np. podzielić wiersz na dwie kolumny, kolejny na cztery itp. Zagnieżdżenie sprawi, że właściwości wyższego rzędu (rodzica) będą dziedziczone.

 

Dodajmy do pliku style.css jeszcze dwa kolory tła:

.tlo3 {

background: #E80C78;

}

.tlo4 {

background: #F8FF19;

}

Następnie utworzymy w pliku index.html nowy wiersz złożony z dwóch kolumn, którym nadamy wcześniej wybrane kolory:

<div class=”row”>

<div class=”col-lg-6 tlo3”>Kolumna1

</div>

<div class=”col-lg-6 tlo4”>Kolumna2

</div>

</div>

Zwróćmy uwagę, co się zmieniło – do tej pory znacznik zamykający </div> odnoszący się do poszczególnych kolumn był bezpośrednio za treścią, która jest prezentowana w kolumnach. Jednak został przeniesiony do kolejnego wiersza. Jeżeli kolejny wiersz i kolumny mają być zagnieżdżone, musimy je umieścić właśnie przed tym znacznikiem. Także w tym wypadku pamiętajmy, że łączna liczba kolumn ma wynosić dwanaście i nie możemy jej przekroczyć:

<div class=”row”>

<div class=”col-lg-6 tlo3”>Kolumna1

<div class=”row”>

<div class=”col-lg-6”>Kolumna3</div>

<div class=”col-lg-6”>Kolumna4</div>

</div>

</div>

<div class=”col-lg-6 tlo4”>Kolumna2

<div class=”row”>

<div class=”col-lg-6”>Kolumna3</div>

<div class=”col-lg-6”>Kolumna4</div>

</div>

</div>

</div>

Ostatecznie uzyskujemy cztery kolumny w tym samym kolorze tła, w którym są kolumny wyższego rzędu (rys. 10). Oczywiście, w każdym momencie możemy im przypisać inną barwę.


Rysunek 10. Zagnieżdżanie kolumn

Zagnieżdżanie może się odbywać na wielu poziomach. Jednak zazwyczaj nie przekraczamy dwóch lub trzech poziomów, aby informacje prezentowane na stronie były czytelne.

1.3. Nagłówki stron

Projektując strony, każdy z nas od czasu do czasu używa nagłówków stron. Odpowiadają za nie znaczniki od <h1> do <h6>, gdzie <h1> oznacza największy rozmiar czcionki, a <h6> najmniejszy. Nagłówki wyróżniają się co prawda na tle pozostałej treści, jednak wyglądają nieco topornie. Aby były bardziej eleganckie, powinny stylem dopasować się do strony.

Sprawdzimy, jak działają nagłówki – najwygodniej będzie nam skorzystać z pliku index.html, jednak wcześniej usuńmy z niego utworzone wcześniej kolumny. Na razie pozbędziemy się całej zawartości strony umieszczonej w znacznikach <div class=”container”></div>. Następnie za pomocą dwóch rozmiarów nagłówka wprowadzamy stosowną informację:

<h1>Oferta</h1>

<h2>Oferta promocyjna obowiązuje do 10 stycznia 2016.</h2>

Otrzymujemy dwa teksty o różnym rozmiarze czcionki, jednak są one „przyklejone” bezpośrednio do lewego marginesu, a odstępy między nimi są zdecydowanie za duże (rys. 11).


Rysunek 11. Przykład zastosowania nagłówków <h1> i <h2>

Włóżmy ten zapis do pojemnika, któremu nadamy klasę page-header, czyli nagłówek strony:

<div class=”page-header”>

<h1>Oferta</h1>

<h2>Oferta promocyjna obowiązuje do 10 stycznia 2016.</h2>

</div>

Zapisujemy plik i odświeżamy stronę w przeglądarce. Już jest odrobinę lepiej – pod nagłówkiem pojawiła się cienka, szara linia oddzielająca go od pozostałej części strony (rys. 12).


Rysunek 12. Zastosowanie klasy page-header

Klasa, której użyliśmy, pozwala na wprowadzenie jeszcze jednej drobnej zmiany, dzięki której treść w drugim rzędzie nie będzie tak wyraźna, lecz będzie stanowiła uzupełnienie do głównego tytułu. Zrezygnujemy z nagłówka <h2> i zastąpimy go zapisem <small>, dzięki czemu tekst zostanie zmniejszony względem pierwszego wiersza. Musimy jednak pamiętać, aby znacznik <h1> zamknąć dopiero po drugim wierszu (rys. 13):

<div class=”page-header”>

<h1>Oferta<small>Oferta promocyjna obowiązuje do 10 stycznia 2016.</small></h1>

</div>


Rysunek 13. Zmiana nagłówka za pomocą znacznika <small>

Jeszcze ostatni szlif – treść „Oferta promocyjna…” przenosimy do kolejnego wiersza za pomocą znacznika <br>. Następnie, aby uzyskać marginesy z lewej i z prawej strony, całość wkładamy do pudełka o klasie container (rys. 14):

<div class=”container”>

<div class=”page-header”>

<h1>Oferta<br>

<small>Oferta promocyjna obowiązuje do 10 stycznia 2016. </small></h1>

</div>

</div>


Rysunek 14. Zastosowanie nagłówków

Gdybyśmy chcieli, aby główna treść nagłówka była mniejsza, możemy użyć zamiast <h1> nagłówka kolejnego poziomu. Podtytuł zawsze będzie skalowany proporcjonalnie do nagłówka (rys. 15).


Rysunek 15. Stosowanie różnych rozmiarów nagłówków z uwzględnieniem klasy page-header

1.4. Panele

Często elementy na stronach internetowych są oddzielane np. liniami lub ujmowane w ramki. Postępujemy tak z tekstem, a także z obrazami, listami, bannerami reklamowymi czy nowościami, które chcemy w jakiś sposób wyróżnić w treści.

W Bootstrapie możemy skorzystać z paneli, które są pojemnikami na takie właśnie elementy. Mają one formę ramki o zaokrąglonych rogach i często też własny nagłówek oraz stopkę. Włączamy je opcjonalnie – jeśli uznamy, że np. stopka jest zbędna, po prostu jej nie wyświetlamy.

Zacznijmy od utworzenia prostego panelu, w którym umieścimy tylko tekst (rys. 16). Aby panel miał taką samą szerokość, jak nagłówek strony, tworzymy kolejny znacznik <div> i przypisujemy mu klasę .container. W przeciwnym wypadku panel zostanie rozciągnięty na całą szerokość okna przeglądarki. W panelu skorzystamy z domyślnych kolorów – w tym celu użyjemy klasy .panel-default. Wewnątrz znacznika <div> powinniśmy wstawić kolejny – odpowiedzialny za wyświetlanie treści. Tak samo jak dokument HTML ma swoje ciało, czyli <body>, tak znajdziemy je w panelu. Zapisujemy je jako .panel-body (treść Lorem ipsum można uzyskać dzięki dowolnemu generatorowi dostępnemu w internecie):

<div class=”container”>

<div class=”panel panel-default”>

<div class=”panel-body”>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat ex felis, ac facilisis mi malesuada eu. Donec ac faucibus mauris. Sed luctus urna a orci lacinia, sed suscipit tortor accumsan. In commodo, mauris nec dictum tincidunt, ipsum nulla faucibus dui, non finibus est diam eget neque. Curabitur semper, diam ut maximus porta, ex purus eleifend erat, vel maximus enim justo a arcu. Nam accumsan commodo turpis ac venenatis. Vivamus luctus molestie ante, vitae convallis nulla blandit vitae. Pellentesque feugiat, sem a maximus tempor, nibh tortor egestas est, bibendum maximus eros lacus ac dolor. Sed a interdum nisl. Aliquam commodo neque vitae lobortis sollicitudin.

</div>

</div>

</div>


Rysunek 16. Przykład prostego panelu z tekstem

Do tej pory nie dodaliśmy, przynajmniej na pierwszy rzut oka, żadnych informacji dotyczących responsywności strony. Czy zatem będzie ona skalowalna? Tak. Dzięki zastosowaniu klas, które mają domyślną skalowalność. Najłatwiej sprawdzić to, zmieniając rozmiar okna przeglądarki.

Wróćmy jednak do panelu. Ustaliliśmy, że ma mieć ciało, w którym wprowadzamy treść. Dodajmy teraz do panelu nagłówek. Pod .panel-body dodajemy kolejny pojemnik, tym razem jednak przypisujemy mu klasę .panel-heading (rys. 17):

<div class=”panel panel-default”>

<div class=”panel-heading”>Lorem ipsum</div>

<div class=”panel-body”>


Rysunek 17. Dodanie nagłówka do panelu

Nagłówek możemy pogrubić poprzez dodanie klasy .panel-title oraz oznaczenia nagłówka od <h1> do <h6>. Zostanie on wyróżniony, jednak bez względu na to, czy użyjemy znacznika <h1>, <h2> czy jednego z kolejnych, rozmiar czcionki będzie taki sam. Dzieje się tak, ponieważ klasa odpowiadająca nagłówkowi panelu ma już zdefiniowany rozmiar czcionki i ta definicja jest ważniejsza od rozmiaru, który przypiszemy nagłówkowi w dokumencie.

Nasuwa się więc pytanie – dlaczego w takim razie należy wybrać jeden z tych znaczników? Chodzi o wyszukiwarki internetowe, które podczas indeksowania stron analizują m.in. nagłówki. Nagłówki oznaczone jako <h1> będą ważniejsze od <h2>, te z kolei od <h3> itd. Jeżeli zatem w tytułach poszczególnych podstron używamy nagłówka <h1>, to w panelach powinniśmy użyć nagłówków niższego rzędu, np. <h3> (rys. 18):

<div class=”panel-heading”>

<h3 class=”panel-title”>Lorem ipsum</h3>

</div>


Rysunek 18. Przykład domyślnego nagłówka panelu oraz wyróżnionego nagłówka

Pozostała nam stopka – w niej często umieszczamy przyciski pozwalające np. na dodanie komentarza, wysłanie formularza, złożenie zamówienia itp. Stopkę umieszczamy poniżej panel-body i, jak można się domyślać, zapisujemy ją za pomocą klasy panel-footer (rys. 19):

<div class=”panel-footer”>Stopka panelu</div>


Rysunek 19. Przykład stopki panelu

Domyślnie ramka oraz tło nagłówka panelu mają kolor szary. Możemy jednak skorzystać z klas, dzięki którym zmienimy te barwy:

• panel panel-primary – kolor niebieski,

• panel panel-success – kolor zielony,

• panel panel-info – kolor błękitny,

• panel panel-warning – kolor żółty,

• panel panel-danger – kolor czerwony.

Zmiany nie musimy wprowadzać w każdym elemencie panelu – wystarczy, że użyjemy jednej z tych klas zamiast klasy panel-default (rys. 20):

<div class=”container”>

<div class=”panel panel-primary”>

<div class=”panel-heading”>

<h3 class=”panel-title”>Lorem ipsum</h3>

</div>

<div class=”panel-body”>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat ex felis, ac facilisis mi malesuada eu. Donec ac faucibus mauris. Sed luctus urna a orci lacinia, sed suscipit tortor accumsan. In commodo, mauris nec dictum tincidunt, ipsum nulla faucibus dui, non finibus est diam eget neque. Curabitur semper, diam ut maximus porta, ex purus eleifend erat, vel maximus enim justo a arcu. Nam accumsan commodo turpis ac venenatis. Vivamus luctus molestie ante, vitae convallis nulla blandit vitae. Pellentesque feugiat, sem a maximus tempor, nibh tortor egestas est, bibendum maximus eros lacus ac dolor. Sed a interdum nisl. Aliquam commodo neque vitae lobortis sollicitudin.

</div>

<div class=”panel-footer”>Stopka panelu</div>

</div>

</div>


Rysunek 20. Zmiana kolorystyki panelu za pomocą odpowiednich klas

1.5. Przyciski

Strona internetowa nie miałaby racji bytu bez przycisków. Stosuje się je praktycznie wszędzie – jako odnośniki w menu, treści strony, a także do przesyłania danych formularzy. W Bootstrapie przyciski mają zdefiniowane klasy, za pomocą których szybko możemy określić, jak mają wyglądać.

Najprostszy odnośnik to oczywiście tekst. Wprowadzamy znacznik <a href=””>, ale od razu dopisujemy do niego klasę odpowiadającą odnośnikowi tekstowemu:

<a href=”http://it.pwn.pl” class=”btn btn-link”>it.pwn.pl</a>

Gdybyśmy chcieli, aby odnośnik miał formę przycisku, stosujemy jedną z następujących klas:

• .btn btn-default – przycisk domyślny,

• .btn btn-primary – przycisk niebieski,

• .btn btn-info – przycisk błękitny,

• .btn btn-success – przycisk zielony,

• .btn btn-warning – przycisk żółty,

• .btn btn-danger – przycisk czerwony (rys. 21):

<a href=”http://it.pwn.pl” class=”btn btn-link”>it.pwn.pl</a>

<a href=”http://it.pwn.pl” class=”btn btn-default”>it.pwn.pl</a>

<a href=”http://it.pwn.pl” class=”btn btn-primary”>it.pwn.pl</a>

<a href=”http://it.pwn.pl” class=”btn btn-info”>it.pwn.pl</a>

<a href=”http://it.pwn.pl” class=”btn btn-success”>it.pwn.pl</a>

<a href=”http://it.pwn.pl” class=”btn btn-warning”>it.pwn.pl</a>

<a href=”http://it.pwn.pl” class=”btn btn-danger”>it.pwn.pl</a>


Rysunek 21. Zastosowanie różnych klas do odnośnika

Rozmiar przycisków dopasował się automatycznie do treści, która jest na nich wyświetlana. Jednak rozmiar ten możemy ustawić odgórnie, ponownie korzystając z odpowiednich klas. Chcąc uzyskać duży przycisk – zmieni się zarówno rozmiar samego przycisku, jak i czcionki – użyjemy klasy .btn-lg, przy standardowych przyciskach nie musimy dopisywać nic, jednak dla małych stosujemy klasę .btn-sm, a dla bardzo małych .btn-xs (rys. 22):

<a href=”http://it.pwn.pl” class=”btn btn-primary btn-lg”>it.pwn.pl</a><br>

<a href=”http://it.pwn.pl” class=”btn btn-info btn-sm”>it.pwn.pl</a><br>

<a href=”http://it.pwn.pl” class=”btn btn-warning btn-xs”>it.pwn.pl</a>


Rysunek 22. Zmiana rozmiaru przycisku za pomocą klas

Zdarza się, głównie na stronach z ankietami lub innymi formularzami, że przyciski mają szerokość taką samą jak pozostała treść. Aby uzyskać taki przycisk, należy ustawić go jako element blokowy. Oczywiście, także i w tym wypadku skorzystamy z odpowiedniej klasy, czyli .btn-block. Zwróćmy wagę na jedną bardzo istotną rzecz – klasy, których użyliśmy przed chwilą do określenia rozmiaru przycisku, nie wykluczają się z klasą odpowiadającą za zmianę przycisku na element blokowy. Można przyjąć, że klasy .btn-lg, .btn-sm oraz .btn-xs wpływają bezpośrednio na wysokość przycisku, natomiast szerokość dopasowuje się automatycznie. Natomiast klasa .btn-block wpływa jedynie na szerokość przycisku – przyjmuje on szerokość kontenera, w którym jest umieszczony (rys. 23):

<a href=”http://it.pwn.pl” class=”btn btn-primary btn-lg btn-block”>it.pwn.pl</a><br>

<a href=”http://it.pwn.pl” class=”btn btn-info btn-sm btn-block”>it.pwn.pl</a><br>

<a href=”http://it.pwn.pl” class=”btn btn-warning btn-xs btn-block”>it.pwn.pl</a>

Бесплатный фрагмент закончился. Хотите читать дальше?