Aby utworzyć serwis elastyczny, przeznaczony głównie na urządzenia mobilne, skorzystaj z szablonów początkowych i przeciąganych składników Bootstrap w programie Dreamweaver.

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.

Uwaga:

Obecnie obsługiwane wersje Bootstrap to 4.2.1 oraz 3.4.0.

Często zadawane pytania

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.0 oraz 4.2.1:

„Struktura Bootstrap 3.4.0 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.2.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.

Jeśli chcesz utworzyć dokument Bootstrap od podstaw, zawsze możesz to zrobić w sposób opisany w sekcji Tworzenie dokumentów Bootstrap.

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.0.
  • 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.2.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.2.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.

  1. Kliknij opcje Plik > Nowy.

  2. W oknie dialogowym Nowy dokument kliknij przycisk Szablony początkowe, a następnie wybierz odpowiedni szablon z listy szablonów Bootstrap.

  3. Kliknij przycisk Utwórz

    Program utworzy stronę HTML opartą na wybranym szablonie. Można ją będzie teraz odpowiednio zmodyfikować, dodając lub usuwając składniki, edytując tekst i zmieniając zasoby.

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.

  1. Kliknij opcje Plik > Nowy.

  2. W oknie dialogowym Nowy dokument wybierz opcje Nowy dokument > HTML, a następnie kliknij zakładkę Bootstrap.

  3. Aby utworzyć nowy plik bootstrap.css (oraz inne pliki struktury Bootstrap), wykonaj następujące czynności:

    Określ, czy chcesz utworzyć nowy arkusz CSS Bootstrap, czy skorzystać z istniejącego.

    Jeśli wybierzesz opcję tworzenia nowego pliku CSS, to w katalogu głównym serwisu zostanie utworzony folder „css”, do którego zostanie skopiowany plik bootstrap.css. Jeśli wybierzesz opcję użycia istniejącego pliku CSS, podaj ścieżkę lub przejdź do lokalizacji tego pliku.

    1. Kliknij przycisk Utwórz nowy.

      Tworzenie nowego dokumentu Bootstrap
      Tworzenie nowego dokumentu Bootstrap
    2. (Opcjonalnie) Jeśli chcesz dołączyć do dokumentu inny arkusz CSS, kliknij ikonę w sekcji Dołącz plik CSS. Spowoduje to wyświetlenie okna dialogowego Dołącz zewnętrzny arkusz stylów. Określ ustawienia, a następnie kliknij przycisk OK.

    3. Opcja Dołącz prefabrykowany układ udostępnia podstawową kompozycję dokumentu Bootstrap.

      Jeśli nie chcesz korzystać z tej podstawowej kompozycji i wolisz zacząć pracę od pustego dokumentu, wyłącz opcję Dołącz prefabrykowany układ.

    4. (Opcjonalnie) Domyślny układ zawiera 12 kolumn z odstępami o szerokości 30 px. Domyślne rozmiary ekranu to 576 px, 768 px, 992 px i 1200 px.

      Jeśli chcesz zmodyfikować te ustawienia, kliknij przycisk Dostosuj. Plik bootstrap.css zostanie odpowiednio zmieniony.

      Uwaga:

      W wersji Bootstrap 3.4.0 domyślne rozmiary ekranu to 768 px, 992 px oraz 1200 px.

    5. Jeśli chcesz otworzyć panel Extract (o ile jest zamknięty), zaznacz opcję Skorzystaj z narzędzia Extract, aby zbudować stronę na podstawie kompozycji układu z programu Photoshop. Umożliwi to bezpośrednie rozpoczęcie wydzielania zasobów z kompozycji programu Photoshop.

      Nowy serwis jest domyślnie tworzony z użyciem wersji Bootstrap 4.2.1. Po utworzeniu dokumentu w folderze głównym serwisu zostaną umieszczone foldery css oraz js. Jeśli jednak chcesz skorzystać z wersji Bootstrap 3.4.0, wybierz polecenie Serwis > Zarządzaj serwisami. Wybierz katalog główny serwisu. Kliknij opcję Ustawienia zaawansowane > Bootstrap. W polu Wersja Bootstrap wybierz wartość 3.4.0. W przypadku wersji Bootstrap 3.4.0 w folderze głównym będą widoczne trzy foldery: css, js oraz fonts.

      Wybieranie wersji Bootstrap 4.2.1
      Wybieranie wersji Bootstrap 4.2.1

      W przypadku tworzenia strony w strukturze Bootstrap 4.2.1 obsługiwana jest wersja jQuery 3.3.1. Szablony startowe Bootstrap zostaną uaktualnione do wersji Bootstrap 4.2.1.

      Dodając składniki Bootstrap do strony opartej na tej strukturze, można zaktualizować strony w wersji Bootstrap 4.0.0 do wersji Bootstrap 4.2.1 oraz jQuery 3.3.1. Kliknij przycisk Tak w oknie dialogowym wyświetlanym podczas wstawiania składników Bootstrap na stronę.

      Okno dialogowe potwierdzenia zgodności wersji
      Okno dialogowe potwierdzenia zgodności wersji
      Wyskakujące okno jQuery
      Wyskakujące okno jQuery

      Podczas importowania serwisu w wersji Bootstrap 4.0.0 lub przeprowadzania migracji serwisu z wcześniejszej wersji programu Dreamweaver CC w oknie dialogowym Konfiguracja serwisu > Zaawansowane > Bootstrap wartość wersji Bootstrap jest ustawiana na 4.2.1.

  4. Aby użyć istniejących plików struktury Bootstrap, wykonaj następujące czynności:

    1. Kliknij opcję Użyj istniejącego i podaj ścieżkę do pliku bootstrap.css. Możesz również przejść do lokalizacji, w której zapisano plik CSS.

      Tworzenie dokumentów Bootstrap na podstawie istniejących plików struktury
      Tworzenie dokumentów Bootstrap na podstawie istniejących plików struktury

    2. (Opcjonalnie) Jeśli chcesz dołączyć do dokumentu inny arkusz CSS, kliknij ikonę w sekcji Dołącz plik CSS. W oknie dialogowym Dołącz zewnętrzny arkusz stylów wybierz odpowiednie ustawienia i kliknij przycisk OK.

    3. Opcja Dołącz prefabrykowany układ udostępnia podstawową kompozycję dokumentu Bootstrap. Jeśli nie chcesz korzystać z tej podstawowej kompozycji i wolisz zacząć pracę od pustego dokumentu, wyłącz opcję Dołącz prefabrykowany układ.

  5. Kliknij przycisk Utwórz.

