Kaip sukurti elegantišką ir paprastą svetainę naudojant „Bootstrap 4: 7“veiksmus

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:46

Šios instrukcijos tikslas yra supažindinantiems su programavimu - HTML ar kitu būdu - paprastą įvadą į internetinio portfelio kūrimą naudojant „Bootstrap 4.“. Apžvelgsiu pradinę svetainės sąranką, kaip sukurti keletą skirtingų turinio blokų ir keletas problemų, su kuriomis galite susidurti.

Aplankas suskirstytas į keletą mažesnių žingsnių, kad būtų lengviau jį valdyti: HTML rėmas, CSS rėmelis, „JavaScript“rėmas, naršymo juosta ir pagrindinis puslapis (su turinio blokais).

Jei mano paaiškinimai kažkam vis dar kelia painiavą, nedvejodami palikite komentarą su savo klausimais, pasiūlymais ar „Google“elementu, dėl kurio esate sutrikęs. Yra daug išteklių programuojant svetaines ir „Bootstrap“.

Pastaba: šis vadovas nėra visapusiškas ir neturėtų būti naudojamas kaip pakaitalas norint išmokti programuoti HTML, CSS ar „Javascript“.

Reikalingi ištekliai

• Bootstrap 4
• „jQuery“3.3.1

Neprivalomi ištekliai

• FontAwesome
• „Google“šriftai
• paryškinti.js

Jei norite pereiti prie viso pavyzdžio arba pažvelgti į saugyklą:

• Visas pavyzdys
• Saugykla

Pastaba: jei naudosite tą patį teksto redaktorių, paveikslėliuose naudosiu „Sublime“.

1 veiksmas: sąranka

Aplanko sąranka

1. Sukurkite aplanką, kuriame galite saugoti viską, ką atsiųsime. Tai bus pagrindinis jūsų aplanko katalogas.
2. Sukurkite aplanką to pavadinimo „bootstrap“viduje
3. Sukurkite kitą aplanką savo pagrindiniame aplanko aplanke pavadinimu „jquery“

Aplanko aplankas

| ----- įkrovos diržas | ----- jquery

Bootstrap 4

1. Apsilankykite jų svetainėje ir spustelėkite mygtuką „Atsisiųsti“, esantį po skyriumi „Sudėtiniai CSS ir JS“.
2. Išsaugokite.zip failą aplanke „Atsisiuntimai“arba kitoje patogioje vietoje.
3. Atidarykite.zip failą ir išskleiskite aplankus „css“ir „js“į anksčiau sukurtą aplanką „bootstrap“.

„jQuery“

1. Apsilankykite jų svetainėje ir atsisiųskite „nesuspaustą, kūrimo„ jQuery 3.3.1 “
2. Išsaugokite tą failą anksčiau sukurtame aplanke „jquery“.

Visos sistemos yra paruoštos, kai pradedame dirbti su tikru portfeliu.

2 veiksmas: HTML rėmelis (index.html)

Tavo vardas

Šis rėmas nėra pernelyg sudėtingas, tačiau noriu paaiškinti bendruosius sąrankos tikslus.

„Bootstrap JS“po „jQuery“

Atrodo, kad „Bootstrap“„Javascript“failas ir „jQuery“failas sutampa. Nebandžiau, kiek šis sutapimas yra, bet vienas pavyzdys yra išskleidžiamojo meniu funkcija, kurią naudoju naršymo juostoje. Jei pirmiausia įkeliate „Bootstrap“, išskleidžiamasis mygtukas neveikia.

FontAwesome

Jei kūrėte žiniatinklį, greičiausiai žinote, kas yra „FontAwesome“. Tačiau jei taip nėra, tai yra piktogramų rinkinys, kuriame yra įrankių rinkinys papildomam pritaikymui. Tai neįtikėtinai naudinga, jei esate toks kaip aš ir visiškai neturite meninio talento.

hightlight.js

Ši sistema leidžia dinamiškai paryškinti kodą tinklalapiuose. Galite jį importuoti, kaip ir kitas mano naudojamas sistemas, jei naudojate tik įprastas programavimo kalbas, tačiau taip pat yra galimybė atsisiųsti pasirinktinį kalbų rinkinį. Aš pasirinkau pastarąjį variantą dėl kelių makrokomandų ir ini kalbų, bet tai visiškai priklauso nuo jūsų.

