Příručka uživatele Zrušit

Navrhování responzivních webů pomocí nástroje Bootstrap

 

 

V responzivní webové stránce určené pro mobilní zařízení použijte počáteční šablony funkce Bootstrap a komponenty Bootstrap s možností přetažení z aplikace Dreamweaver.

Bootstrap představuje nejoblíbenější bezplatný framework pro HTML, CSS a JavaScript, který umožňuje vývoj responzivních webových stránek optimalizovaných pro mobilní zařízení. Framework zahrnuje responzivní šablony CSS a HTML pro tlačítka, tabulky, navigaci, otočné obrázky a další elementy použitelné na webové stránce. K dispozici je vám i několik volitelných zásuvných modulů JavaScript, se kterými mohou i vývojáři s pouze základní znalostí psaní kódu vytvářet špičkové responzivní webové stránky.

Aplikace Dreamweaver umožňuje vytvářet dokumenty Bootstrap a měnit stávající webové stránky vytvořené pomocí služby Bootstrap. Ať už se jedná o plně navržený soubor Bootstrap, nebo o rozpracovaný návrh – můžete tyto soubory upravit v aplikaci Dreamweaver a společně s úpravou kódu měnit také design pomocí funkcí pro vizuální úpravy, jako je úprava v živém zobrazení, vizuální verze nástroje CSS Designer, vizuální multimediální dotazy a funkce Extract.

Poznámka:

Podporované verze Bootstrap jsou 4.4.1 a 3.4.1.

Běžné dotazy

V aplikaci Dreamweaver používám plovoucí mřížky. Kde naleznu informace potřebné k práci s rozhraním Bootstrap?

Pokud jste vytvořili dokumenty s plovoucí mřížkou, aplikace Dreamweaver učinila vaše webové stránky responzivními automatickým použitím příslušných tříd. Stačilo se soustředit na obsah a rozhodnout, jak se v různých velikostech přeformátuje.

Podobně je v dokumentech Bootstrap třeba se soustředit pouze na obsah a design. O responzivní chování webových stránek se postará aplikace Dreamweaver, která je úzce integrována s rozhraním Bootstrap.

Program Dreamweaver v současné době podporuje Bootstrap verze 3.4.1 a 4.4.1:

„Bootstrap 3.4.1 obsahuje první mobilní responzivní systém plovoucí mřížky, který se vhodně přizpůsobuje velikosti zařízení nebo obrazovky a může mít až 12 sloupců. Obsahuje předdefinované třídy pro možnosti snadného rozvržení a výkonná směšování pro generování rozložení s lepší sémantikou. - Dokumentace nástroje Bootstrap

„Bootstrap 4.4.1 obsahuje významné změny a zahrnuje výkonnou mřížku polí Flex určenou především pro mobilní zařízení, která díky 12sloupcovému systému, pěti výchozím responzivním vrstvám, proměnným a směšováním Sass a desítkám předdefinovaných tříd umožňuje vytvářet rozvržení všech tvarů a měřítek.“ - Dokumentace nástroje Bootstrap

Chcete-li začít s dokumenty rozhraní Bootstrap v aplikaci Dreamweaver, zvažte použití Výchozích šablon nástroje Bootstrap. Aplikace Dreamweaver obsahuje spoustu šablon zaměřených na různé typy webů, které můžete chtít vytvářet, například internetové obchodování nebo portfolio.

Pokud chcete vytvořit zcela nový dokument Bootstrap, můžete vždy postupovat podle popisu v části Vytváření dokumentů Bootstrap.

Mohu v aplikaci Dreamweaver migrovat stávající dokumenty s plovoucí mřížkou do dokumentů rozhraní Bootstrap?

Ne, přímá metoda převodu stávajících dokumentů s plovoucí mřížkou do dokumentů rozhraní Bootstrap není k dispozici. Uživatelské prostředí v aplikaci Dreamweaver je však při vytváření a navrhování dokumentů rozhraní Bootstrap podobné rozhraní dokumentů s plovoucí mřížkou. Můžete například začít vytvářet dokument Bootstrap přímo z dialogového okna Nový dokument. Při vytváření dokumentů s plovoucí mřížkou pro tři základní velikosti (mobilní telefon, tablet a stolní počítač) začnete v rozhraní Bootstrap vytvořením dokumentu pro základní velikosti obrazovky: malou, střední, velkou a velmi velkou. Možnosti úprav rozvržení, které se zobrazí po kliknutí na elementy v dokumentech rozhraní Bootstrap, také vypadají podobně jako v dokumentech s plovoucí mřížkou.

