Projektowanie elastycznych serwisów WWW z użyciem struktury Bootstrap

Bootstrap to popularna, bezpłatna struktura programistyczna HTML, CSS i JavaScript, służąca do tworzenia reagujących serwisów WWW przeznaczonych głównie na urządzenia mobilne. Bootstrap udostępnia reagujące szablony CSS i HTML do tworzenia przycisków, tabel, elementów nawigacyjnych, karuzeli obrazów i innych składników używanych na stronach WWW. Dostępnych jest kilka opcjonalnych wtyczek JavaScript. Dzięki temu wystarczy nawet podstawowa wiedza na temat programowania, aby tworzyć doskonałe serwisy WWW w układach reagujących.

Program Dreamweaver umożliwia tworzenie dokumentów na podstawie struktury Bootstrap, a także edytowanie istniejących stron WWW utworzonych w tej strukturze. Można otwierać zarówno gotowe pliki Bootstrap, jak i projekty w toku. Program Dreamweaver umożliwia nie tylko edytowanie kodu w takich plikach, ale także korzystanie z narzędzi graficznych do modyfikacji układu, takich jak edycja w widoku aktywnym, wizualne funkcje panelu Projektant CSS, wizualne zapytania o media oraz narzędzie Extract.

Używam elastycznych siatek w programie Dreamweaver. Jak rozpocząć korzystanie z szablonów Bootstrap?

Tworzenie dokumentów opartych na elastycznej siatce pozwalało na uzyskanie serwisu WWW o układzie reagującym na zmiany, ponieważ program Dreamweaver automatycznie stosował odpowiednie klasy. Dzięki temu wystarczyło skoncentrować się na zawartości i określić, jak ma zmieniać się jej układ w przypadku różnych współczynników proporcji ekranu.

Również w przypadku dokumentów Bootstrap projektant koncentruje się na zawartości i projekcie, a o zapewnianie elastyczności strony WWW zadba program Dreamweaver, który jest ściśle zintegrowany ze strukturą Bootstrap.

Program Dreamweaver obsługuje obecnie strukturę Bootstrap w wersji 3.4.1 oraz 4.4.1:

„Struktura Bootstrap 3.4.1 udostępnia reagujący system siatki elastycznej, służący do budowania zawartości przeznaczonej przede wszystkim na urządzenia mobilne. Układ siatki może się rozszerzać do maksymalnie 12 kolumn wraz ze wzrostem rozmiaru urządzenia lub okna przeglądarki. Struktura zawiera predefiniowane klasy umożliwiające łatwe tworzenie układu, a także zaawansowane klasy domieszkowe (mixin), do generowania układów o bardziej semantycznym charakterze”. — Dokumentacja struktury Bootstrap. 

„W wersji Bootstrap 4.4.1 wprowadzono fundamentalne zmiany. Struktura udostępnia teraz rozbudowaną, elastyczną siatkę pól (flexbox) służącą do budowania układów dowolnego kształtu i rozmiaru, tworzonych z myślą o możliwościach urządzeń mobilnych. Bootstrap udostępnia system dwunastu kolumn, pięciu domyślnych warstw reagujących, zmiennych i klas domieszkowych Sass, a także dziesiątek klas predefiniowanych.” — Dokumentacja struktury Bootstrap. 

Aby rozpocząć używanie dokumentów Bootstrap w programie Dreamweaver, możesz skorzystać z szablonów początkowych Bootstrap. Program Dreamweaver zawiera pakiet szablonów przeznaczonych dla różnych typów serwisów WWW, takich jak serwisy handlu elektronicznego lub portfolio.

Czy mogę przenieść istniejące dokumenty siatki elastycznej do dokumentów Bootstrap w programie Dreamweaver?

