Saidi loomine Bootstrapiga

See on meie esimene Bootstrapiga sait

Selles postituses alustame Bootstrapiga saidi loomisest, avatud lähtekoodiga raamistik, mis muudab selle tundlikuks muutmise ja selle interaktiivsuse pakkumise lihtsaks. See on põhimall, mille genereerib automaatselt arenduskeskkonna pistikprogramm, mida me varem soovitasime ja mida me peame muutma.

Aastal eelmises artiklis Siit leiate juhised VS Codiumi installimiseks, selle kasutajaliidese tõlkimiseks hispaania keelde ja Bootstrapi pistikprogrammi installimiseks.

Tasub meeles pidada kahte asja.

  1. Meie kasutatavad käsud on kiirklahvid, need tuleb sisestada. Kopeerimine/kleepimine ei tööta.
  2. Meie sisuhaldur ei luba mul HTML-koodi kuvada, seega pean kasutama ekraanipilte. Et teil oleks juurdepääs nende näidete koodidele, mille ma need üles laadisin GitHubile.

Kuidas kloonida GitHubi hoidlat

Mis eristab suurkujusid meist ülejäänutest, on see, kuidas nad probleemidele reageerivad. Richard Stallmanile tema printeridraiver ei meeldinud ja kuna nad ei lubanud tal seda muuta, alustas ta vaba tarkvara liikumist. Linus Torvaldsit ei veennud ükski koodijagamisplatvorm ja ta lõi oma. git.

Erinevalt traditsioonilistest tarkvara jaotussüsteemidest, kus ainus lubatud kasutaja suhtlus on allalaadimine, Gitiga saate jälgida projekti arengut aja jooksul. Teised inimesed saavad hoidla kloonida, teha muudatusi ja teha ettepaneku esialgse projekti arendajatele need lisada. Kui see nõustub, saavad arendajad seda hõlpsalt teha, ilma et peaksid faile alla laadima ja uuesti üles laadima.

Gitil põhinevad mitmed teenused, valisin GitHubi lihtsalt sellepärast, et see integreerub VS Codiumiga.

Näidisfailide arvutisse allalaadimiseks peate lihtsalt installima git-paketi, järgides oma distributsiooni juhiseid pakettide terminali installimiseks.

Seejärel tippige järgmised käsud.

Eelistan salvestada failid kausta Dokumendid, nii et muudan kataloogi

cd Documentos

Seejärel kloonisin failid:

git clone https://github.com/dggonzalez1971/bootstrap.git

Tuletan teile neid samme meelde kõigis ülejäänud artiklites, kuna sel viisil värskendate näidisfaile nende üleslaadimisel.

Failide vaatamiseks avage lihtsalt failiuurija ja otsige üles kaust bootstrap.

Saidi loomine Bootstrapiga

Kui eelistate koodi käsitsi sisestada, alustame kausta loomisega, kuhu saidi salvestame. Võite panna mis tahes nime, mis teile meeldib.

Seejärel järgime järgmisi samme:

  1. Läheme menüüsse Arhiiv.
  2. Kliki Uus tekstifail.
  3. Kliki Salvesta.
  4. Otsime üles loodud kausta ja paneme faili nime näide1.html.
  5. Kliki Salvesta.

Mõnikord võib VSCodiumi aken File Exploreri akna peita.

Laske laiendil meie jaoks põhimall luua. Selleks kirjutame !b5-$

See genereerib koodi, mille leiate näidete kaustast nimega example1.html

Näeme järgmist:

Põhiline Bootstrapi mall

See on Bootstrapi laienduse loodud kood.

Teeme selles failis mõned muudatused. Muudatused leiate näite2.html nime alt

  • 2. real muudame keelt, asendades eng es-ga. See näitab otsingumootoritele, et saidi keel on hispaania keel.
  • 6. real muudame siltide all olevat teksti pealkiri. Panime Minu esimene Bootstrapi sait.
  • 12. real muudame siltide vahelist sisu h1 poolt See on Bootstrapiga tehtud sait.

Järgmisena teeme mõned olulised muudatused. Need muudatused on seotud:

  1. Pistikprogrammi arendaja ei saa Bootstrapi versioonidega sammu pidada ja neid on uuemaid.
  2. Bootstrapi komponentide jaoks on palju võimalusi ja mind huvitab veel üks.
  3. Ametliku dokumentatsiooni kohaselt peavad Javascripti teekide kõned olema kehamärgendite sees.

Näiteks 2 muutsime 7. rea sisu, kustutasime read 8 ja 9 ning laadisime ülejäänud sisu üles, et säilitada nummerdamise ühilduvus. Seejärel klõpsame rea 10 lõpus, et luua uus rida 11 ja panna link Javascripti teekidesse.

Ärge muretsege, kui te koodist aru ei saa. Järgmises artiklis selgitan iga rea ​​funktsiooni.


Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata. Kohustuslikud väljad on tähistatud *

*

*

  1. Andmete eest vastutav: AB Internet Networks 2008 SL
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.