Šiame įraše pradėsime kurdami svetainę naudodami „Bootstrap“., atvirojo kodo sistemą, kuri leidžia mums lengvai padaryti ją reaguojančią ir suteikti jai tam tikro interaktyvumo. Tai pagrindinis šablonas, automatiškai sugeneruotas kūrimo aplinkos papildinio, kurį rekomendavome anksčiau ir kurį turėsime modifikuoti.
Į ankstesnis straipsnis Rasite instrukcijas, kaip įdiegti VS Codium, išversti jo vartotojo sąsają į ispanų kalbą ir įdiegti Bootstrap papildinį.
Reikia atsiminti du dalykus:
- Naudojamos komandos yra spartieji klavišai, jas turite įvesti. Kopijuoti/įklijuoti neveikia.
- Mūsų turinio tvarkyklė neleidžia man rodyti HTML kodo, todėl turiu naudoti ekrano kopijas. Kad galėtumėte pasiekti pavyzdžių, kuriuos įkėliau, kodą į „GitHub“.
Kaip klonuoti „GitHub“ saugyklą
Didžiuosius nuo mūsų kitų skiria tai, kaip jie reaguoja į problemas. Richardui Stallmanui nepatiko jo spausdintuvo tvarkyklė ir kadangi jie neleido jam jos pakeisti, jis pradėjo laisvosios programinės įrangos judėjimą. Linuso Torvaldso neįtikino nė viena kodų dalijimosi platforma ir sukūrė savo. git.
Skirtingai nuo tradicinių programinės įrangos platinimo sistemų, kuriose vienintelė vartotojo sąveika yra atsisiuntimas, su Git galite stebėti projekto raidą laikui bėgant. Kiti žmonės gali klonuoti saugyklą, atlikti pakeitimus ir pasiūlyti, kad pradinio projekto kūrėjai juos įtrauktų. Jei bus priimtas, kūrėjai gali lengvai tai padaryti, neatsisiunčiant ir iš naujo neįkeliant failų.
Yra keletas paslaugų, pagrįstų „Git“, aš pasirinkau „GitHub“. tiesiog todėl, kad jis integruojamas su VS Codium.
Norėdami atsisiųsti pavyzdinius failus į savo kompiuterį, jums tereikia įdiegti git paketą, vadovaudamiesi platinimo instrukcijomis, kaip įdiegti paketus terminale.
Tada įveskite šias komandas.
Man labiau patinka išsaugoti failus aplanke Dokumentai, kad pakeisčiau katalogą su
cd Documentos
Tada aš klonuoju failus su:
git clone https://github.com/dggonzalez1971/bootstrap.git
Šiuos veiksmus priminsiu kiekviename likusiame straipsnyje, nes tokiu būdu atnaujinsite pavyzdinius failus, kai jie bus įkeliami.
Norėdami pamatyti failus, tiesiog atidarykite failų naršyklę ir ieškokite aplanko bootstrap.
Svetainės kūrimas naudojant „Bootstrap“.
Jei norite įvesti kodą rankiniu būdu, pradedame sukurti aplanką, kuriame išsaugosime svetainę. Galite įdėti bet kokį pavadinimą.
Tada atliekame šiuos veiksmus:
- Eikime į meniu Archyvas.
- Spustelėkite Naujas tekstinis failas.
- Spustelėkite Įrašyti.
- Ieškome sukurto aplanko ir įdedame failo pavadinimą example1.html.
- Spustelėkite Įrašyti.
Kartais failų naršyklės langą gali paslėpti VSCodium.
Leiskite plėtiniui sukurti mums pagrindinį šabloną. Tam mes rašome !b5-$
Taip bus sugeneruotas kodas, kurį rasite pavyzdžių aplanke kaip example1.html
Pamatysime:
Tai yra „Bootstrap“ plėtinio sugeneruotas kodas.
Ketiname atlikti kai kuriuos šio failo pakeitimus. Modifikacijas rasite pavadinimu example2.html
- 2 eilutėje mes keičiame kalbą, pakeisdami eng į es. Tai rodo paieškos sistemoms, kad svetainės kalba yra ispanų.
- 6 eilutėje keičiame tekstą, esantį po etiketėmis pavadinimas. Mes dedame Mano pirmoji „Bootstrap“ svetainė.
- 12 eilutėje keičiame turinį tarp žymų h1 iki Tai svetainė, sukurta naudojant „Bootstrap“.
Toliau atliksime keletą svarbių pakeitimų. Šie pakeitimai yra susiję su:
- Papildinio kūrėjas negali neatsilikti nuo „Bootstrap“ versijų, o yra ir daugiau naujausių.
- Yra daug įkrovos komponentų parinkčių ir mane domina dar vienas.
- Remiantis oficialia dokumentacija, iškvietimai į „Javascript“ bibliotekas turi būti turinio žymų viduje.
Pavyzdžiui, 2 pakeitėme 7 eilutės turinį, ištrynėme 8 ir 9 eilutes ir įkėlėme likusį turinį, kad išlaikytume numeracijos suderinamumą. Tada paspaudžiame 10 eilutės pabaigą, kad sukurtume naują 11 eilutę ir įdėtume nuorodą į „Javascript“ bibliotekas.
Nesijaudinkite, jei nesuprantate kodo. Kiekvienos eilutės funkciją paaiškinsiu kitame straipsnyje.