Nie, nie istnieje bezpośrednia metoda konwersji istniejących dokumentów siatki elastycznej na dokumenty Bootstrap. Jednak praca nad tworzeniem i projektowaniem dokumentów Bootstrap w programie Dreamweaver jest podobna do pracy nad dokumentami siatki elastycznej. Można na przykład rozpocząć od utworzenia dokumentu Bootstrap w oknie dialogowym Nowy dokument. Podczas tworzenia dokumentów z układem elastycznej siatki dostępne są trzy podstawowe formaty — Telefon, Tablet i Komputer. Natomiast w przypadku dokumentu Bootstrap są dostępne następujące podstawowe rozmiary ekranu: mały, średni, duży i bardzo duży (XL). Opcje edycji układu, które są wyświetlane po kliknięciu elementu w dokumentach Bootstrap, także przypominają opcje wyświetlane podczas pracy z dokumentami w układzie elastycznej siatki.

Czy starsze serwisy można zaimportować do najnowszej wersji programu Dreamweaver?

Tak. Najnowsza wersja programu Dreamweaver umożliwia importowanie starszych serwisów. Podczas importowania takiej zawartości program Dreamweaver szuka pliku Bootstrap CSS w folderze katalog_serwisu/css/. 

• Jeśli serwis korzysta z pliku Bootstrap CSS w wersji 3, to w oknie dialogowym Zarządzaj serwisem > Ustawienia zaawansowane > Bootstrap zostanie ustawiona wersja Bootstrap 3.4.1.
• Jeśli serwis korzysta z pliku Bootstrap CSS w wersji 4, to w oknie dialogowym Zarządzaj serwisem > Ustawienia zaawansowane > Bootstrap zostanie ustawiona wersja Bootstrap 4.4.1.
• Jeśli w folderze katalog_serwisu/css nie ma pliku CSS struktury Bootstrap, to w oknie dialogowym Zarządzaj serwisem > Ustawienia zaawansowane > Bootstrap zostanie ustawiona wersja Bootstrap 4.4.1.

Tworzenie dokumentów Bootstrap

Projektowanie serwisu w strukturze Bootstrap można rozpocząć od skorzystania jednej z następujących opcji w oknie dialogowym Nowy dokument:

• Szablony początkowe Bootstrap (Szablony początkowe > Szablony Bootstrap) — ta opcja umożliwia szybkie rozpoczęcie pracy bez konieczności tworzenia układu stron od podstaw. Wystarczy edytować tekst i zastąpić zasoby, aby przygotować serwis o reagującym układzie. Więcej informacji: Korzystanie z szablonów początkowych Bootstrap.
• Utworzenie dokumentu HTML opartego na strukturze Bootstrap (Nowy dokument > HTML > Bootstrap) — ta opcja umożliwia zbudowanie serwisu element po elemencie z wykorzystaniem stylów CSS i składników Bootstrap w programie Dreamweaver. Więcej informacji: Tworzenie dokumentów HTML na podstawie struktury Bootstrap.
  

Korzystanie z szablonów początkowych Bootstrap

Szablony początkowe Bootstrap umożliwiają błyskawiczne tworzenie stron WWW opartych na popularnych motywach. Wszystkie pliki zależne struktury są automatycznie zapisywane.

Tworzenie dokumentów HTML na podstawie struktury Bootstrap

Budowę serwisu reagującego można zacząć od utworzenia dokumentu HTML na podstawie struktury Bootstrap. Można przy tym utworzyć zbiór nowych plików struktury Bootstrap albo użyć istniejących. Gdy dokument zostanie już utworzony, można będzie dodawać do niego składniki Bootstrap, takie jak harmonijki i karuzele, posługując się panelem Bootstrap w programie Dreamweaver. Można również wykorzystać istniejące kompozycje z programu Photoshop, wydzielając obrazy, czcionki, style, tekst i inne zasoby za pomocą funkcji Extract bezpośrednio do dokumentu Bootstrap.

Otwieranie plików Bootstrap

Plik Bootstrap można otwierać, korzystając z jednej z następujących metod:

• Wybierz polecenie Plik > Otwórz i odszukaj plik HTML Bootstrap.
• (Zalecane) Utwórz serwis programu Dreamweaver i ustaw folder tego serwisu, wskazując folder zawierający wszystkie pliki Bootstrap.

