V tomto příspěvku začneme vytvořením webu s Bootstrap, open source framework, který nám usnadňuje, aby byl responzivní a poskytoval mu určitou interaktivitu. Jde o základní šablonu automaticky generovanou pluginem vývojového prostředí, který jsme doporučili dříve a který budeme muset upravit.
V předchozí článek Najdete zde pokyny k instalaci VS Codium, překladu jeho uživatelského rozhraní do španělštiny a instalaci pluginu Bootstrap.
Je třeba mít na paměti dvě věci:
- Příkazy, které používáme, jsou klávesové zkratky, musíte je napsat. Kopírování/vkládání nefunguje.
- Náš správce obsahu mi neumožňuje zobrazit kód HTML, takže musím používat snímky obrazovky. Abyste měli přístup ke kódu příkladů, které jsem je nahrál na GitHub.
Jak naklonovat úložiště GitHub
To, co odděluje velikány od nás ostatních, je způsob, jakým reagují na problémy. Richard Stallman neměl rád svůj ovladač tiskárny, a protože mu nedovolili jej změnit, zahájil hnutí za svobodný software. Linuse Torvaldse nepřesvědčila žádná z platforem pro sdílení kódu a vytvořil si vlastní. git.
Na rozdíl od tradičních systémů distribuce softwaru, ve kterých je jedinou povolenou uživatelskou interakcí stahování, s Git můžete sledovat vývoj projektu v průběhu času. Ostatní lidé mohou klonovat úložiště, provádět úpravy a navrhovat, aby je vývojáři původního projektu začlenili. Pokud to bude přijato, vývojáři tak mohou snadno učinit, aniž by museli stahovat a znovu nahrávat soubory.
Existuje několik služeb založených na Gitu, já jsem si vybral GitHub jednoduše proto, že se integruje s VS Codium.
Abyste si mohli stáhnout ukázkové soubory do svého počítače, stačí nainstalovat balíček git podle pokynů vaší distribuce pro instalaci balíčků do terminálu.
Poté zadejte následující příkazy.
Dávám přednost ukládání souborů do složky Dokumenty, takže změním adresář pomocí
cd Documentos
Poté naklonuji soubory pomocí:
git clone https://github.com/dggonzalez1971/bootstrap.git
Tyto kroky vám připomenu v každém ze zbývajících článků, protože tímto způsobem budete aktualizovat vzorové soubory při jejich nahrávání.
Chcete-li zobrazit soubory, otevřete Průzkumník souborů a vyhledejte složku bootstrap.
Vytvoření webu pomocí Bootstrap
V případě, že dáváte přednost ručnímu zadávání kódu, začneme vytvořením složky, do které web uložíme. Můžete zadat jakékoli jméno, které chcete.
Poté postupujeme podle následujících kroků:
- Pojďme do nabídky Archiv.
- Klikněte na Nový textový soubor.
- Klikněte na Uložit.
- Vyhledáme složku, kterou jsme vytvořili, a vložíme název souboru example1.html.
- Klikněte na Uložit.
Někdy může být okno Průzkumníka souborů skryto oknem VSCodium.
Necháme rozšíření vytvořit základní šablonu za nás. Za tímto účelem píšeme !b5-$
Tím se vygeneruje kód, který najdete ve složce příkladů jako example1.html
Uvidíme následující:
Toto je kód generovaný rozšířením Bootstrap.
V tomto souboru provedeme nějaké změny. Úpravy najdete pod názvem example2.html
- Na řádku 2 změníme jazyk nahrazením eng es. Vyhledávačům to znamená, že jazykem stránky je španělština.
- V řádku 6 změníme text, který je pod popisky titul. Vložili jsme Můj první Bootstrap web.
- V řádku 12 měníme obsah mezi tagy h1 podle Toto je stránka vytvořená pomocí Bootstrap.
Dále provedeme některé důležité úpravy. Tyto úpravy mají co do činění s:
- Vývojář pluginu nestíhá držet krok s verzemi Bootstrapu a je jich více aktuálních.
- Existuje mnoho možností pro bootstrap komponenty a mě zajímá další.
- Podle oficiální dokumentace musí být volání do knihoven Javascriptu uvnitř značek těla.
Například 2 jsme upravili obsah řádku 7, smazali řádky 8 a 9 a nahráli zbývající obsah, abychom zachovali kompatibilitu číslování. Poté klikneme na konec řádku 10 a vytvoříme nový řádek 11 a vložíme odkaz na knihovny Javascriptu.
Nedělejte si starosti, pokud kódu nerozumíte. Funkci každého řádku vysvětlím v dalším článku.