Můžu do nejnovější verze aplikace Dreamweaver importovat staré webové stránky?

Ano, do nejnovější verze aplikace Dreamweaver můžete importovat staré webové stránky. Když to uděláte, Dreamweaver se pokusí vyhledat ve složce /css/umístěné v kořenové složce webu soubor bootstrap.css.

  • Pokud má daný web soubor CSS pro Bootstrap verze 3, hodnota Bootstrap verze v části Správa webu > Rozšířená nastavení > Bootstrap se nastaví na 3.4.1.
  • Pokud má daný web soubor CSS pro Bootstrap verze 4, hodnota Bootstrap verze v části Správa webu > Rozšířená nastavení > Bootstrap se nastaví na 4.4.1.
  • Pokud web nemá ve složce kořen webu/css soubor CSS pro Bootstrap, hodnota Bootstrap verze v části Správa webu > Rozšířená nastavení > Bootstrap se nastaví na 4.4.1.

Vytváření dokumentů Bootstrap

S návrhem webu využívajícího prvky Bootstrap můžete začít výběrem jedné z možností v dialogovém okně Nový dokument:

  • Počáteční šablony Bootstrap (Počáteční šablony > Šablony Bootstrap) – tuto možnost použijte, pokud chcete začít rychle a bez nutnosti vytvářet rozvržení stránek úplně od začátku. Stačí podle potřeby upravit text a nahradit datové zdroje a responzivní webová stránka je hotová. Další informace naleznete v tématu Používání počátečních šablon Bootstrap.
  • Vytvořit dokument HTML založený na rozhraní Bootstrap (Nový dokument > HTML > Bootstrap) – tuto možnost použijte, pokud chcete v aplikaci Dreamweaver sestavit web kousek po kousku z CSS a komponent Bootstrap. Další informace naleznete v tématu Vytváření dokumentů HTML založených na rozhraní Bootstrap.

Používání počátečních šablon Bootstrap

Počáteční šablony Bootstrap vám umožní vytvářet webové stránky z oblíbených motivů Jiffy. Všechny závislé soubory v rozhraní se automaticky uloží.

  1. Klikněte na Soubor > Nový.

  2. V nově otevřeném dialogovém okně Nový dokument klikněte na Počáteční šablony a ze seznamu Šablony Bootstrap vyberte požadovanou šablonu.

  3. Klikněte na tlačítko Vytvořit

    Vytvoří se stránka HTML vycházející z vybrané šablony. Nyní můžete podle potřeby upravit stránku přidáním nebo odstraněním komponent, úpravou textu nebo datových zdrojů.

Vytváření dokumentů HTML založených na rozhraní Bootstrap

