Kako narediti elegantno in preprosto spletno mesto s koraki Bootstrap 4: 7

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:04

Namen tega navodila je dati tistim, ki poznajo programiranje - HTML ali kako drugače - preprost uvod v izdelavo spletnega portfelja z Bootstrapom 4. Povedal vam bom začetne nastavitve spletnega mesta, kako ustvariti nekaj različnih vsebinskih blokov., in nekaj težav, na katere bi lahko naleteli.

Portfelj je razdeljen na več manjših korakov, da bi ga naredili bolj obvladljivega: okvir HTML, okvir CSS, okvir Javascript, vrstica za krmarjenje in domača stran (z vsebinskimi bloki).

Če vas moja pojasnila o nečem še zmedejo, pustite komentar s svojimi vprašanji, predlogi ali poguglajte element, zaradi katerega ste zmedeni. Za programiranje spletnih mest in Bootstrapa je na voljo veliko virov.

Opomba: Ta priročnik ni vseobsegajoč in ga ne bi smeli uporabljati kot nadomestek za učenje programiranja v HTML, CSS ali Javascript.

Potrebna sredstva

• Bootstrap 4
• jQuery 3.3.1

Neobvezni viri

• FontAwesome
• Googlove pisave
• highlight.js

Če želite preskočiti na celoten primer ali si oglejte skladišče:

• Popoln primer
• Repozitorij

Opomba: Za svoje primere bom na slikah uporabljal Sublime, če želite slediti istemu urejevalniku besedil.

1. korak: Nastavitev

Nastavitev mape

1. Nekje ustvarite mapo, kamor lahko shranite vse, kar bomo naložili. To bo vaš korenski imenik za portfelj.
2. Ustvarite mapo znotraj mape z imenom "bootstrap"
3. Ustvarite drugo mapo v korenski mapi portfelja z imenom "jquery"

Mapa portfelja

| ----- zagonski pas | ----- jquery

Bootstrap 4

1. Obiščite njihovo spletno mesto in kliknite gumb »Prenesi« pod razdelkom »Prevedeni CSS in JS«.
2. Shranite datoteko.zip v mapo »Prenosi« ali na drugo priročno mesto.
3. Odprite datoteko.zip in izvlecite mapi »css« in »js« v mapo »bootstrap«, ki ste jo naredili prej.

jQuery

1. Obiščite njihovo spletno mesto in prenesite »nekomprimirano, razvojno jQuery 3.3.1«
2. Shranite to datoteko v mapo »jquery«, ki ste jo ustvarili prej.

Ko začnemo delati na dejanskem portfelju, so vsi okviri pripravljeni.

2. korak: okvir HTML (index.html)

Tvoje ime

Ta okvir ni nič preveč zapletenega, vendar želim razložiti splošne namene nastavitve.

Bootstrap JS Po jQuery

Zdi se, da obstaja nekakšno prekrivanje med datoteko Javascript Bootstrapa in datoteko jQuery. Nisem preizkusil, kako obsežno je to prekrivanje, vendar je en primer funkcionalnost spustnega menija, ki ga uporabljam v vrstici za krmarjenje. Če najprej naložite Bootstrap, spustni gumb ne deluje.

FontAwesome

Če ste že delali na spletnem razvoju, verjetno veste, kaj je FontAwesome. Če pa temu ni tako, gre za nabor ikon, ki vključuje nabor orodij za dodatno prilagoditev. To je neverjetno uporabno, če ste kot jaz in nimate nobenega umetniškega talenta.

hightlight.js

Ta okvir omogoča dinamično označevanje kode na spletnih straneh. Uvozite ga lahko tako kot ostale okvire, ki jih uporabljam, če uporabljate samo običajne programske jezike, obstaja pa tudi možnost za prenos jezikov po meri. Slednjo možnost sem izbral zaradi nekaj makroniziranja in ini jezikov, vendar je vse odvisno od vas.