Po otwarciu pliku HTML Bootstrap w programie Dreamweaver:

• Wiersze są wyróżnione szarymi, przerywanymi liniami z zaokrąglonymi narożnikami.
• Kolumny są wyróżnione niebieskimi przerywanymi liniami.

Dreamweaver rozpoznaje pliki CSS powiązane z plikiem HTML Bootstrap, jeśli ich nazwy zawierają frazę „bootstrap”. Odwołanie do pliku CSS może mieć jeden z następujących formatów:

• Ścieżka lokalna:

  Plik CSS (zminifikowany lub niezminifikowany) jest umieszczony lokalnie. Na przykład:

  <link href="css/bootstrap.css" rel="stylesheet"> lub
  <link href="css/bootstrap.min.css" rel="stylesheet">

• Ścieżka zdalna:

Zdalny plik CSS (zminifikowany lub niezminifikowany). Na przykład:

<link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
<link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">

• CDN (sieć dostarczania zawartości)

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_version_number>/css/bootstrap.min.css" rel="stylesheet">

Ukrywanie i pokazywanie elementów Bootstrap oraz zarządzanie elementami ukrytymi

W niektórych sytuacjach przydatne jest ukrycie elementu w jednym z okien ekranowych, podczas gdy pozostaje on wyświetlony w innym oknie. 

Aby ukryć element Bootstrap, kliknij go prawym przyciskiem myszy i wybierz polecenie Ukryj element. Element zostanie tymczasowo ukryty.

Aby wyświetlić ukryte elementy i przestać je ukrywać, kliknij prawym przyciskiem myszy i wybierz polecenie Zarządzaj ukrytymi elementami. Ukryte elementy są wyświetlane z szarym, kreskowanym tłem. Kliknij ikonę oka, aby przestać ukrywać element.

Dodawanie składników Bootstrap

Opcja Składniki Bootstrap na panelu Wstaw zawiera listę wszystkich składników Bootstrap, które można dodawać do stron WWW w programie Dreamweaver. Panel Wstaw zawiera listę składników odpowiadających wersji struktury Bootstrap określonej w pliku bootstrap.css połączonym ze stroną HTML.  Na przykład w przypadku wersji Bootstrap 4.0.0 będą widoczne dodatkowe składniki, takie jak Card (karta) i Badge (etykieta). Natomiast składniki Glyphicon (ikona glifu), Panel, Well (studzienka) oraz Thumbnails (miniaturki) są dostępne tylko w wersji Bootstrap 3.3.7. Składniki widoczne na panelu Wstaw są więc uzależnione od wybranej wersji struktury Bootstrap. Ponadto komponent Spinners jest dostępny tylko wersji Bootstrap 4.4.1.

Lista składników na panelu Wstaw jest komponowana na podstawie następujących kryteriów:

• Uaktywniony dokument: Na panelu Wstaw będą widoczne składniki odpowiednie do wersji Bootstrap określonej w pliku tej struktury połączonym z dokumentem. 
• Wersja wybrana w preferencjach serwisu: W przypadku dokumentu, który nie jest stroną Bootstrap, program Dreamweaver sprawdza wersję tej struktury w oknie dialogowym Preferencje serwisu > Zaawansowane > Bootstrap. Składniki do wyświetlenia są dobierane odpowiednio do wersji ustawionej w tym oknie. Domyślną wersją dla nowych serwisów jest wersja 4.4.1.
• Lokalizacja zapisania pliku: W przypadku dokumentów, które nie są stronami Bootstrap i nie należą do żadnego serwisu, panel Wstaw będzie wyświetlać składniki dla wersji 4.4.1.

Aby dodać składnik, przeciągnij go z panelu na stronę WWW. Zanim upuścisz składnik, zwróć uwagę na pomoce wizualne, takie jak aktywne linie pomocnicze, precyzyjne wstawianie (z użyciem modelu DOM) i asystent pozycjonowania. Skorzystaj z tych pomocy, aby szybko i precyzyjnie umieszczać składniki na stronie. Więcej informacji na temat wstawiania elementów na strony WWW zawiera omówienie panelu Wstaw.

