Kuidas luua klanitud ja lihtne veebisait Bootstrap 4: 7 sammuga

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:47

Selle juhendi eesmärk on anda neile, kes tunnevad programmeerimist - HTML -i või muul viisil - lihtsat sissejuhatust veebiportfelli koostamiseks Bootstrap 4 -ga. Ma tutvustan teile veebisaidi esialgset seadistamist, kuidas luua paar erinevat sisuplokki ja mõned probleemid, millega võite kokku puutuda.

Portfell on jagatud mitmeks väiksemaks sammuks, et muuta see paremini hallatavaks: HTML -raam, CSS -raam, Javascripti raam, navigeerimisriba ja avaleht (koos sisuplokkidega).

Kui minu selgitused millegi kohta jätavad teid endiselt segadusse, jätke julgelt kommentaar oma küsimuste, soovituste või google'iga, mille osas olete segaduses. Veebisaitide ja Bootstrapi programmeerimiseks on saadaval palju ressursse.

Märkus. See juhend ei ole kõikehõlmav ja seda ei tohiks kasutada HTML-i, CSS-i või Javascripti programmeerimise õppimiseks.

Nõutavad ressursid

• Bootstrap 4
• jQuery 3.3.1

Valikulised ressursid

• FontAwesome
• Google'i fondid
• highlight.js

Kui soovite minna täieliku näite juurde või vaadata hoidlat:

• Täielik näide
• Hoidla

Märkus. Kasutan piltidel Sublime'i oma näidete jaoks, kui soovite sama tekstiredaktoriga kaasas käia.

1. toiming: seadistamine

Kausta seadistamine

1. Looge kuhugi kaust, kuhu saate salvestada kõik, mida me alla laadime. See on teie portfelli juurkataloog.
2. Looge selle kausta nimega "bootstrap"
3. Looge oma juurmapi kausta sisse teine kaust nimega „jquery”

Portfelli kaust

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

Bootstrap 4

1. Külastage nende veebisaiti ja klõpsake jaotise „Kompileeritud CSS ja JS” all nuppu „Laadi alla”.
2. Salvestage.zip -fail kausta „Allalaadimised” või muusse mugavasse kohta.
3. Avage.zip -fail ja ekstraheerige kaustad „css” ja „js” varem loodud kausta „bootstrap”.

jQuery

1. Külastage nende veebisaiti ja laadige alla tihendamata arendusjQuery 3.3.1
2. Salvestage see fail varem loodud kausta „jquery”.

Kõik raamistikud on nüüd valmis tegeliku portfelli kallal töötamiseks.

2. toiming: HTML -raam (index.html)

Sinu nimi

See raam pole midagi liiga keerulist, kuid ma tahan selgitada seadistuse üldisi eesmärke.

Bootstrap JS Pärast jQuery

Tundub, et Bootstrapi Javascripti faili ja jQuery faili vahel on mingisugune kattumine. Ma ei testinud, et näha, kui ulatuslik see kattumine on, kuid üks näide on rippmenüü funktsioon, mida kasutan navigeerimisribal. Kui laadite esmalt Bootstrapi, ei tööta rippmenüü nupp.

FontAwesome

Kui olete veebiarendust teinud, on tõenäoline, et teate, mis on FontAwesome. Kuid kui see pole nii, on see ikoonikomplekt, mis sisaldab tööriistakomplekti täiendavaks kohandamiseks. See on uskumatult kasulik, kui olete nagu mina ja teil pole absoluutselt kunstiannet.

hightlight.js

See raamistik võimaldab veebilehtedel dünaamilist koodi esiletõstmist. Saate selle importida nagu ülejäänud raamistikud, mida kasutan, kui kasutate ainult tavalisi programmeerimiskeeli, kuid seal on ka võimalus alla laadida kohandatud keelte komplekt. Valisin viimase variandi mõne makro- ja ini -keele tõttu, kuid see on täielikult teie otsustada.