Opomba: Bodite pozorni na kraje, kjer uporabljam trdo kodirane povezave do datotek, kot sta dve ikoni in highlight.js. Ker sta potrebna samo Bootstrap in jQuery, lahko dodate ali odstranite katero koli drugo ogrodje. Če odstranite katero koli, ne pozabite odstraniti vrstic kode, ki ustrezajo kasneje.

3. korak: okvir CSS (style.css)

/ * * Upajmo, da boste z zmanjšanjem barve bg na sivo in spreminjanjem sloga pisave olajšali uporabo spletnega mesta */ body {ozadje: sivo; font-family: 'Open Sans', sans-serif; }

/*

* To zagotavlja, da je vrstica za krmarjenje na vrhu vsega */ nav {z-index: 9999; }

/*

* Tako bi bilo besedilo odstavka bolj berljivo */ p {font-size: 18px; rob na vrhu: 5px; margin-bottom: 5px; }

/*

* To zagotavlja, da so vsi moji kodni bloki pravilno oblikovani */ code {text-align: left; }

/*

* Nočem, da imajo seznami označbe */ li {list-style-type: none; }

/*

* Povezave so privzeto modre in želim, da se ujemajo s slogom Bootstrapa */ li a, a {color: white; }

/*

* Oznako razreda povežem z div, ki vsebuje navbar, da se prepričam, da se vsebina ne prekriva */.navFix {padding-bottom: 70px; }

/*

* Povečana velikost razteza navbar */.social-media {font-size: 1.3em; }

/*

* Privzeta barva osvetlitve spustnih povezav je bela */.dropdown-meni a: hover {background-color: #212529; }

/*

* Prisilite dive, ki prikazujejo pdfs do določene višine */.pdfFill {height: 45rem; }

/*

* Dodajte nekaj razmika med gumbi in kodnimi bloki */.codeStyle {padding-top: 30px; }

V ta okvir sem vključil vsebinsko temelječe elemente CSS, da vam poskušam prihraniti nekaj časa kasneje. Vsi so zelo preprosti in so večinoma spremembe kakovosti življenja, ki bralcem olajšajo interakcijo s portfeljem.

nav z-index

Imam zelo omejeno količino izkušenj s spletnim razvojem, zato nisem prepričan, ali je to pogosta težava pri izvajanju navigacijske vrstice Bootstrap, vendar se bo navigacijska vrstica brez specifikacije orientacije od spredaj nazaj dejansko prikazala pod drugo vsebino, kot je Bootstrapove kartice. To je najbolj opazno pri zložljivi navbarni vrstici, vendar sem zaradi varnosti vseeno vključil spremembo indeksa.

poravnava kode

Ker za poravnavo elementov običajno uporabljam Bootstrapova razreda "justify-content-center" in "text-center", ne želim, da bi moja koda podedovala to naravnano naravo. To je enostavno popraviti s prepisom vseh sprememb poravnave in polaganjem kodnih oznak v levo: tako se ohrani razmik med zavihki v kodi.

oblazinjenje navFix

Ko je navigacijska vrstica Bootstrapa prilepljena na vrh strani, se pod njo naloži vsebina. Verjamem, da se to zgodi, ker je vrstica navzgor dejansko prilepljena na vrh okna namesto na stran samo. Ne glede na to se to odpravi s povečanjem prostora med navigacijsko vrstico in ostalo vsebino.

višina pdf

Privzeta višina datotek pdf je neverjetno majhna. V bistvu ni berljivo, zato sem spremenil višino, da sem poskušal dati dovolj prostora za približno eno stran naenkrat.

4. korak: Okvir Javascript (javascript.js)

/ * * To poišče kateri koli element razreda 'toggle' in ga skrije ali razkrije */ 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 = "brez"; }

divID.style.display = "blokiraj";

}

return false;

}

/*

* Koda, ki jo je treba zagnati v določenem vrstnem redu */ $ (dokument).ready (function () {/ * * Naloži vsebino iz datotek */

/*

* Prisilite majhno zamudo pri nalaganju podatkov */ setTimeout (function () {/ * * Označite vso kodo, ki je bila naložena v */ $ ('pre code'). Vsak (function (i, block) { hljs.highlightBlock (blokiraj);});}, 1000); });