Dodawanie wierszy

Kliknij odpowiedni wiersz, za którym ma zostać dodany kolejny. Następnie kliknij ikonę Dodaj nowy wiersz. Zostanie dodany wiersz Bootstrap z dwoma elementami potomnymi kolumn, z których każdy zawiera sześć kolumn.

Kod dodawanego wiersza wygląda następująco:

<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>

gdzie * odpowiada bieżącej wielkości ekranu w programie Dreamweaver.

Dodawanie kolumn

Zaznacz odpowiednią kolumnę, a następnie kliknij ikonę Dodaj nową kolumnę. Wybrana kolumna zostanie powielona bez jej elementów potomnych.

Wszystkie puste kolumny otrzymują minimalną wysokość 20px. Jednak ta wysokość nie jest w rzeczywistości dodawana do strony; jest tylko wyświetlana w widoku aktywnym, aby ułatwić wstawianie elementów do tych kolumn.

Powielanie wierszy i kolumn

Kliknij wiersz lub kolumnę do powielenia, a następnie kliknij ikonę powielania w prawym dolnym rogu. Zostanie powielona cała zaznaczona kolumna lub cały zaznaczony wiersz wraz z zawartością.

Zmiana rozmiaru i przesuwanie kolumn

Modyfikowanie rozmiaru i przesuwanie kolumn jest niezbędne zwłaszcza wtedy, gdy tworzy się układy reagujące, przeznaczone na różne ekrany. 

Zmiana rozmiaru kolumn

Kliknij odpowiednią kolumnę, a następnie przeciągnij uchwyt po prawej stronie, aby zmienić rozmiar. W dokumentach Bootstrap 4.0.0 przy zmianie rozmiaru kolumny dodawana jest klasa col-*-n, gdzie * odpowiada bieżącemu zapytaniu o media (sm, md, lg, xl), natomiast n odpowiada zajmowanej liczbie kolumn. W przypadku ekranów xs (bardzo małych) dodawana jest klasa col-n.

W dokumentach Bootstrap 3.3.7 przy zmianie rozmiaru kolumny dodawana jest klasa col-*-n, gdzie * odpowiada bieżącemu zapytaniu o media (xs, sm, md lub lg), natomiast n odpowiada zajmowanej liczbie kolumn.

Program Dreamweaver wykrywa bieżący rozmiar ekranu i dodaje odpowiednią klasę. Aby dostosować zmieniany rozmiar kolumn do konkretnego ekranu, zmień rozmiar okienka ekranu za pomocą opcji dostępnych w prawym dolnym rogu lub za pomocą scrubbera. Następnie odpowiednio zmień rozmiar kolumn.

Przesuwanie kolumn

Kliknij odpowiednią kolumnę, a następnie przeciągnij uchwyt po lewej stronie, aby ją przesunąć. Przesunięcie jest wyświetlane jako kreskowany obszar. W dokumentach Bootstrap 4.0.0 przy przesunięciu kolumny dodawana jest klasa offset-*-n, gdzie * odpowiada bieżącemu zapytaniu o media (sm, md, lg lub xl), natomiast n odpowiada zajmowanej liczbie kolumn.

W dokumentach Bootstrap 3.3.7 po przesunięciu kolumny dodawana jest klasa col-*-offset-n, gdzie * odpowiada bieżącemu zapytaniu o media (xs, sm, md lub lg), natomiast n odpowiada liczbie kolumn, o jaką następuje przesunięcie.

Program Dreamweaver wykrywa bieżący rozmiar ekranu i dodaje odpowiednią klasę. Aby dostosować przesunięcie kolumn do konkretnego ekranu, zmień rozmiar okienka ekranu za pomocą opcji dostępnych w prawym dolnym rogu lub za pomocą scrubbera. Następnie odpowiednio przesuń kolumny.