Uwaga:

Utworzony plik bootstrap.css ma atrybut „tylko do odczytu”. Dlatego też nie można edytować tych stylów za pomocą panelu Projektant CSS. Sekcja Właściwości w panelu Projektant CSS jest wyłączona w plikach Bootstrap.

Jeśli chcesz zmodyfikować style w dokumencie Bootstrap, utwórz nowy plik CSS, aby przesłonić istniejące style, a następnie dołącz ten plik do dokumentu.

Otwieranie plików Bootstrap

Uwaga:

W programie Dreamweaver zaleca się otwieranie i edytowanie tylko dokumentów utworzonych w wersji Bootstrap 3 lub nowszej.

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">

Uwaga:

Program Dreamweaver obsługuje arkusze stylów Bootstrap zarówno w znacznikach link, jak i import. Nie jest jednak obsługiwane importowanie zagnieżdżone, czyli łączenie z arkuszem stylów, który z kolei importuje inny arkusz stylów.

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.

Ukrywanie elementów Bootstrap w programie Dreamweaver
Ukrywanie elementów Bootstrap w programie Dreamweaver

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.

Zarządzanie ukrytymi elementami Bootstrap
Zarządzanie ukrytymi elementami Bootstrap

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.

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.2.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.2.1.
Składniki obsługiwane w wersji Bootstrap 4.0.0
Składniki obsługiwane w wersji Bootstrap 4.0.0

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ą.

Uwaga:

Opcja Dodaj wiersz lub Dodaj kolumnę powoduje powielenie danego wiersza lub kolumny z zachowaniem klas, ale bez 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.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online