În această postare vom începe prin a face un site cu Bootstrap, framework-ul open source care ne face ușor să-l facem receptiv și să îi oferim o anumită interactivitate. Este un șablon de bază generat automat de un plugin de mediu de dezvoltare pe care l-am recomandat anterior și pe care va trebui să îl modificăm.
În anterioară articol Veți găsi instrucțiunile pentru a instala VS Codium, pentru a traduce interfața sa de utilizator în spaniolă și pentru a instala pluginul Bootstrap.
Două lucruri de reținut:
- Comenzile pe care le folosim sunt comenzi rapide de la tastatură, trebuie să le tastați. Copy/paste nu funcționează.
- Managerul nostru de conținut nu îmi permite să afișez codul HTML, așa că trebuie să folosesc capturi de ecran. Ca să aveți acces la codul exemplelor pe care le-am încărcat către GitHub.
Cum se clonează un depozit GitHub
Ceea ce îi separă pe cei mari de ceilalți dintre noi este felul în care aceștia reacționează la probleme. Lui Richard Stallman nu i-a plăcut driverul lui de imprimantă și, din moment ce nu l-au lăsat să-l schimbe, a început mișcarea software-ului liber. Linus Torvalds nu a fost convins de niciuna dintre platformele de partajare a codului și și-a creat propria sa. git.
Spre deosebire de sistemele tradiționale de distribuție a software-ului în care singura interacțiune permisă de utilizator este descărcarea, cu Git poți urmări evoluția proiectului în timp. Alți oameni pot clona depozitul, pot face modificări și pot propune dezvoltatorilor proiectului original să le încorporeze. Dacă sunt acceptați, dezvoltatorii pot face acest lucru cu ușurință fără a fi nevoiți să descarce și să reîncarce fișierele.
Sunt mai multe servicii bazate pe Git, eu am ales GitHub pur și simplu pentru că se integrează cu VS Codium.
Pentru a descărca fișierele de exemplu pe computer, trebuie doar să instalați pachetul git urmând instrucțiunile distribuției dvs. pentru instalarea pachetelor în terminal.
Apoi tastați următoarele comenzi.
Prefer să salvez fișierele în folderul Documente așa că schimb directorul cu
cd Documentos
Apoi clonez fișierele cu:
git clone https://github.com/dggonzalez1971/bootstrap.git
O să vă reamintesc acești pași în fiecare dintre articolele rămase, deoarece în acest fel veți actualiza fișierele exemplu pe măsură ce sunt încărcate.
Pentru a vedea fișierele, deschideți exploratorul de fișiere și căutați folderul bootstrap.
Realizarea unui site cu Bootstrap
În cazul în care preferați să introduceți codul manual începem prin a crea un folder în care vom salva site-ul. Puteți pune orice nume doriți.
Apoi urmam urmatorii pasi:
- Să mergem la meniu Arhiva.
- Click pe Fișier text nou.
- Click pe Salvare.
- Căutăm folderul creat și punem numele fișierului exemplu1.html.
- Click pe Salvare.
Uneori, fereastra File Explorer poate fi ascunsă de cea VSCodium.
Să punem extensia să creeze șablonul de bază pentru noi. Pentru asta tastăm !b5-$
Aceasta va genera codul pe care îl veți găsi în folderul exemple ca example1.html
Vom vedea următoarele:
Acesta este codul generat de extensia Bootstrap.
Vom face câteva modificări la acest fișier. Veți găsi modificările sub numele example2.html
- Pe linia 2 schimbăm limba înlocuind eng cu es. Acest lucru indică motoarele de căutare că limba site-ului este spaniolă.
- În rândul 6 schimbăm textul care se află sub etichete titlu. Am pus Primul meu site Bootstrap.
- În rândul 12 schimbăm conținutul dintre etichete h1 de Acesta este un site realizat cu Bootstrap.
În continuare, vom face câteva modificări importante. Aceste modificări au legătură cu:
- Dezvoltatorul de plugin nu poate ține pasul cu versiunile Bootstrap și există altele mai actuale.
- Există multe opțiuni pentru componentele bootstrap și sunt interesat de alta.
- Conform documentației oficiale, apelurile către bibliotecile Javascript trebuie să fie în interiorul etichetelor body.
De exemplu 2 modificăm conținutul rândului 7, ștergem rândurile 8 și 9 și încărcăm conținutul rămas pentru a menține compatibilitatea cu numerotarea. Apoi facem clic pe sfârșitul liniei 10 pentru a crea o nouă linie 11 și punem link-ul către bibliotecile Javascript.
Nu vă faceți griji dacă nu înțelegeți codul. Voi explica funcția fiecărei linii în articolul următor.