V tej objavi bomo začeli z izdelavo spletnega mesta z Bootstrapom, odprtokodno ogrodje, ki nam olajša njegovo odzivnost in mu zagotovi nekaj interaktivnosti. To je osnovna predloga, ki jo samodejno ustvari vtičnik za razvojno okolje, ki smo ga priporočili prej in ga bomo morali spremeniti.
V prejšnji članek Našli boste navodila za namestitev VS Codium, prevajanje njegovega uporabniškega vmesnika v španščino in namestitev vtičnika Bootstrap.
Upoštevati je treba dve stvari:
- Ukazi, ki jih uporabljamo, so bližnjice na tipkovnici, vnesti jih morate. Kopiraj/prilepi ne deluje.
- Naš upravitelj vsebine mi ne dovoli prikaza kode HTML, zato moram uporabiti posnetke zaslona. Da imate dostop do kode primerov, sem jih naložil na GitHub.
Kako klonirati repozitorij GitHub
Kar loči velike od nas ostalih, je način, kako se odzivajo na težave. Richardu Stallmanu njegov gonilnik za tiskalnik ni bil všeč in ker mu niso dovolili, da ga spremeni, je začel gibanje za prosto programje. Linusa Torvaldsa nobena platforma za deljenje kode ni prepričala in je ustvaril svojo. git.
Za razliko od tradicionalnih distribucijskih sistemov programske opreme, v katerih je edina dovoljena uporabniška interakcija prenos, z Gitom lahko spremljate razvoj projekta skozi čas. Drugi ljudje lahko klonirajo repozitorij, naredijo spremembe in predlagajo, da jih vključijo razvijalci izvirnega projekta. Če je sprejeto, lahko razvijalci to enostavno storijo, ne da bi morali prenesti in znova naložiti datoteke.
Obstaja več storitev, ki temeljijo na Gitu, jaz sem izbral GitHub preprosto zato, ker se integrira z VS Codium.
Če želite prenesti vzorčne datoteke v svoj računalnik, morate le namestiti paket git po navodilih distribucije za namestitev paketov v terminal.
Nato vnesete naslednje ukaze.
Datoteke raje shranim v mapo Dokumenti, tako da spremenim imenik z
cd Documentos
Nato kloniram datoteke z:
git clone https://github.com/dggonzalez1971/bootstrap.git
Na te korake vas bom spomnil v vsakem od preostalih člankov, saj boste na ta način posodabljali vzorčne datoteke, ko bodo naložene.
Če si želite ogledati datoteke, preprosto odprite raziskovalca datotek in poiščite mapo zagonski trak.
Izdelava spletnega mesta z Bootstrapom
V primeru, da kodo raje vnesete ročno, začnemo z ustvarjanjem mape, v katero bomo shranili stran. Lahko daš poljubno ime.
Nato sledimo naslednjim korakom:
- Pojdimo na meni Arhiv.
- Kliknite na Nova besedilna datoteka.
- Kliknite na Shrani.
- Poiščemo mapo, ki smo jo ustvarili, in vnesemo ime datoteke primer1.html.
- Kliknite na Shrani.
Včasih okno Raziskovalca datotek morda skrije okno VSCodium.
Naj nam razširitev ustvari osnovno predlogo. Za to tipkamo !b5-$
To bo ustvarilo kodo, ki jo boste našli v mapi s primeri kot example1.html
Videli bomo naslednje:
To je koda, ki jo ustvari razširitev Bootstrap.
Naredili bomo nekaj sprememb v tej datoteki. Spremembe boste našli pod imenom example2.html
- V 2. vrstici spremenimo jezik tako, da eng zamenjamo z es. To iskalnikom nakazuje, da je jezik spletnega mesta španščina.
- V vrstici 6 spremenimo besedilo, ki je pod nalepkami Naslov. Postavili smo Moje prvo spletno mesto Bootstrap.
- V vrstici 12 spremenimo vsebino med oznakami h1 jo To je stran, narejena z Bootstrapom.
Nato bomo naredili nekaj pomembnih sprememb. Te spremembe so povezane z:
- Razvijalec vtičnika ne more slediti različicam Bootstrapa in obstajajo več trenutnih.
- Za komponente bootstrap je veliko možnosti in zanima me še ena.
- V skladu z uradno dokumentacijo morajo biti klici knjižnic Javascript znotraj telesnih oznak.
Na primer 2 smo spremenili vsebino vrstice 7, izbrisali vrstici 8 in 9 ter naložili preostalo vsebino, da ohranimo združljivost oštevilčenja. Nato kliknemo konec vrstice 10, da ustvarimo novo vrstico 11 in postavimo povezavo do knjižnic Javascript.
Ne skrbite, če kode ne razumete. Funkcijo vsake vrstice bom razložil v naslednjem članku.