Zaradi lažjega spreminjanja in upravljanja tega portfelja sem se odločil za obliko na eni strani. Večinoma ohranja vse lokalno in pospešuje nalaganje vsebine.

toggleSection

Vrednosti razreda sem uporabil za upravljanje vsebine, ki jo je treba prikazati ali skriti, ker večino časa uporabljam divs za ločevanje in združevanje več elementov skupaj. To lahko uporabite tudi za združevanje posameznih gumbov, vendar je potrebno dodatno preverjanje, preden nastavite prikaz »blokiraj«, da se ne prikaže nobena vsebina.

nalaganje dokumentov

To sem vključil, ker je na splošno grdo vključiti kup neodvisne programske kode v običajne datoteke HTML. To metodo dinamičnega označevanja lahko uporabimo, da prisilimo postopek, potem ko naložimo vsebino iz drugih datotek.

$ ('#mq2-intro'). load ("datoteke/vaje/mq2/mq2-intro/content.html");

To je primer, kako bomo naložili vsebino.

5. korak: Vrstica za krmarjenje

Začetnice

• Domov
• O meni
• Vadnice za projekte
• Kontaktiraj me

Navigacijska vrstica je najbolj zapleten element od vsega v portfelju. Sama kombinacija razredov je podobna uganki, ki od vas zahteva, da nenehno pregledujete pravilnik.

Funkcionalnost zagonskega pasu

Bootstrap v bistvu deluje skozi različne vrednosti razreda. Če pogledamo sam element "nav", ni težko ugotoviti namena vsakega razreda:

Naša "navbar" je možnost "md" (srednja), "razširljiva" in "temna". In "popravili" smo ga na "vrh". Zdi se zmedeno, ker gre za množico identifikatorjev, vendar če nanje gledate kot pridevnike za element, postane veliko lažje razumeti, kaj se dogaja.

Blagovna znamka

Blagovna znamka je tipičen logotip in ime, ki ga vidite na vsakem spletnem mestu v zgornjem levem kotu. To je preizkušen element oblikovanja, ki ga na tej točki pričakuje vsak uporabnik.

Opomba: Oznake "i" so dejansko ikone FontAwesome in te oznake dobite s katere koli strani ikone.

Gumb za preklop/zložljiv gumb (mobilno)

Ta gumb se prikaže samo na mobilnih napravah. Ker pa smo v deklaracijo "nav" vključili, da je treba navigacijsko vrstico razširiti, se ti elementi med seboj povezujejo prek svojih ID-jev in identifikatorjev "data-toggle".

Povezave Navbar (leva stran)

Te povezave so v celoti odvisne od kategorij, ki jih potrebujete za svoj portfelj. Kot izhodišče sem vključil nekaj tipičnih primerov, vendar nihče ni enak. Morda ne boste potrebovali razdelka "Vadnice", ker se osredotočate na izdelavo umetniških skulptur. Vsak element "li" je mogoče kopirati in prilepiti, zato, ko ugotovite, kaj potrebujete, je enostavno nastaviti navigacijo.

Opomba: Tehnično lahko ustvarite spustne menije znotraj drugih spustnih menijev, vendar tega ne priporočam, razen če ste pripravljeni dodati več CSS in Javascript, da bo vmesnik videti čist.

Povezave Navbar (desna stran)

S pravilnim seznamom povezav razreda "ml-auto" Bootstrap enakomerno loči oba seznama. Tako nastane čista delitev leve in desne strani. Odločil sem se, da bom ta prostor uporabil za povezave do družabnih medijev, ker je to zelo pogosta in priljubljena metoda za povečanje vaše prisotnosti. Če to ni pomembno, lahko te povezave odstranite za iskalno vrstico, podatke za prijavo itd. Vendar ne pozabite, da je to pomemben prostor za uporabo. Podobno kot povezave navbar na levi strani lahko tudi kopirate in prilepite.

