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

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.

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.

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ží.

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.

Otevírání souborů Bootstrap

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

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.

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.

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

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.