Responzivní web můžete začít vytvářet tak, že vytvoříte dokument HTML, který je založen na rozhraní Bootstrap. Podle potřeby můžete vytvořit sadu souborů s rozhraním Bootstrap nebo použít existující soubory. Po vytvoření dokumentu můžete z panelu Vložit aplikace Dreamweaver přidat komponenty Bootstrap, jako je skládačka nebo otočné obrázky. Případně pokud disponujete kompozicemi Photoshop, můžete využít funkci Extract pro přenos obrázků, písem, stylů, textu a dalších do dokumentu Bootstrap.

  1. Klikněte na Soubor > Nový.

  2. V nově otevřeném dialogovém okně Nový dokument klikněte na Nový dokument > HTML a pak na kartu Bootstrap.

  3. Nový soubor bootstrap.css (a další soubory bootstrap) můžete vytvořit následovně:

    Určete, zda chcete vytvořit nový prvek Bootstrap CSS nebo použít některý ze stávajících.

    Pokud se rozhodnete vytvořit nový prvek CSS, v kořenovém adresáři webu dojde k vytvoření složky „css“ a soubor bootstrap.css se zkopíruje do nové složky. Pokud se rozhodnete použít existující prvek CSS, zadejte cestu nebo přejděte do umístění souboru CSS.

    1. Klikněte na Vytvořit nový.

      Vytvoření nového dokumentu Bootstrap
      Vytvoření nového dokumentu Bootstrap

    2. (Volitelné) Pokud chcete k dokumentu připojit další prvky CSS, klikněte na ikonu  v části Připojit CSS. Otevře se dialogové okno Připojit externí seznam stylů. Určete nastavení a klikněte na tlačítko OK.

    3. Možnost Zahrnout předem sestavené rozvržení poskytuje základní strukturu dokumentu Bootstrap.

      Pokud nemáte zájem o základní strukturu a přejete si začít s prázdným dokumentem, zrušte výběr možnosti Zahrnout předem sestavené rozvržení.

    4. (Volitelné) Výchozí rozvržení obsahuje 12 sloupců s odstupem 30 pixelů. Výchozí velikosti obrazovky jsou 576, 768, 992 a 1200 pixelů. 

      Pokud chcete tato nastavení upravit, klikněte na Přizpůsobit. Soubor bootstrap.css se odpovídajícím způsobem upraví.

      Poznámka:

      Pro Bootstrap verze 3.4.0 jsou výchozí velikosti obrazovky 768, 992 a 1200 pixelů.

    5. Pokud chcete, aby se panel Extrakt otevřel (v případě, že je zavřený), vyberte možnost Sestavit stránku z kompozic aplikace Photoshop pomocí funkce Extract. Když to uděláte, můžete začít hned extrahovat datové zdroje z kompozic aplikace Photoshop.

      Ve výchozím nastavení je pomocí nástroje Bootstrap verze 4.4.1. vytvořena nová webová stránka. Po vytvoření dokumentu naleznete složky css a js v kořenové složce webu. Pokud však chcete vytvořit web pomocí nástroje Bootstrap verze 3.4.1, vyberte možnost Web > Správa webu. Vyberte kořenovou složku webu. Klikněte na Rozšířená nastavení > Bootstrap. V rozevíracím poli Bootstrap verze vyberte možnost 3.4.1. Při použití aplikace Bootstrap verze 3.4.1 naleznete složku css, js a fonts v kořenové složce webu.

      Vyberte Bootstrap verze 4.4.1
      Vyberte Bootstrap verze 4.4.1

      Po vytvoření stránky Bootstrap 4.4.1 je podporováno jQuery verze 3.4.1. Šablony Starter Bootstrap jsou aktualizovány na Bootstrap verzi 4.4.1.

      Když přidáte komponenty Bootstrap na stránku Bootstrap, můžete stránky Bootstrap 4.0.0 upgradovat na verzi Bootstrap 4.4.1 a jQuery na verzi 3.4.1. Klikněte na možnost Ano v dialogovém okně, které se zobrazí při vkládání komponent Bootstrap do stránky.

      Dialog pro potvrzení kompatibility verzí
      Dialog pro potvrzení kompatibility verzí

      Dialog pro potvrzení Bootstrap 3.4.1
      Dialog pro potvrzení Bootstrap 3.4.1

      jQuery popup dialog
      jQuery popup dialog

      Při importu webu Bootstrap 4.0.0 nebo při migraci webu z předchozích verzí na novou verzi aplikace Dreamweaver je verze Bootstrap nastavena na 4.4.1 v části Nastavení webu > Rozšířená nastavení > Bootstrap.

    Poznámka:

    S Bootstrap 4.3.1 se změní výška sloupce řádku mřížky z 1 pixelu na 0 pixelů. Chcete-li, aby byl viditelný v zobrazení Live, musíte přidat obsah do sloupce řádku mřížky.

  4. Pokud chcete použít stávající soubory rozhraní Bootstrap, postupujte takto:

    1. Klikněte na tlačítko Použít existující a zadejte cestu k souboru bootstrap.css. Umístění, ve kterém jsou prvky CSS uloženy, je možné určit také skrze procházení.

      Vytváření dokumentů Bootstrap pomocí existujících souborů rozhraní
      Vytváření dokumentů Bootstrap pomocí existujících souborů rozhraní

    2. Pokud chcete k dokumentu připojit další prvky CSS, klikněte na ikonu  v části Připojit CSS. V dialogovém okně Připojit externí seznam stylů určete nastavení a klikněte na OK.

    3. Možnost Zahrnout předem sestavené rozvržení poskytuje základní strukturu dokumentu Bootstrap.Pokud nemáte zájem o základní strukturu a přejete si začít s prázdným dokumentem, zrušte výběr možnosti Zahrnout předem sestavené rozvržení.

  5. Klikněte na tlačítko Vytvořit.

