Ebben a bejegyzésben egy webhely létrehozásával kezdjük a Bootstrap segítségével, a nyílt forráskódú keretrendszer, amely megkönnyíti számunkra a reszponzívvá tételt és némi interaktivitást. Ez egy alapsablon, amelyet automatikusan generál egy fejlesztőkörnyezeti beépülő modul, amelyet korábban javasoltunk, és amelyet módosítanunk kell.
In the előző cikk Megtalálja az utasításokat a VS Codium telepítéséhez, a felhasználói felület spanyol nyelvre fordításához és a Bootstrap beépülő modul telepítéséhez.
Két dolgot kell szem előtt tartani:
- Az általunk használt parancsok billentyűparancsok, ezeket be kell gépelni. A másolás/beillesztés nem működik.
- Tartalomkezelőnk nem teszi lehetővé a HTML kód megjelenítését, ezért képernyőképeket kell használnom. Hogy hozzáférjen a feltöltött példák kódjához a GitHubhoz.
Hogyan klónozhatunk GitHub adattárat
A nagyokat az különbözteti meg tőlünk, ahogy a problémákra reagálnak. Richard Stallman nem szerette a nyomtató-illesztőprogramját, és mivel nem engedték megváltoztatni, elindította a szabad szoftverek mozgalmát. Linus Torvaldst egyik kódmegosztó platform sem győzte meg, és létrehozta a sajátját. git.
Ellentétben a hagyományos szoftverelosztó rendszerekkel, amelyekben az egyetlen megengedett felhasználói interakció a letöltés, a Git segítségével nyomon követheti a projekt alakulását az idő múlásával. Mások klónozhatják a tárat, módosításokat hajthatnak végre, és javasolhatják, hogy az eredeti projekt fejlesztői építsék be ezeket. Ha elfogadják, a fejlesztők ezt könnyedén megtehetik anélkül, hogy le kellene tölteniük és újra fel kellene tölteniük a fájlokat.
Számos szolgáltatás létezik Gitre épülve, én a GitHubot választottam egyszerűen azért, mert integrálódik a VS Codiummal.
A mintafájlok számítógépére való letöltéséhez csak telepítenie kell a git csomagot, követve a disztribúciódnak a csomagok terminálba történő telepítésére vonatkozó utasításait.
Ezután írja be a következő parancsokat.
Inkább a Dokumentumok mappába mentem a fájlokat, így módosítom a könyvtárat ezzel
cd Documentos
Ezután klónozom a fájlokat a következővel:
git clone https://github.com/dggonzalez1971/bootstrap.git
A többi cikkben emlékeztetni fogom Önt ezekre a lépésekre, mivel így frissíteni fogja a példafájlokat a feltöltésükkor.
A fájlok megtekintéséhez nyissa meg a fájlkezelőt, és keresse meg a mappát bootstrap.
Webhely készítés Bootstrap segítségével
Ha inkább manuálisan szeretné beírni a kódot, akkor először létrehozunk egy mappát, amelybe elmentjük az oldalt. Bármilyen nevet írhatsz, amilyet akarsz.
Ezután a következő lépéseket követjük:
- Menjünk a menübe Archívum.
- Kattintson Új szöveges fájl.
- Kattintson Mentése.
- Megkeressük az általunk létrehozott mappát, és megadjuk a fájl nevét example1.html.
- Kattintson Mentése.
Előfordulhat, hogy a File Explorer ablakot elrejti a VSCodium.
Hagyjuk, hogy a bővítmény hozza létre nekünk az alapsablont. Ehhez gépeljük !b5-$
Ez létrehozza azt a kódot, amelyet a examples mappában example1.html néven talál
A következőket fogjuk látni:
Ez a Bootstrap kiterjesztés által generált kód.
Néhány változtatást fogunk végrehajtani ezen a fájlon. A módosításokat example2.html néven találod
- A 2. sorban úgy változtatjuk meg a nyelvet, hogy az eng-t es-re cseréljük. Ez azt jelzi a keresőmotorok számára, hogy az oldal nyelve spanyol.
- A 6. sorban megváltoztatjuk a címkék alatti szöveget cím. Rakjuk Az első Bootstrap webhelyem.
- A 12. sorban megváltoztatjuk a címkék közötti tartalmat h1 által Ez egy Bootstrap segítségével készült oldal.
Ezután néhány fontos módosítást végzünk. Ezek a módosítások a következőkhöz kapcsolódnak:
- A beépülő modul fejlesztője nem tud lépést tartani a Bootstrap verziókkal, és vannak újabbak is.
- Sok lehetőség van a bootstrap összetevőkre, és egy másik érdekel.
- A hivatalos dokumentáció szerint a Javascript-könyvtárak hívásainak a törzscímkéken belül kell lenniük.
A 2. példában módosítottuk a 7. sor tartalmát, töröltük a 8. és 9. sort, és feltöltöttük a fennmaradó tartalmat a számozási kompatibilitás megőrzése érdekében. Ezután a 10. sor végére kattintva hozzunk létre egy új 11. sort, és helyezzük el a Javascript könyvtárak hivatkozását.
Ne aggódjon, ha nem érti a kódot. A következő cikkben elmagyarázom az egyes sorok funkcióját.