Cum să faci un site web elegant și simplu cu Bootstrap 4: 7 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:43

Scopul acestui Instructable este de a oferi celor familiarizați cu programarea - HTML sau altfel - o simplă introducere pentru a crea un portofoliu online cu Bootstrap 4. Vă voi prezenta prin configurarea inițială a site-ului web, cum să creați câteva blocuri de conținut diferite, și câteva probleme pe care le-ați putea întâlni.

Portofoliul este împărțit în mai mulți pași mai mici pentru a încerca să-l facă mai ușor de gestionat: cadru HTML, cadru CSS, cadru Javascript, bara de navigare și pagina de pornire (cu blocuri de conținut).

Dacă explicațiile mele pentru ceva vă lasă încă confuz, nu ezitați să lăsați un comentariu cu întrebările, sugestiile dvs. sau pe google elementul despre care vă confundați. Există multe resurse disponibile pentru programarea site-urilor web și Bootstrap.

Notă: acest ghid nu este cuprinzător și nu ar trebui să fie folosit ca un substitut pentru a afla cum să programați în HTML, CSS sau Javascript.

Resurse necesare

• Bootstrap 4
• jQuery 3.3.1

Resurse opționale

• FontAwesome
• Google Fonts
• highlight.js

Dacă doriți să treceți la exemplul complet sau să aruncați o privire la depozit:

• Exemplu complet
• Repertoriu

Notă: Voi folosi Sublime în imagini pentru exemplele mele, dacă doriți să urmați împreună cu același editor de text.

Pasul 1: Configurare

Configurare folder

1. Creați un folder undeva unde puteți stoca tot ceea ce vom descărca. Acesta va fi directorul dvs. rădăcină pentru portofoliu.
2. Creați un folder în interiorul aceluia numit „bootstrap”
3. Creați un alt folder în dosarul de portofoliu rădăcină cu numele „jquery”

Dosar de portofoliu

| ----- bootstrap | ----- jquery

Bootstrap 4

1. Vizitați site-ul lor și faceți clic pe butonul „Descărcați” de sub secțiunea „Compilat CSS și JS”.
2. Salvați fișierul.zip în folderul „Descărcări” sau într-o altă locație convenabilă.
3. Deschideți fișierul.zip și extrageți folderele „css” și „js” în folderul „bootstrap” pe care l-ați creat anterior.

jQuery

1. Vizitați site-ul lor web și descărcați „jQuery 3.3.1 de dezvoltare necomprimată”
2. Salvați acel fișier în dosarul „jquery” pe care l-ați creat anterior.

Toate cadrele sunt acum pregătite pentru momentul în care începem să lucrăm la portofoliul real.

Pasul 2: cadru HTML (index.html)

Numele dumneavoastră

Acest cadru nu este nimic prea complex, dar vreau să explic scopurile generale ale configurării.

Bootstrap JS După jQuery

Se pare că există un fel de suprapunere între fișierul Javascript al Bootstrap și jQuery. Nu am testat pentru a vedea cât de extinsă este această suprapunere, dar un exemplu este funcționalitatea drop-down pe care o folosesc în bara de navigare. Dacă încărcați mai întâi în Bootstrap, butonul drop-down nu funcționează.

FontAwesome

Dacă ați făcut vreo dezvoltare web, este posibil să știți ce este FontAwesome. Cu toate acestea, dacă nu este cazul, este un set de pictograme care include un set de instrumente pentru personalizare suplimentară. Este incredibil de util dacă ești ca mine și nu ai absolut niciun talent artistic.

hightlight.js

Acest cadru permite evidențierea codului dinamic pe paginile web. Îl puteți importa ca și restul cadrelor pe care le folosesc dacă utilizați numai limbaje de programare comune, dar există și o opțiune de a descărca un set personalizat de limbaje. Am ales ultima variantă din cauza câtorva limbi macro și ini, dar depinde în totalitate de dvs.

Notă: Fiți conștienți de locurile în care folosesc link-uri codificate la fișiere precum cele două pictograme și highlight.js. De asemenea, deoarece doar Bootstrap și jQuery sunt necesare, nu ezitați să adăugați sau să eliminați orice alte cadre. Dacă eliminați oricare, nu uitați să eliminați liniile de cod care corespund mai târziu.