Poznámka:

Soubor bootstrap.css je po vytvoření jen pro čtení. Proto tyto styly nelze upravit pomocí aplikace CSS Designer. Panel Vlastnosti aplikace CSS Designer je u souborů Bootstrap zakázaný.

Pokud chcete upravit styl dokumentu Bootstrap, vytvořte další soubor CSS, kterým chcete přepsat stávající styly, a následně jej připojte k dokumentu.

Otevírání souborů Bootstrap

Poznámka:

V aplikaci Dreamweaver doporučujeme otevírat a upravovat pouze dokumenty vytvořené v nástroji Bootstrap verze 3 nebo novější.

Soubory Bootstrap můžete otevřít jedním z následujících způsobů:

  • Klikněte na Soubor > Otevřít a vyhledejte soubor Bootstrap ve formátu HTML.
  • (Doporučeno) Vytvořte web Dreamweaver a složku webu odkažte na složku obsahující veškeré soubory Bootstrap.

Při otevření souboru HTML vytvořeného nástrojem Bootstrap v aplikaci Dreamweaver:

  • Řádky jsou zvýrazněny pomocí šedých přerušovaných čar se zaoblenými rohy,
  • Sloupce jsou zvýrazněny pomocí modrých přerušovaných čar.

Aplikace Dreamweaver dokáže rozpoznat soubor CSS přiřazený k souborům Bootstrap HTML, pokud jeho název obsahuje text „bootstrap“. Reference souboru CSS mohou být jakékoli z následujících možností:

  • Místní cesta:

    Zmenšený nebo nezmenšený soubor CSS je k dispozici lokálně. Například:

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

  • Vzdálená cesta:
  • Vzdálený zmenšený nebo nezmenšený soubor CSS. Například:

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

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

Poznámka:

Seznamy stylů Bootstrap lze v aplikaci Dreamweaver použít u tagů pro odkaz i import. Nicméně vnořený import – odkaz na seznam stylů, který by poté importoval další seznam stylů – podporován není.

Skrytí, zobrazení a správa skrytých elementů Bootstrap

V některých případech může být potřeba zobrazit element pro jednu velikost displeje, zatímco u jiné velikosti displeje ho budete chtít pro účely designu skrýt. 

Pokud chcete skrýt element Bootstrap, klikněte pravým tlačítkem a vyberte možnost Skrýt element. Vybraný element tímto dočasně v zobrazení skryjete.

Skrytí prvků Bootstrap v aplikaci Dreamweaver
Skrytí prvků Bootstrap v aplikaci Dreamweaver

Budete-li chtít skryté elementy znovu zobrazit, klikněte pravým tlačítkem a vyberte možnost Spravovat skryté elementy. Pozadí skrytých elementů bude šedé a čárkované. Kliknutím na ikonu oka element znovu zobrazíte.

Správa skrytých elementů Bootstrap
Správa skrytých elementů Bootstrap

Přidání komponent Bootstrap

Možnost Komponenty Bootstrap na panelu Vložit uvádí všechny komponenty Bootstrap, které můžete v aplikaci Dreamweaver přidat do webové stránky. Podle verze Bootstrap uvedené v souboru bootstrap.css propojeném se stránkou ve formátu HTML jsou na panelu Vložit uvedeny odpovídající komponenty.  Například ve verzi 4.0.0 jsou uvedeny některé komponenty navíc, třeba Karty nebo Symboly. Obdobně ikony piktogramů, panely, zásobníky a miniatury jsou dostupné jen v nástroji Bootstrap verze 3.3.7. V závislosti na verzi se na panelu Vložit zobrazí odpovídající komponenty. Také komponenta symbolů probíhajících operací je k dispozici jen v nástroji Bootstrap verze 4.4.1.

Komponenty na panelu Vložit jsou uváděny na základě následujících kritérií:

  • Aktivní dokument: Komponenty na panelu Vložit se zobrazí na základě verze uvedené v souboru Bootstrap, který je s dokumentem propojen. 
  • Verze v předvolbách webového místa: V případě dokumentu, který nebyl vytvořen pomocí Bootstrap, hledá aplikace Dreamweaver verzi v Předvolby webového místa > Další volby > Bootstrap. V závislosti na verzi v této volbě se zobrazí odpovídající komponenty. Ve výchozím nastavení se pro nové weby použije verze 4.4.1.
  • Kde jsou soubory uloženy: V případě dokumentu vytvořeného bez komponent Bootstrap, který není součástí žádného webu, odráží panel Vložit komponenty verze 4.4.1.
