Wordpress i Bootstrap - ebook
Wydawnictwo:
Data wydania:
1 stycznia 2015
Format ebooka:
EPUB
Format
EPUB
czytaj
na czytniku
czytaj
na tablecie
czytaj
na smartfonie
Jeden z najpopularniejszych formatów e-booków na świecie.
Niezwykle wygodny i przyjazny czytelnikom - w przeciwieństwie do formatu
PDF umożliwia skalowanie czcionki, dzięki czemu możliwe jest dopasowanie
jej wielkości do kroju i rozmiarów ekranu. Więcej informacji znajdziesz
w dziale Pomoc.
Multiformat
E-booki w Virtualo.pl dostępne są w opcji multiformatu.
Oznacza to, że po dokonaniu zakupu, e-book pojawi się na Twoim koncie we wszystkich formatach dostępnych aktualnie dla danego tytułu.
Informacja o dostępności poszczególnych formatów znajduje się na karcie produktu.
Format
MOBI
czytaj
na czytniku
czytaj
na tablecie
czytaj
na smartfonie
Jeden z najczęściej wybieranych formatów wśród czytelników
e-booków. Możesz go odczytać na czytniku Kindle oraz na smartfonach i
tabletach po zainstalowaniu specjalnej aplikacji. Więcej informacji
znajdziesz w dziale Pomoc.
Multiformat
E-booki w Virtualo.pl dostępne są w opcji multiformatu.
Oznacza to, że po dokonaniu zakupu, e-book pojawi się na Twoim koncie we wszystkich formatach dostępnych aktualnie dla danego tytułu.
Informacja o dostępności poszczególnych formatów znajduje się na karcie produktu.
Multiformat
E-booki sprzedawane w księgarni Virtualo.pl dostępne są w opcji
multiformatu - kupujesz treść, nie format. Po dodaniu e-booka do koszyka
i dokonaniu płatności, e-book pojawi się na Twoim koncie w Mojej
Bibliotece we wszystkich formatach dostępnych aktualnie dla danego
tytułu. Informacja o dostępności poszczególnych formatów znajduje się na
karcie produktu przy okładce. Uwaga: audiobooki nie są objęte opcją
multiformatu.
czytaj
na tablecie
Aby odczytywać e-booki na swoim tablecie musisz zainstalować specjalną
aplikację. W zależności od formatu e-booka oraz systemu operacyjnego,
który jest zainstalowany na Twoim urządzeniu może to być np. Bluefire
dla EPUBa lub aplikacja Kindle dla formatu MOBI.
Informacje na temat zabezpieczenia e-booka znajdziesz na karcie produktu
w "Szczegółach na temat e-booka". Więcej informacji znajdziesz w dziale
Pomoc.
czytaj
na czytniku
Czytanie na e-czytniku z ekranem e-ink jest bardzo wygodne i nie męczy
wzroku. Pliki przystosowane do odczytywania na czytnikach to przede
wszystkim EPUB (ten format możesz odczytać m.in. na czytnikach
PocketBook) i MOBI (ten fromat możesz odczytać m.in. na czytnikach Kindle).
Informacje na temat zabezpieczenia e-booka znajdziesz na karcie produktu
w "Szczegółach na temat e-booka". Więcej informacji znajdziesz w dziale
Pomoc.
czytaj
na smartfonie
Aby odczytywać e-booki na swoim smartfonie musisz zainstalować specjalną
aplikację. W zależności od formatu e-booka oraz systemu operacyjnego,
który jest zainstalowany na Twoim urządzeniu może to być np. iBooks dla
EPUBa lub aplikacja Kindle dla formatu MOBI.
Informacje na temat zabezpieczenia e-booka znajdziesz na karcie produktu
w "Szczegółach na temat e-booka". Więcej informacji znajdziesz w dziale
Pomoc.
Czytaj fragment
Pobierz fragment
Pobierz fragment w jednym z dostępnych formatów
Wordpress i Bootstrap - ebook
Responsywne strony internetowe to podstawa współczesnego podejścia do projektowania. Korzystając tylko z języka HTML oraz arkuszy stylów, każdy element należy opisać osobno.
Dzięki tej książce dowiesz się, jak zautomatyzować i przyspieszyć pracę nad stroną www.
Bootstrap to narzędzie, które oferuje wiele gotowych rozwiązań. Będziesz musiał zmienić sposób myślenia – od tej pory zamiast opisywać punkty graniczne odpowiadające za wyświetlanie strony na urządzeniach mobilnych, będziesz mógł używać siatki Bootstrapa. Zobaczysz, że to znacznie prostsze rozwiązanie.
| Kategoria: | Webmaster |
| Zabezpieczenie: |
Watermark
|
| ISBN: | 978-83-01-18485-8 |
| Rozmiar pliku: | 11 MB |
FRAGMENT KSIĄŻKI
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: . Pozostałe dwa znajdziemy przed tagiem zamykającym . 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
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: . Pozostałe dwa znajdziemy przed tagiem zamykającym . 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
, w których umieszczamy rzędy, czyli , a w nich kolumny – . 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:
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
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 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.
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
i zastąpimy go zapisem , dzięki czemu tekst zostanie zmniejszony względem pierwszego wiersza. Musimy jednak pamiętać, aby znacznik
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:
Kolumna1
Kolumna2
Kolumna3
Kolumna4
Kolumna5
Kolumna6
Kolumna7
Kolumna8
Kolumna9
Kolumna10
Kolumna11
Kolumna12
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
wprowadzamy następujący kod:
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):
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:
Kolejny rząd był podzielony na dwie kolumny – powtarzamy zapis, zmieniając jedynie prefiks lg na md.
Podobnie postępujemy z ostatnim rzędem (rys. 6).
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:
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ę:
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):
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):
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:
Zwróćmy uwagę, co się zmieniło – do tej pory znacznik zamykający
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ć:Kolumna1
Kolumna2
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):
Kolumna1
Kolumna2
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:
Kolumna1
Kolumna2
Kolumna3
Kolumna4
Kolumna5
Kolumna6
Kolumna7
Kolumna8
Kolumna9
Kolumna10
Kolumna11
Kolumna12
Kolejny rząd był podzielony na dwie kolumny – powtarzamy zapis, zmieniając jedynie prefiks lg na md.
Kolumna1
Kolumna2
Podobnie postępujemy z ostatnim rzędem (rys. 6).
Kolumna1
Kolumna2
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:
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ę:
Kolumna1
Kolumna2
Kolumna3
Kolumna4
Kolumna5
Kolumna6
Kolumna7
Kolumna8
Kolumna9
Kolumna10
Kolumna11
Kolumna12
Kolumna1
Kolumna2
Kolumna1
Kolumna2
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):
Kolumna1
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):
Kolumna1
Kolumna2
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:
Kolumna1
Kolumna2
Zwróćmy uwagę, co się zmieniło – do tej pory znacznik zamykający
Kolumna1
Kolumna3
Kolumna4
Kolumna2
Kolumna3
Kolumna4
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
do
, gdzie
oznacza największy rozmiar czcionki, a
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 . Następnie za pomocą dwóch rozmiarów nagłówka wprowadzamy stosowną informację:
Oferta
Oferta promocyjna obowiązuje do 10 stycznia 2016.
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
i
Włóżmy ten zapis do pojemnika, któremu nadamy klasę page-header, czyli nagłówek strony:
Oferta
Oferta promocyjna obowiązuje do 10 stycznia 2016.
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
Oferta
Oferta promocyjna obowiązuje do 10 stycznia 2016.
i zastąpimy go zapisem , dzięki czemu tekst zostanie zmniejszony względem pierwszego wiersza. Musimy jednak pamiętać, aby znacznik zamknąć dopiero po drugim wierszu (rys. 13):
OfertaOferta promocyjna obowiązuje do 10 stycznia 2016.
Rysunek 13. Zmiana nagłówka za pomocą znacznika
Jeszcze ostatni szlif – treść „Oferta promocyjna…” przenosimy do kolejnego wiersza za pomocą znacznika
. Następnie, aby uzyskać marginesy z lewej i z prawej strony, całość wkładamy do pudełka o klasie container (rys. 14):
Oferta
Oferta promocyjna obowiązuje do 10 stycznia 2016.
Rysunek 14. Zastosowanie nagłówków
Gdybyśmy chcieli, aby główna treść nagłówka była mniejsza, możemy użyć zamiast 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 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 powinniśmy wstawić kolejny – odpowiedzialny za wyświetlanie treści. Tak samo jak dokument HTML ma swoje ciało, czyli , tak znajdziemy je w panelu. Zapisujemy je jako .panel-body (treść Lorem ipsum można uzyskać dzięki dowolnemu generatorowi dostępnemu w internecie):
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.
Rysunek 16. Przykład prostego panelu z tekstem
więcej..
OfertaOferta promocyjna obowiązuje do 10 stycznia 2016.
Rysunek 13. Zmiana nagłówka za pomocą znacznika
Jeszcze ostatni szlif – treść „Oferta promocyjna…” przenosimy do kolejnego wiersza za pomocą znacznika
. Następnie, aby uzyskać marginesy z lewej i z prawej strony, całość wkładamy do pudełka o klasie container (rys. 14):
Oferta
Oferta promocyjna obowiązuje do 10 stycznia 2016.
Rysunek 14. Zastosowanie nagłówków
Gdybyśmy chcieli, aby główna treść nagłówka była mniejsza, możemy użyć zamiast
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 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 powinniśmy wstawić kolejny – odpowiedzialny za wyświetlanie treści. Tak samo jak dokument HTML ma swoje ciało, czyli , tak znajdziemy je w panelu. Zapisujemy je jako .panel-body (treść Lorem ipsum można uzyskać dzięki dowolnemu generatorowi dostępnemu w internecie):
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.
Rysunek 16. Przykład prostego panelu z tekstem
więcej..
powinniśmy wstawić kolejny – odpowiedzialny za wyświetlanie treści. Tak samo jak dokument HTML ma swoje ciało, czyli , tak znajdziemy je w panelu. Zapisujemy je jako .panel-body (treść Lorem ipsum można uzyskać dzięki dowolnemu generatorowi dostępnemu w internecie):
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.
Rysunek 16. Przykład prostego panelu z tekstem
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.
Rysunek 16. Przykład prostego panelu z tekstem
więcej..
BESTSELLERY
- 84,00 zł
- EBOOK64,00 zł
- EBOOK64,00 zł
- 33,30 zł
Wydawnictwo: HelionFormat: PDF EPUB MOBIZabezpieczenie: Watermark VirtualoKategoria: WebmasterRosnące możliwości różnych form sztucznej inteligencji niepokoją ludzi od kilkudziesięciu lat. Stopniowo uzależniamy się od ciągłej asysty nowoczesnych technologii, jednak coraz doskonalsze metody uczenia maszynowego, dostępna i ...49,00 zł49,00 zł
- Nasza oferta
- ebooki
- audiobooki
- ePrasa
- Podaruj prezent
- Virtualo Sp. z o.o.
- ul. Marszałkowska 104/122
- 00-017 Warszawa
- NIP: 952-202-82-78
- e-mail: pomoc@virtualo.pl
- Polityka prywatności Virtualo
Wszelkie prawa zastrzeżone. © 2008-2024 Virtualo