Märkus. Olge teadlik kohtadest, kus kasutan kõvakodeeritud linke failidele, nagu kaks ikooni ja highlight.js. Samuti, kuna ainult Bootstrap ja jQuery on vajalikud, lisage või eemaldage muud raamistikud. Kui eemaldate mõne, ärge unustage eemaldada hiljem vastavad koodiridad.

3. samm: CSS -raam (style.css)

/ * * Loodetavasti muudab bg värvi halliks toonimine ja fondistiili muutmine veebisaidi tarbimise lihtsamaks */ body {background: hall; font-family: 'Open Sans', sans-serif; }

/*

* See tagab, et navigeerimisriba on kõige peal */ nav {z-index: 9999; }

/*

* See peaks muutma lõigu teksti loetavamaks */ p {font-size: 18px; ülemine äär: 5 pikslit; all-äär: 5 pikslit; }

/*

* See tagab, et kõik minu koodiplokid on õigesti vormindatud */ code {text-align: left; }

/*

* Ma ei taha, et loendites oleks täppe */ li {list-style-type: none; }

/*

* Lingid on vaikimisi sinised ja ma tahan, et need vastaksid Bootstrapi stiilile */ li a, a {värv: valge; }

/*

* Ma seon klassisildi diviga, mis sisaldab navigeerimisriba, veendumaks, et sisu ei kattuks */.navFix {padding-bottom: 70px; }

/*

* Suurem suurus venitab navigeerimisriba */.social-media {font-size: 1.3em; }

/*

* Rippmenüüde esiletõstmise värv on valge */.dropdown-menu a: hover {background-color: #212529; }

/*

* Sundida sukeldumisi, mis näitavad pdf -e teatud kõrgusele */.pdfFill {kõrgus: 45rem; }

/*

* Lisage nuppude ja koodiplokkide vahele vahekaugus */.codeStyle {padding-top: 30px; }

Kaasasin sellesse raami sisupõhised CSS-elemendid, et proovida teid hiljem säästa. Kõik need on väga lihtsad ja on enamasti elukvaliteedi muutused, mis muudavad lugejatega portfoolioga suhtlemise lihtsamaks.

nav z-indeks

Veebiarenduse kogemus on mul väga piiratud, nii et ma pole kindel, kas see on Bootstrapi navigeerimisriba rakendamisel tavaline probleem, kuid ilma igasuguste ees-taga orientatsioonispetsifikatsioonideta kuvatakse navigeerimisriba tegelikult muu sisu all. Bootstrapi kaardid. See on kõige paremini märgatav kokkupandava navigeerimisriba puhul, kuid lisasin turvalisuse huvides siiski indeksi muutmise.

koodi joondamine

Kuna ma tavaliselt kasutan elementide joondamiseks Bootstrapi klasse "õigusta sisukeskus" ja "tekstikeskus", ei taha ma, et minu kood päriks selle keskele joondatud olemuse. Seda saab hõlpsasti parandada, kirjutades kõik joondamismuudatused üle ja muutes koodimärgendid vasakule joondatuks: see säilitab koodis vahekaugused.

navFix polster

Kui Bootstrapi navigeerimisriba on lehe ülaossa kinni jäänud, laaditakse selle alla sisu. Usun, et see juhtub seetõttu, et navigeerimisriba on tegelikult kinni jäänud vaateava ülaserva, mitte lehe enda külge. Sellest hoolimata parandatakse see, suurendades navigeerimisriba ja ülejäänud sisu vahelist ruumi.

pdf kõrgus

PDF -failide vaikekõrgus on uskumatult väike. See on sisuliselt loetamatu, nii et muutsin kõrgust, et proovida piisavalt ruumi umbes ühele lehele korraga.

4. toiming: Javascripti raam (javascript.js)

/ * * See otsib mis tahes elementi, millel on klass „toggle” ja kas peidab või peidab selle */ 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 = "puudub"; }

divID.style.display = "plokk";

}

tagastama vale;

}

/*

* Kood, mis tuleb käivitada teatud järjekorras */ $ (dokument).ready (function () {/ * * Laadige failidest sisu */

/*

* Sundida andmete laadimiseks väike viivitus */ setTimeout (function () {/ * * Tõstke esile kõik koodid, mis on laaditud */ $ ('pre code'). Igaüks (function (i, block) { hljs.highlightBlock (plokk);});}, 1000); });