Komponenty podporované v Bootstrap 4.0.0
Komponenty podporované v Bootstrap 4.4.1

Komponenty přidáte jejich přetažením z panelu na webovou stránku. Před dokončením přetažení komponentu si povšimněte vizuálních pomůcek, jako jsou živá vodítka, funkce Přesné vložení (pomocí modelu DOM) a Asistované určení polohy. Tyto pomůcky můžete použit k rychlému a přesnému umístění komponentu na stránce. Další informace o vkládání elementů na webovou stránku naleznete v tématu Přehled panelu Vložit.

Přidání řádku

Klikněte na požadovaný řádek, za který chcete přidat nový řádek. Poté klikněte na ikonu Přidat nový řádek. Dojde tak ke vložení řádku Bootstrap spolu se dvěma podřízenými elementy sloupců (každý s šesti sloupci).

Kód pro přidaný řádek je následující:

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

kde * představuje aktuální velikost obrazovky v aplikaci Dreamweaver.

Přidat sloupce

Vyberte požadovaný sloupec a klikněte na ikonu Přidat nový sloupec. Vybraný sloupec se duplikuje bez jeho podřízených prvků.

Všem prázdným sloupcům je přidělena minimální výška 20 pixelů. Tato výška však ve skutečnosti nebude přidána na stránku. Zobrazí se pouze v živém zobrazení a usnadňuje vkládání elementů do sloupců.

Duplikování řádků a sloupců

Klikněte na řádek nebo sloupec, který chcete duplikovat, a poté klikněte na ikonu duplikace v pravém dolním rohu. Duplikace proběhne u celého řádku nebo sloupce společně s jeho obsahem.

Poznámka:

Možnost Přidat řádek nebo Přidat sloupec umožňuje duplikování řádku nebo sloupce spolu s třídami, ale bez obsahu.

Změna velikosti a odsazení sloupců

Změna velikosti a odsazení sloupců je klíčovou operací obzvláště v případech, kdy vytváříte responzivní designy pro různé velikosti displejů. 

Změna šířky sloupců

Velikost můžete změnit kliknutím na požadovaný sloupec a přetažením ovládacího prvku na pravé straně. Když u dokumentu Bootstrap verze 4.0.0 změníte šířku sloupce, přidá se třída col-*-n, kde * představuje dotaz na aktuální médium (sm, md, lg, xl) a n představuje počet sloupců, které zabírá. V případě velmi malé velikosti obrazovky se přidá třída col-n.

Když u dokumentu Bootstrap verze 3.3.7 změníte šířku sloupce, přidá se třída col-*-n, kde * představuje dotaz na aktuální médium (xs, sm, md nebo lg) a n představuje počet sloupců, které zabírá.

Aplikace Dreamweaver rozpozná aktuální velikost obrazovky a přidá odpovídající třídu. Jestliže budete chtít změnit velikost sloupců tak, aby vyhovovaly určitým velikostem displeje, určete velikosti těchto displejů pomocí možností v pravé spodní části nebo pomocí nástroje pro posun. Velikost sloupců následně podle potřeby upravte.

Odsazení sloupců

Odsazení sloupce můžete změnit kliknutím na požadovaný sloupec a přetažením ovládacího prvku na levé straně. Odsazení se zobrazí v podobě čárkované oblasti. Když u dokumentu Bootstrap verze 4.0.0 odsadíte sloupec, přidá se třída offset-*-n, kde * představuje dotaz na aktuální médium (sm, md, lg nebo xl) a n představuje počet sloupců, které zabírá.

Když u dokumentu Bootstrap verze 3.3.7 odsadíte sloupec, přidá se třída col-*-offset-n, kde * představuje dotaz na aktuální médium (xs, sm, md nebo lg) a n představuje počet sloupců, o který se odsadí.

Aplikace Dreamweaver rozpozná aktuální velikost obrazovky a přidá správnou třídu. Jestliže budete chtít změnit odsazení sloupců tak, aby vyhovovaly určitým velikostem displeje, určete velikosti těchto displejů pomocí možností v pravé spodní části nebo pomocí nástroje pro posun. Odsazení sloupců následně podle potřeby upravte.

Získejte pomoc rychleji a snáze

Nový uživatel?