Pastaba: žinokite apie vietas, kuriose naudoju koduotas nuorodas į failus, pvz., Dvi piktogramas ir „highlight.js“. Be to, kadangi reikalingi tik „Bootstrap“ir „jQuery“, nedvejodami pridėkite arba pašalinkite visas kitas sistemas. Jei pašalinsite, nepamirškite pašalinti atitinkamų kodo eilučių vėliau.

3 veiksmas: CSS kadras (style.css)

/ * * Tikimės, kad atspalvio sumažinimas iki pilkos spalvos ir šrifto stiliaus pakeitimas palengvins svetainės naudojimą */ body {background: grey; font-family: 'Open Sans', sans-serif; }

/*

* Tai užtikrina, kad naršymo juosta yra ant visų */ nav {z-index: 9999; }

/*

* Tai turėtų padaryti pastraipos tekstą lengviau skaitomą */ p {font-size: 18px; viršutinė paraštė: 5 taškų; paraštė-apačia: 5 taškų; }

/*

* Tai užtikrina, kad visi mano kodo blokai suformatuoti teisingai */ code {text-align: left; }

/*

* Nenoriu, kad sąrašuose būtų ženkleliai */ li {list-style-type: none; }

/*

* Pagal numatytuosius nustatymus nuorodos yra mėlynos spalvos ir noriu, kad jos atitiktų „Bootstrap“stilių */ li a, a {spalva: balta; }

/*

* Aš susieju klasės žymą su div, kuriame yra naršymo juosta, kad įsitikinčiau, jog turinys nesutampa */.navFix {padding-bottom: 70px; }

/*

* Padidėjęs dydis išplečia naršymo juostą */.social-media {font-size: 1.3em; }

/*

* Numatytoji išskleidžiamųjų nuorodų paryškinimo spalva yra balta */.dropdown-menu a: hover {background-color: #212529; }

/*

* Priversti dainas rodyti pdf failus iki tam tikro aukščio */.pdfFill {aukštis: 45rem; }

/*

* Pridėkite tarpą tarp mygtukų ir kodų blokų */.codeStyle {padding-top: 30px; }

Į šį kadrą įtraukiau turiniu pagrįstus CSS elementus, kad vėliau sutaupytumėte. Visi jie yra labai paprasti ir dažniausiai yra gyvenimo kokybės pokyčiai, palengvinantys skaitytojų bendravimą.

nav z-indeksas

Turiu labai ribotą žiniatinklio kūrimo patirtį, todėl nesu tikras, ar tai yra dažna problema, kai diegiama „Bootstrap“naršymo juosta, tačiau be jokios orientacijos iš priekio į atgal naršymo juosta iš tikrųjų bus rodoma kitame turinyje, pvz. „Bootstrap“kortelės. Tai labiausiai pastebima naudojant sulankstomą naršymo juostą, tačiau aš vis tiek įtraukiau indekso pakeitimą dėl saugumo.

kodo derinimas

Kadangi elementams lygiuoti paprastai naudoju „Bootstrap“„õiginti turinio centrą“ir „teksto centrą“klases, nenoriu, kad mano kodas paveldėtų tą centre suderintą pobūdį. Tai lengva išspręsti perrašius visus lygiavimo pakeitimus ir suvedus kodo žymas kairėn: taip išsaugomas tarpas tarp kortelių.

navFix paminkštinimas

Kai „Bootstrap“naršymo juosta įstrigo puslapio viršuje, po juo bus įkeltas turinys. Manau, kad taip atsitinka todėl, kad naršymo juosta iš tikrųjų įstrigo peržiūros srities viršuje, o ne pačiame puslapyje. Nepaisant to, tai išspręsta padidinant tarpą tarp naršymo juostos ir likusio turinio.

pdf aukštis

Numatytasis pdf failų aukštis yra neįtikėtinai mažas. Tai iš esmės neskaitoma, todėl pakeičiau aukštį, kad pabandyčiau suteikti pakankamai vietos maždaug vienam puslapiui vienu metu.

4 veiksmas: „JavaScript“rėmelis (javascript.js)

/ * * Tai ieško bet kurio elemento su klase „toggle“ir jį slepia arba slepia */ 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 = "nėra"; }

divID.style.display = "blokas";

}

grąžinti klaidingą;

}

/*

* Kodas, kurį reikia paleisti tam tikra tvarka */ $ (dokumentas). Ready (function () {/ * * Įkelti turinį iš failų */

/*

* Priversti nedidelį vėlavimą įkelti duomenis */ setTimeout (function () {/ * * Pažymėkite visą kodą, kuris buvo įkeltas į */ $ ('pre code'). Kiekvienas (funkcija (i, blokas) { hljs.highlightBlock (blokas);});}, 1000); });