Selle portfelli muutmise ja haldamise hõlbustamiseks otsustasin kasutada üheleheküljelist vormingut. See hoiab enamasti kõik kohalikud ja muudab sisu laadimise kiiremaks.

toggleSection

Kasutasin klassi väärtusi, et hallata, millist sisu tuleb näidata või peita, sest enamasti kasutan divs -i mitme elemendi eraldamiseks ja rühmitamiseks. Saate seda kasutada ka üksikute nuppude rühmitamiseks, kuid see nõuab täiendavat kontrolli enne "blokeerimise" kuva seadistamist, et sisu ei kuvataks.

dokumentide laadimine

Lisasin selle sellepärast, et tavaliselt on räpane lisada hunnik sõltumatut programmeerimiskoodi tavalistesse HTML -failidesse. Selle dünaamilise esiletõstmise meetodi abil saame protsessi sundida toimuma pärast seda, kui oleme teistest failidest sisu laadinud.

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

See on näide selle kohta, kuidas me sisu laadime.

5. samm: navigeerimisriba

Initsiaalid

• Kodu
• Minust
• Projektide õpetused
• Võta minuga ühendust

• Navigeerimisriba on portfelli kõige keerulisem element. Juba ainuüksi klasside kombinatsioon muudab selle mõistatuseks, mis nõuab reeglite raamatu pidevat vaatamist.

  Bootstrap funktsionaalsus

  Bootstrap toimib sisuliselt erinevate klassiväärtuste kaudu. Vaadates elementi "nav", pole iga klassi eesmärgi väljaselgitamine liiga keeruline:

  Meie navigeerimisriba on valik "md" (keskmine), "laiendamine", "tume". Ja me "fikseerisime" selle "tippu". See tundub segane, sest see on identifikaatorite segamini ajamine, kuid kui vaadata neid elemendi omadussõnadena, muutub toimuva mõistmine palju lihtsamaks.

  Bränd

  Bränd on tüüpiline logo ja nimi, mida näete igal veebisaidil vasakus ülanurgas. See on proovitud ja tõeline disainielement, mida iga kasutaja sel hetkel ootab.

  Märkus: "i" sildid on tegelikult FontAwesome ikoonid ja need märgendid saate igalt ikooni lehelt.

  Lüliti/kokkupandav nupp (mobiil)

  See nupp kuvatakse ainult mobiilseadmetes. Kuid kuna lisasime "nav" deklaratsiooni, et navigeerimisriba peab olema laiendatav, ühendavad need elemendid üksteisega oma ID-de ja "andmete vahetamise" identifikaatorite kaudu.

  Navigeerimislingid (vasakul küljel)

  Need lingid sõltuvad täielikult sellest, milliseid kategooriaid oma portfelli jaoks vajate. Lisasin lähtepunktiks mõned tüüpilised näited, kuid keegi pole sama. Teil ei pruugi vaja minna jaotist "Õpetused", sest keskendute kunstiskulptuuride meisterdamisele. Iga "li" üksust saab kopeerida ja kleepida, nii et kui olete vajaliku aru saanud, on navigeerimist lihtne seadistada.

  Märkus. Te saate tehniliselt rippmenüüsid teiste rippmenüüde raames luua, kuid ma ei soovitaks seda, kui te pole valmis lisama rohkem CSS -i ja Javascripti, et muuta liides puhas.

  Navigeerimislingi lingid (paremal)

  Andes õigele linkide loendile klassi "ml-auto", eraldab Bootstrap need loendid ühtlaselt. See loob puhta vasak- ja parempoolse jaotuse. Otsustasin kasutada seda ruumi sotsiaalmeedia linkide jaoks, sest see on väga levinud ja populaarne meetod teie kohaloleku suurendamiseks. Kui see pole asjakohane, võite need lingid otsida otsinguriba, sisselogimisteabe jne jaoks. Kuid pidage meeles, et see on oluline ruum, mida kasutada. Sarnaselt vasakul asuva navigeerimisriba linkidega saate ka neid kopeerida ja kleepida.

  Märkus. Kui kavatsete kasutada juba seadistatud linke, muutke tegelikes "href" linkides kasutajanime.

  6. samm: avaleht

  

  

  

  Sinu nimi

  Programmeerija Kirjanik Mängija

  See jaotis ja teie järgnevad sisulehed sõltuvad sellest, mida soovite oma portfelli lisada. Ilmselgelt ei saa ma iga sisutüüpi käsitleda, kuid proovisin lisada pilte, pdf -e, videoid, koodiplokke ja mõnda tüüpilist kaasamist.

  Tabeli vorming

  Koduleht on seadistatud toimima tabelina. Ma ei loodaks oma lõpptoote loomisel oma hämmastavatele disainioskustele, vaid lisasin ridade ja veergude kombinatsioonide erinevad variatsioonid, et näidata, et see on väga dünaamiline ja paindlik. Saate luua 3 rida ja 2 veergu, et nupud oleksid vasakul ja sisu paremal, või saate teha midagi muud. See nõuab vaid väikest katsetamist.

  Nupud

  Need toimivad sisuliselt nagu tavalised nupud. Ainus tõeline Bootstrapi integreerimine tuleneb sellest, et stiil sobib ülejäänud teemaga. Vastasel juhul looge oma sisu tutvustamiseks nii palju või nii vähe nuppe ja veenduge siis, et href -lingid sobiksid divide ID -dega.

  Programmeerimiskoodi sisu

  Märgendid "kood" on vaikimärgendid, mida highlight.js kasutab kogu esiletõstmise haldamiseks. Kui mäletate seda failist javascript.js, on teistest failidest sisu laadimiseks jaotis.

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

  • Selle esimeses osas otsitakse selle elemendi "id", kuhu soovite sisu sisestada.
  • Teine osa on faili asukoht, kuhu soovite laadida.

  Märkus. Sisu ei laadita tegelikult täielikult, kuna on suur tõenäosus, et muudate seda veebilehte serveri asemel kohapeal. Seda saab lahendada mitmel erineval viisil, mida käsitlen juhendi lõpus.

  YouTube'i video

  Sisseehitatud "iframe" pärineb tegelikult YouTube'ist endast. Ma ei selgita põhjalikult, kuidas neid hankida, kuid kui lähete video „Jaga” juurde, on olemas valik „Embed”, mis aitab teil genereerida koodi, mis on vajalik teie video kuvamiseks veebilehel.

  7. samm: vaadake edasi

  On väga hea võimalus, et ma ei käsitlenud mõnda elementi või sisutüüpi, mida soovite oma veebisaidile lisada. Õnneks on teil palju häid võimalusi, kuidas järgmisi samme ise teha.

  Bootstrapi dokumentatsioon

  Bootstrapi dokumentatsioon on suurepärane koht alustamiseks, kui otsite eelprogrammeeritud elemente ja teil on näiteid, mida saate katsetamiseks oma portfelli kopeerida ja kleepida. Ma ei puudutanud kaarte, karusselle ega vorme. Soovitan tungivalt valikute nägemiseks vaadata jaotist "Komponendid".

  W3Koolid

  W3Schools on suurepärane veebisait, kus saate õppida peaaegu kõike, mis on seotud veebiprogrammeerimise ja -arendusega. Nad on palju targemad kui mina ja hõlmavad peaaegu kõiki HTML-, CSS- ja Javascripti funktsioone, mida te arvate.

  Portfelli majutamine

  See juhend juhendab, kuidas oma veebisaiti mitmel erineval platvormil hostida. Need on sammud, mida peate tegema, kui soovite näidata inimestele, värbajatele jne oma portfelli.

  Katsetage ja nautige

  Ainus viis suurepärase portfelli loomiseks on katsetada ja proovida kõike ja kõike, mis tundub huvitav. Paljud väljamõeldud disainiportfellid ja veebisaidid kasutavad suurepäraseid üleminekuefekte või dünaamilist tausta, kuid ükski neist ei tulnud ette.