V tomto príspevku začneme vytvorením stránky s Bootstrap, open source framework, ktorý nám uľahčuje, aby bol responzívny a poskytuje mu určitú interaktivitu. Ide o základnú šablónu automaticky vygenerovanú pluginom vývojového prostredia, ktorý sme predtým odporúčali a ktorý budeme musieť upraviť.
V predchádzajúci článok Nájdete tu pokyny na inštaláciu VS Codium, preklad jeho používateľského rozhrania do španielčiny a inštaláciu doplnku Bootstrap.
Treba mať na pamäti dve veci:
- Príkazy, ktoré používame, sú klávesové skratky, musíte ich napísať. Kopírovanie/prilepenie nefunguje.
- Náš správca obsahu mi neumožňuje zobraziť kód HTML, takže musím použiť snímky obrazovky. Aby ste mali prístup ku kódu príkladov, ktoré som nahral na GitHub.
Ako klonovať úložisko GitHub
To, čo oddeľuje velikánov od nás ostatných, je spôsob, akým reagujú na problémy. Richardovi Stallmanovi sa nepáčil jeho ovládač tlačiarne a keďže mu ho nedovolili zmeniť, začal s hnutím za slobodný softvér. Linusa Torvaldsa nepresvedčila žiadna z platforiem na zdieľanie kódu a vytvoril si vlastnú. git.
Na rozdiel od tradičných systémov distribúcie softvéru, v ktorých je jedinou povolenou interakciou používateľa sťahovanie, s Git môžete sledovať vývoj projektu v priebehu času. Iní ľudia môžu klonovať úložisko, vykonávať úpravy a navrhovať, aby ich vývojári pôvodného projektu začlenili. Ak to prijme, vývojári to môžu jednoducho urobiť bez toho, aby museli sťahovať a znova nahrávať súbory.
Existuje niekoľko služieb založených na Git, ja som si vybral GitHub jednoducho preto, že sa integruje s VS Codium.
Aby ste si mohli stiahnuť vzorové súbory do svojho počítača, stačí nainštalovať balík git podľa pokynov vašej distribúcie na inštaláciu balíkov do terminálu.
Potom zadajte nasledujúce príkazy.
Uprednostňujem ukladanie súborov do priečinka Dokumenty, takže zmením adresár pomocou
cd Documentos
Potom naklonujem súbory pomocou:
git clone https://github.com/dggonzalez1971/bootstrap.git
Tieto kroky vám pripomeniem v každom zo zostávajúcich článkov, pretože týmto spôsobom budete aktualizovať vzorové súbory pri ich nahrávaní.
Ak chcete zobraziť súbory, jednoducho otvorte prieskumníka súborov a vyhľadajte priečinok bootstrap.
Vytvorenie stránky pomocou Bootstrapu
V prípade, že uprednostňujete písanie kódu ručne, začneme vytvorením priečinka, do ktorého stránku uložíme. Môžete zadať akékoľvek meno, ktoré sa vám páči.
Potom postupujeme podľa nasledujúcich krokov:
- Poďme na menu Archív.
- Kliknite na Nový textový súbor.
- Kliknite na Ušetriť.
- Vyhľadáme priečinok, ktorý sme vytvorili, a zadáme názov súboru example1.html.
- Kliknite na Ušetriť.
Niekedy môže byť okno Prieskumníka skryté oknom VSCodium.
Nechajte rozšírenie, aby nám vytvorilo základnú šablónu. Na tento účel napíšeme !b5-$
Tým sa vygeneruje kód, ktorý nájdete v priečinku s príkladmi ako example1.html
Uvidíme nasledovné:
Toto je kód generovaný rozšírením Bootstrap.
V tomto súbore urobíme nejaké zmeny. Úpravy nájdete pod názvom example2.html
- V riadku 2 zmeníme jazyk nahradením eng za es. Pre vyhľadávače to znamená, že jazykom stránky je španielčina.
- V riadku 6 zmeníme text, ktorý je pod menovkami titul. Dali sme Môj prvý Bootstrap web.
- V riadku 12 meníme obsah medzi značkami h1 podľa Toto je stránka vytvorená pomocou Bootstrap.
Ďalej vykonáme niekoľko dôležitých úprav. Tieto úpravy súvisia s:
- Vývojár doplnku nedokáže držať krok s verziami Bootstrap a existuje viac aktuálnych.
- Existuje veľa možností pre bootstrap komponenty a mám záujem o ďalšiu.
- Podľa oficiálnej dokumentácie musia byť volania do knižníc Javascript vo vnútri značiek tela.
Napríklad 2 sme upravili obsah riadku 7, vymazali riadky 8 a 9 a nahrali zostávajúci obsah, aby sme zachovali kompatibilitu číslovania. Potom klikneme na koniec riadku 10, čím vytvoríme nový riadok 11 a vložíme odkaz na knižnice Javascript.
Nerobte si starosti, ak nerozumiete kódu. Funkciu každého riadku vysvetlím v ďalšom článku.