Kad šį portfelį būtų lengva keisti ir valdyti, nusprendžiau naudoti vieno puslapio formatą. Tai iš esmės palieka viską vietinį ir pagreitina turinio įkėlimą.

toggleSekcija

Naudojau klasės vertes, norėdamas valdyti, kokį turinį reikia rodyti ar slėpti, nes dažniausiai naudoju divs, kad atskirtų ir sugrupuotų kelis elementus. Tai taip pat galite naudoti norėdami sugrupuoti atskirus mygtukus, tačiau prieš nustatydami „bloko“ekraną reikia papildomai patikrinti, kad nebūtų rodomas joks turinys.

dokumentų įkėlimas

Aš tai įtraukiau, nes paprastai yra netvarkinga į įprastus HTML failus įtraukti daugybę nepriklausomo programavimo kodo. Mes galime naudoti šį dinaminio paryškinimo metodą, kad priverstume procesą įvykdyti, kai įkeliame turinį iš kitų failų.

$ ('#mq2-intro'). load ("files/tutorials/mq2/mq2-intro/content.html");

Tai pavyzdys, kaip įkeliame turinį.

5 veiksmas: naršymo juosta

Inicialai

• Namai
• Apie mane
• Projektų vadovėliai
• Susisiek su manimi

• Naršymo juosta yra sudėtingiausias elementas iš viso portfelio. Vien tik klasių derinys yra tarsi galvosūkis, reikalaujantis nuolat žiūrėti taisyklių knygą.

  „Bootstrap“funkcionalumas

  „Bootstrap“iš esmės veikia per skirtingas klasės reikšmes. Žvelgiant į patį „nav“elementą, nėra labai sunku išsiaiškinti kiekvienos klasės tikslą:

  Mūsų „naršymo juosta“yra parinktis „md“(vidutinė), „išplėsti“, „tamsi“. Ir mes „pritvirtinome“jį prie „viršaus“. Tai atrodo painu, nes tai identifikatorių kratinys, tačiau jei į juos žiūrite kaip į elemento būdvardžius, tampa daug lengviau suprasti, kas vyksta.

  Prekės ženklas

  Prekės ženklas yra tipiškas logotipas ir pavadinimas, kurį matote kiekvienoje svetainėje viršuje kairėje. Tai išbandytas dizaino elementas, kurio šiuo metu tikisi kiekvienas vartotojas.

  Pastaba: „i“žymės iš tikrųjų yra „FontAwesome“piktogramos, ir jūs gaunate šias žymas iš bet kurio piktogramos puslapio.

  Perjungimo/sulankstomas mygtukas (mobilusis)

  Šis mygtukas rodomas tik mobiliuosiuose įrenginiuose. Bet kadangi į „nav“deklaraciją įtraukėme, kad naršymo juostą reikia išplėsti, šie elementai jungiasi vienas su kitu per savo ID ir „duomenų perjungimo“identifikatorius.

  Naršymo juostos nuorodos (kairėje pusėje)

  Šios nuorodos visiškai priklauso nuo to, kokių kategorijų jums reikia jūsų portfeliui. Į pradžią įtraukiau keletą tipiškų pavyzdžių, tačiau niekas nėra tas pats. Jums gali nereikėti skyriaus „Pamokos“, nes sutelkiate dėmesį į meno skulptūrų kūrimą. Kiekvieną „li“elementą galima nukopijuoti ir įklijuoti, todėl išsiaiškinę, ko jums reikia, nesunku nustatyti navigaciją.

  Pastaba: techniškai galite sukurti išskleidžiamuosius meniu kituose išskleidžiamuosiuose meniu, bet aš to nerekomenduočiau, nebent norite pridėti daugiau CSS ir „Javascript“, kad sąsaja atrodytų švari.

  Naršymo juostos nuorodos (dešinėje pusėje)

  Pateikdamas tinkamą nuorodų sąrašą „ml-auto“klasei, „Bootstrap“tolygiai atskiria du sąrašus. Tai sukuria švarų kairės ir dešinės pusės padalijimą. Aš nusprendžiau naudoti šią erdvę socialinės žiniasklaidos nuorodoms, nes tai yra labai įprastas ir populiarus būdas padidinti jūsų buvimą. Jei tai nėra aktualu, galite atšaukti šias nuorodas ieškodami paieškos juostos, prisijungimo informacijos ir pan. Tačiau tiesiog atminkite, kad tai yra svarbi erdvė. Panašiai kaip ir naršymo juostos nuorodos kairėje, galite jas nukopijuoti ir įklijuoti.

  Pastaba: jei planuojate naudoti jau nustatytas sąsajas, pakeiskite „vartotojo vardą“tikrose „href“nuorodose.

  6 veiksmas: pagrindinis puslapis

  

  

  

  Tavo vardas

  Programuotojas Rašytojas Žaidėjas

  Šis skyrius ir tolesni turinio puslapiai priklausys nuo to, ką norite įtraukti į savo portfelį. Akivaizdu, kad negaliu atsižvelgti į kiekvieną turinio tipą, bet bandžiau įtraukti vaizdus, pdf, vaizdo įrašus, kodų blokus ir kai kuriuos tipiškus įtraukimus.

  Lentelės formatas

  Pagrindinis puslapis yra sukurtas veikti kaip stalas. Kurdamas jūsų galutinį produktą nepasitikėčiau savo nuostabiais dizaino įgūdžiais, tačiau pridėjau įvairių eilučių ir stulpelių derinių variantų, norėdamas parodyti, kad jis yra labai dinamiškas ir lankstus. Galite sukurti 3 eilutes ir 2 stulpelius, kad mygtukai būtų kairėje, o turinys - dešinėje, arba galite padaryti kažką visiškai kitokio. Tereikia šiek tiek eksperimentuoti.

  Mygtukai

  Šios funkcijos iš esmės veikia kaip įprasti mygtukai. Vienintelė tikra „Bootstrap“integracija čia kyla iš stiliaus, kuris atitinka likusią temą. Priešingu atveju sukurkite tiek mygtukų, kiek jums reikia, kad parodytumėte savo turinį, tada įsitikinkite, kad „href“nuorodos atitinka „divs“ID.

  Programavimo kodo turinys

  Žymės „kodas“yra numatytosios žymos, kurias „highlight.js“naudoja visiems paryškinimams valdyti. Jei prisimenate iš failo javascript.js, yra skyrius, kuriame galima įkelti turinio iš kitų failų.

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

  • Pirmoje jo dalyje ieškomas elemento, į kurį norite įterpti turinį, „id“.
  • Antroji dalis yra failo, į kurį norite įkelti, vieta.

  Pastaba: turinys iš tikrųjų nebus visiškai įkeliamas, nes yra didelė tikimybė, kad šį tinklalapį redaguojate vietoje, o ne serveryje. Tai galima išspręsti įvairiais būdais, kuriuos aptarsiu instrukcijos pabaigoje.

  „YouTube“vaizdo įrašas

  Įterptas „iframe“iš tikrųjų yra iš paties „YouTube“. Aš išsamiai nepaaiškinsiu, kaip juos gauti, tačiau kai einate į „Bendrinti“vaizdo įrašą, yra parinktis „Įterpti“, kuri padės sugeneruoti kodą, būtiną jūsų vaizdo įrašui rodyti tinklalapyje.

  7 žingsnis: žiūrėkite į priekį

  Labai didelė tikimybė, kad neaprašiau tam tikro elemento ar turinio tipo, kurį norite įtraukti į savo svetainę. Laimei, yra daug gerų variantų, kuriuos galite atlikti patys.

  „Bootstrap“dokumentacija

  „Bootstrap“dokumentacija yra puiki vieta pradėti, jei ieškote iš anksto užprogramuotų elementų ir turite pavyzdžių, kuriuos galite nukopijuoti ir įklijuoti į savo portfelį, kad galėtumėte eksperimentuoti. Neliečiau kortelių, karuselių ar formų. Labai rekomenduoju peržiūrėti parinktis „Komponentai“.

  W3 Mokyklos

  „W3Schools“yra nuostabi svetainė, kurioje galite sužinoti beveik viską, kas susiję su žiniatinklio programavimu ir kūrimu. Jie yra daug protingesni nei aš ir apima beveik visas HTML, CSS ir „JavaScript“funkcijas, apie kurias galite galvoti.

  Jūsų portfelio talpinimas

  Ši instrukcija moko jus, kaip priglobti savo svetainę keliose skirtingose platformose. Tai yra veiksmai, kurių turite imtis, jei norite parodyti žmonėms, darbdaviams ir pan.

  Eksperimentuokite ir linksminkitės

  Vienintelis būdas sukurti puikų portfelį yra eksperimentuoti ir išbandyti viską, kas atrodo įdomu. Daugelyje išgalvotų dizaino portfelių ir svetainių naudojami puikūs perėjimo efektai arba dinamiškas fonas, tačiau nė vienas iš jų nebuvo iš anksto paruoštas.