Pasul 3: Cadru CSS (style.css)

/ * * Sperăm că reducerea culorii bg la gri și schimbarea stilului fontului face site-ul web mai ușor de consumat * / body {background: gray; font-family: „Open Sans”, sans-serif; }

/*

* Acest lucru asigură că bara de navigare este deasupra tuturor * / nav {z-index: 9999; }

/*

* Acest lucru ar trebui să facă textul paragrafului mai lizibil * / p {font-size: 18px; marginea de sus: 5 px; marginea de jos: 5 px; }

/*

* Acest lucru asigură faptul că toate blocurile mele de cod sunt formatate corect * / code {text-align: left; }

/*

* Nu vreau ca listele să aibă gloanțele * / li {list-style-type: none; }

/*

* Link-urile sunt albastre în mod implicit și vreau să se alinieze cu stilul Bootstrap * / li a, a {color: white; }

/*

* Legez o etichetă de clasă la un div care conține bara de navigație pentru a mă asigura că conținutul nu este suprapus * /.navFix {padding-bottom: 70px; }

/*

* Dimensiune mărită se întinde navbar * /.social-media {font-size: 1.3em; }

/*

* Culoarea de evidențiere implicită pentru linkurile drop-down este alb * /.dropdown-menu a: hover {background-color: # 212529; }

/*

* Forțează divs-urile care afișează fișierele pdf la o anumită înălțime * /.pdfFill {height: 45rem; }

/*

* Adăugați o distanță între butoane și blocuri de coduri * /.codeStyle {padding-top: 30px; }

Am inclus elementele CSS bazate pe conținut în acest cadru pentru a încerca să vă economisesc ceva timp mai târziu. Toate sunt foarte simple și sunt în mare parte schimbări ale calității vieții care fac interacțiunea cu portofoliul mai ușoară pentru cititori.

nav indexul z

Am o cantitate foarte limitată de experiență în dezvoltarea web, așa că nu sunt sigur dacă aceasta este o problemă obișnuită la implementarea barei de navigare Bootstrap, dar fără nicio specificație de orientare față-în-spate, bara de navigare va apărea de fapt sub alt conținut, cum ar fi Cardurile Bootstrap. Acest lucru se observă cel mai mult cu bara de navă pliabilă, dar am inclus oricum schimbarea indexului pentru siguranță.

alinierea codului

Deoarece folosesc de obicei clasele Bootstrap „justify-content-center” și „text-center” pentru a alinia elementele, nu vreau ca codul meu să moștenească acea natură aliniată la centru. Acest lucru este ușor de remediat prin suprascrierea oricăror modificări de aliniere și prin efectuarea etichetelor de cod aliniate la stânga: aceasta păstrează spațiul dintre taburi în cod.

căptușeală navFix

Când bara de navigare Bootstrap este lipită în partea de sus a paginii, conținutul se va încărca sub ea. Cred că acest lucru se întâmplă deoarece bara de navigație este de fapt lipită de partea de sus a ferestrei în loc de pagina în sine. Indiferent, acest lucru este rezolvat prin mărirea spațiului dintre bara de navigare și restul conținutului.

înălțime pdf

Înălțimea implicită a fișierelor pdf este incredibil de mică. Este în esență ilizibil, așa că am schimbat înălțimea pentru a încerca să dau suficient spațiu pentru aproximativ o pagină la un moment dat.

Pasul 4: Cadru Javascript (javascript.js)

/ * * Acesta caută orice element cu clasa „toggle” și îl ascunde sau îl ascunde * / function toggleSection (id, toggleID) {if (document.getElementById (id)) {var divID = document.getElementById (id); var divArray = document.getElementsByClassName (toggleID);

for (var i = 0; i <divArray.length; i ++) {divArray .style.display = "none"; }

divID.style.display = "bloc";

}

returnează fals;

}

/*

* Cod care trebuie rulat într-o anumită ordine * / $ (document). Ready (funcție () {/ * * Încărcare în conținut din fișiere * /

/*

* Forțați o mică întârziere pentru a încărca datele * / setTimeout (funcție () {/ * * Evidențiați tot codul care a fost încărcat în * / $ („cod pre”). Fiecare (funcție (i, bloc) { hljs.highlightBlock (bloc);});}, 1000); });

Pentru a face acest portofoliu ușor de modificat și de gestionat, am decis să folosesc un format de o pagină. Păstrează totul în cea mai mare parte local și face ca încărcarea conținutului să fie mai rapidă.

toggleSection

Am folosit valorile clasei pentru a gestiona conținutul care trebuie afișat sau ascuns, deoarece de cele mai multe ori folosesc divs pentru a separa și grupa mai multe elemente. Puteți utiliza acest lucru pentru a grupa și butoane individuale, dar necesită o verificare suplimentară înainte de a seta afișajul „bloc” pentru a nu permite afișarea conținutului.

încărcarea documentelor

Am inclus acest lucru deoarece este, în general, dezordonat să incluzi o grămadă de cod de programare independent în fișiere HTML obișnuite. Putem folosi această metodă de evidențiere dinamică pentru a forța procesul să aibă loc după ce încărcăm conținut din alte fișiere.

$ ('# mq2-intro'). load ("fișiere / tutoriale / mq2 / mq2-intro / content.html");

Acesta este un exemplu al modului în care vom încărca conținut.

Pasul 5: Bara de navigare

Inițiale

• Acasă
• Despre mine
• Tutoriale pentru proiecte
• Contacteaza-ma

• Bara de navigare este cel mai complex element din toate portofoliul. Combinația pură de clase îl face ca un puzzle care necesită să te uiți continuu la cartea de reguli.

  Funcționalitatea Bootstrap

  Bootstrap funcționează în esență prin diferite valori de clasă. Privind elementul „nav” în sine, nu este prea dificil să se stabilească scopul fiecărei clase:

  „Navbar” nostru este opțiunea „md” (mediu), „expand”, „întunecat”. Și l-am „fixat” la „vârf”. Pare confuz, deoarece este un amestec de identificatori, dar dacă îi privești ca adjective pentru element, devine mult mai ușor să înțelegi ce se întâmplă.

  Marca

  Marca este sigla și numele tipic pe care le vedeți pe fiecare site din partea din stânga sus. Este un element de design încercat și adevărat, pe care fiecare utilizator îl așteaptă în acest moment.

  Notă: Etichetele „i” sunt de fapt icoanele FontAwesome, iar aceste etichete le primiți de pe pagina oricărei pictograme.

  Toggler / Buton pliabil (mobil)

  Acest buton apare numai pe dispozitivele mobile. Dar, din moment ce am inclus în declarația „nav” că bara de navigare trebuie să fie extensibilă, aceste elemente se conectează între ele prin ID-urile lor și identificatorii de „comutare de date”.

  Legături de bara de navigare (partea stângă)

  Aceste legături depind în totalitate de ce categorii aveți nevoie pentru portofoliul dvs. Am inclus câteva dintre exemplele tipice ca punct de plecare, dar nimeni nu este același. Este posibil să nu aveți nevoie de o secțiune „Tutoriale”, deoarece vă concentrați pe realizarea de sculpturi de artă. Fiecare articol „li” poate fi copiat și lipit, astfel încât odată ce vă dați seama de ce aveți nevoie, este ușor să setați navigarea în sus.

  Notă: Puteți crea tehnic meniuri derulante în cadrul altor meniuri derulante, dar nu l-aș recomanda decât dacă sunteți dispus să adăugați mai multe CSS și Javascript pentru ca interfața să pară curată.

  Legături de bara de navigare (partea dreaptă)

  Dând listei corecte de linkuri clasa „ml-auto”, Bootstrap separă uniform cele două liste în mod egal. Aceasta creează diviziunea curată a părții stânga și dreapta. Am decis să folosesc acest spațiu pentru link-uri de socializare, deoarece este o metodă foarte obișnuită și populară pentru a-ți crește prezența. Dacă acest lucru nu este relevant, puteți renunța la aceste linkuri pentru o bară de căutare, informații de conectare etc. Dar nu uitați că este un spațiu important de utilizat. Și asemănător cu linkurile de navbar din partea stângă, le puteți copia și lipi și pe acestea.

  Notă: Dacă intenționați să utilizați linkurile pe care le-am configurat deja, schimbați „numele de utilizator” în linkurile „href” propriu-zise.

  Pasul 6: Pagina principală

  

  

  

  Numele dumneavoastră

  Programator Writer Gamer

  Această secțiune și paginile dvs. ulterioare de conținut vor depinde de ceea ce doriți să introduceți în portofoliu. Evident, nu pot aborda fiecare tip de conținut, dar am încercat să includ imagini, pdf-uri, videoclipuri, blocuri de coduri, unele dintre incluziunile tipice.

  Format tabel

  Pagina de pornire este configurată pentru a acționa ca un tabel. Nu m-aș baza pe abilitățile mele uimitoare de proiectare pentru a-ți crea produsul final, dar am adăugat diferitele variante ale combinațiilor de rânduri și coloane pentru a arăta că este foarte dinamic și flexibil. Puteți crea 3 rânduri și 2 coloane pentru a avea butoane în stânga și conținut în dreapta, sau puteți face ceva complet diferit. Este nevoie doar de puțină experimentare.

  Butoane

  Acestea funcționează în esență ca butoanele obișnuite. Singura integrare reală Bootstrap de aici provine din stilul care se potrivește cu restul temei. În caz contrar, creați câte butoane sau cât de puține butoane aveți nevoie pentru a vă prezenta conținutul și apoi asigurați-vă că potriviți linkurile href cu ID-urile pentru divs.

  Conținutul codului de programare

  Etichetele „cod” sunt etichetele implicite pe care highlight.js le folosește pentru a gestiona toate evidențierea. Dacă vă amintiți din fișierul javascript.js, există o secțiune de încărcat în conținut din alte fișiere.

  $ ('# home-programmer-macro'). load ("files / home / watchLoot.mac");

  • Prima parte a acestui aspect caută „id-ul” elementului în care doriți să inserați conținutul.
  • A doua parte este locația fișierului în care doriți să încărcați.

  Notă: conținutul nu se va încărca complet, deoarece există șanse mari să editați această pagină web local în loc de pe un server. Acest lucru poate fi abordat printr-o serie de moduri diferite pe care le voi aborda la sfârșitul instructabilului.

  Video YouTube

  „Iframe” încorporat provine de fapt chiar de pe YouTube. Nu voi explica pe larg cum să le obțineți, dar când accesați „Distribuiți” un videoclip, există o opțiune „Încorporați” care vă va ajuta să generați codul necesar pentru a vă arăta videoclipul pe pagina web.

  Pasul 7: Privind înainte

  Există șanse foarte mari să nu acoperi un element sau un tip de conținut pe care doriți să îl includeți pe site-ul dvs. web. Din fericire, există multe opțiuni bune pentru a face singur pașii următori.

  Documentația Bootstrap

  Documentația Bootstrap este un loc minunat pentru a începe dacă căutați elemente care sunt pre-programate și care au exemple pe care le puteți copia și lipi în portofoliul dvs. pentru a experimenta. Nu am atins cărți, carusele sau formulare. Vă recomandăm să căutați secțiunea „Componente” pentru a vedea opțiunile.

  W3Schools

  W3Schools este un site minunat unde puteți afla aproape orice este legat de programarea și dezvoltarea web. Sunt mult mai inteligenți decât mine și acoperă aproape orice funcționalitate HTML, CSS și Javascript la care vă puteți gândi.

  Găzduirea portofoliului dvs

  Acest instructable vă învață cum să vă găzduiți site-ul web pe câteva platforme diferite. Aceștia sunt pașii pe care trebuie să îi faceți dacă doriți să le puteți arăta oamenilor, recrutorilor etc. portofoliul dvs.

  Experimentează și distrează-te

  Singurul mod în care veți crea un portofoliu excelent este experimentând și încercând orice și tot ce pare interesant. Multe portofolii și site-uri web de design elegante folosesc efecte de tranziție excelente sau fundaluri dinamice, dar niciunul dintre ele nu a fost pre-realizat.