Opomba: Če nameravate uporabljati povezave, ki sem jih že nastavil, spremenite »uporabniško ime« v samih povezavah »href«.

6. korak: Domača stran

Tvoje ime

Programer pisatelj Gamer

Ta razdelek in vaše naslednje vsebinske strani bodo odvisne od tega, kaj želite dati v svoj portfelj. Očitno ne morem obravnavati vsakega posameznega tipa vsebine, vendar sem poskušal vključiti slike, pdf -je, videoposnetke, kodne bloke, nekatere tipične vključke.

Oblika tabele

Domača stran je nastavljena tako, da deluje kot miza. Pri ustvarjanju končnega izdelka se ne bi zanašal na svoje neverjetne oblikovalske sposobnosti, ampak sem dodal različne variacije kombinacij vrstic in stolpcev, da pokažem, da je zelo dinamičen in prilagodljiv. Ustvarite lahko 3 vrstice in 2 stolpca, ki imajo gumbe na levi strani in vsebino na desni, ali pa naredite nekaj povsem drugega. Potrebno je le malo eksperimentiranja.

Gumbi

Te funkcije v bistvu delujejo kot običajni gumbi. Edina prava integracija Bootstrapa tukaj izhaja iz stila, ki se ujema s preostalo temo. V nasprotnem primeru ustvarite toliko gumbov ali toliko, kolikor jih potrebujete za predstavitev svoje vsebine, nato pa povezave href ujemajte z ID -ji za dive.

Vsebina programske kode

Oznake "code" so privzete oznake, ki jih highlight.js uporablja za upravljanje vseh označb. Če se spomnite iz datoteke javascript.js, obstaja razdelek za nalaganje vsebine iz drugih datotek.

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

• Prvi del tega išče "id" elementa, v katerega želite vstaviti vsebino.
• Drugi del je lokacija datoteke, ki jo želite naložiti.

Opomba: Vsebina se dejansko ne naloži v celoti, ker obstaja velika verjetnost, da to spletno stran urejate lokalno, namesto na strežniku. To lahko rešimo na več različnih načinov, ki jih bom obravnaval na koncu navodila.

YouTube Video

Vgrajeni "iframe" dejansko prihaja iz YouTuba samega. Ne bom podrobno razlagal, kako jih pridobiti, toda ko greste na "Skupna raba" videoposnetka, obstaja možnost "Vdelaj", ki vam bo pomagala ustvariti kodo, potrebno za prikaz vašega videoposnetka na spletni strani.

Korak 7: Pogled naprej

Obstaja velika verjetnost, da nisem zajel nekega elementa ali vrste vsebine, ki jo želite vključiti na svoje spletno mesto. Na srečo obstaja veliko dobrih možnosti, da sami naredite naslednje korake.

Bootstrapova dokumentacija

Bootstrapova dokumentacija je odličen začetek, če iščete elemente, ki so vnaprej programirani in imajo primere, ki jih lahko kopirate in prilepite v svoj portfelj za eksperimentiranje. Nisem se dotaknil kartic, vrtiljakov ali obrazcev. Priporočam, da pogledate razdelek »Komponente« in si ogledate možnosti.

W3 šole

W3Schools je čudovito spletno mesto, na katerem se lahko naučite skoraj vsega, kar je povezano s spletnim programiranjem in razvojem. So veliko pametnejši od mene in pokrivajo skoraj vse funkcije HTML, CSS in Javascript, na katere se spomnite.

Gostovanje vašega portfelja

Ta Instructable vas uči, kako gostiti svoje spletno mesto na nekaj različnih platformah. To so koraki, ki jih morate narediti, če želite ljudem, kadrovskim kadrom itd. Pokazati svoj portfelj.

Eksperimentirajte in se zabavajte

Edini način, da naredite odličen portfelj, je, da eksperimentirate in poskusite vse, kar je videti zanimivo. Številni portfelji in spletna mesta za oblikovanje uporabljajo odlične učinke prehoda ali dinamično ozadje, vendar nobeden od njih ni bil vnaprej izdelan.