Hvordan lage et slank og enkelt nettsted med Bootstrap 4: 7 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:22

Formålet med denne instruksjonsboken er å gi de som er kjent med programmering - HTML eller på annen måte - en enkel introduksjon til å lage en online portefølje med Bootstrap 4. Jeg vil lede deg gjennom det første oppsettet av nettstedet, hvordan du lager noen forskjellige innholdsblokker, og noen få problemer du kan støte på.

Porteføljen er delt inn i en rekke mindre trinn for å prøve å gjøre den mer håndterbar: HTML -ramme, CSS -ramme, Javascript -ramme, navigasjonslinje og hjemmesiden (med innholdsblokker).

Hvis forklaringene mine på noe fortsatt gjør deg forvirret, kan du legge igjen en kommentar med spørsmål, forslag eller google elementet du er forvirret om. Det er mange ressurser tilgjengelig for programmering av nettsteder og Bootstrap.

Merk: Denne veiledningen er ikke altomfattende og bør ikke brukes som en erstatning for å lære å programmere i HTML, CSS eller Javascript.

Nødvendige ressurser

• Bootstrap 4
• jQuery 3.3.1

Valgfrie ressurser

• FontAwesome
• Google Fonts
• highlight.js

Hvis du vil hoppe til hele eksemplet eller ta en titt på depotet:

• Fullt eksempel
• Oppbevaringssted

Merk: Jeg vil bruke Sublime i bildene for eksemplene mine hvis du vil følge med det samme tekstredigeringsprogrammet.

Trinn 1: Konfigurere

Mappeoppsett

1. Lag en mappe et sted hvor du kan lagre alt vi skal laste ned. Dette vil være rotkatalogen for porteføljen.
2. Lag en mappe inne i den som heter "bootstrap"
3. Lag en annen mappe i rotporteføljemappen din som heter "jquery"

Porteføljemappe

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

Bootstrap 4

1. Besøk deres nettsted og klikk på "Last ned" -knappen under "Kompilert CSS og JS" -delen.
2. Lagre.zip -filen i "Nedlastinger" -mappen eller et annet praktisk sted.
3. Åpne.zip -filen og pakk ut "css" og "js" -mappene til "bootstrap" -mappen som du lagde tidligere.

jQuery

1. Besøk deres nettsted og last ned “ukomprimert, utvikling jQuery 3.3.1”
2. Lagre filen inne i "jquery" -mappen du lagde tidligere.

Alle rammene er nå klare for når vi begynner å jobbe med selve porteføljen.

Trinn 2: HTML -ramme (index.html)

Navnet ditt

Denne rammen er ikke altfor kompleks, men jeg vil forklare de generelle formålene med oppsettet.

Bootstrap JS Etter jQuery

Det ser ut til å være en slags overlapping mellom Bootstraps Javascript -fil og jQuery's. Jeg testet ikke for å se hvor omfattende denne overlappingen er, men ett eksempel er rullegardinfunksjonen som jeg bruker i navigasjonslinjen. Hvis du laster inn Bootstrap først, fungerer ikke rullegardinmenyen.

FontAwesome

Hvis du har gjort noen webutvikling, er sjansen stor for at du vet hva FontAwesome er. Men hvis det ikke er tilfelle, er det et ikon som inneholder et verktøykasse for ekstra tilpasning. Det er utrolig nyttig hvis du er som meg og absolutt ikke har noe kunstnerisk talent i det hele tatt.

hightlight.js

Dette rammeverket gir mulighet for dynamisk kodeutheving på nettsider. Du kan importere det som resten av rammene jeg bruker hvis du bare bruker vanlige programmeringsspråk, men det er også et alternativ for å laste ned et tilpasset språk. Jeg valgte det siste alternativet på grunn av noen få makro- og ini -språk, men det er helt opp til deg.

Merk: Vær oppmerksom på stedene hvor jeg bruker hardkodede lenker til filer som de to ikonene og highlight.js. Siden bare Bootstrap og jQuery er påkrevd, kan du gjerne legge til eller fjerne andre rammer. Hvis du fjerner noen, husk å fjerne kodelinjene som korresponderer senere.

Trinn 3: CSS Frame (style.css)

/ * * Forhåpentligvis nedtoning av bg -fargen til grå og endring av skriftstil gjør nettstedet lettere å konsumere */ body {bakgrunn: grå; font-family: 'Open Sans', sans-serif; }

/*

* Dette gjør at navigasjonslinjen er på toppen av alt */ nav {z-index: 9999; }

/*

* Dette bør gjøre avsnittsteksten mer lesbar */ p {font-size: 18px; margin-top: 5px; margin-bunn: 5px; }

/*

* Dette sørger for at alle kodeblokkene mine er riktig formatert */ code {text-align: left; }

/*

* Jeg vil ikke at lister skal ha kulene */ li {list-style-type: none; }

/*

* Lenker er blå som standard, og jeg vil at de skal stemme overens med Bootstraps stil */ li a, en {farge: hvit; }

/*

* Jeg knytter en klassemerke til en div som inneholder navigasjonsfeltet for å sikre at innholdet ikke overlapper */.navFix {padding-bottom: 70px; }

/*

* Økt størrelse strekker navbar */.social-media {font-size: 1.3em; }

/*

* Standard uthevingsfarge for rullegardinmenyene er hvit */.dropdown-meny a: svev {bakgrunnsfarge: #212529; }

/*

* Tving divs som viser PDF -filer til en viss høyde */.pdfFill {høyde: 45rem; }

/*

* Legg til litt mellomrom mellom knappene og kodeblokkene */.codeStyle {padding-top: 30px; }

Jeg inkluderte de innholdsbaserte CSS-elementene i denne rammen for å prøve å spare tid senere. De er alle veldig enkle og er for det meste livskvalitetsendringer som gjør det lettere for leserne å samhandle med porteføljen.

nav z-indeks

Jeg har en veldig begrenset mengde webutviklingserfaring, så jeg er ikke sikker på om dette er et vanlig problem ved implementering av Bootstraps navigasjonslinje, men uten noen orienteringsspesifikasjon frem og tilbake, vil navigasjonsfeltet faktisk vises under annet innhold som Bootstraps kort. Dette er mest merkbart med den sammenleggbare navstangen, men jeg inkluderte indeksendringen uansett for sikkerhet.

kodejustering

Siden jeg vanligvis bruker Bootstraps "justify-content-center" og "text-center" klasser for å justere elementer, vil jeg ikke at koden min skal arve den senterjusterte naturen. Dette løses enkelt ved å overskrive eventuelle justeringsendringer og gjøre kodetegn venstrejustert: dette beholder tabellavstand i koden.

navFix polstring

Når navigasjonslinjen til Bootstrap sitter fast øverst på siden, lastes innholdet under den. Jeg tror dette skjer fordi navigasjonsfeltet faktisk sitter fast på toppen av visningsporten i stedet for selve siden. Uansett blir dette løst ved å øke mellomrommet mellom navigasjonsfeltet og resten av innholdet.

pdf høyde

Standardhøyden på pdf -filer er utrolig liten. Det er egentlig uleselig, så jeg endret høyden for å prøve å gi nok plass til omtrent én side om gangen.

Trinn 4: Javascript Frame (javascript.js)

/ * * Dette søker etter et hvilket som helst element i klassen 'veksle' og enten skjuler eller skjuler det */ 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 = "blokk";

}

return falsk;

}

/*

* Kode som må kjøres i en bestemt rekkefølge */ $ (dokument).ready (funksjon () {/ * * Last inn innhold fra filer */

/*

* Tving en liten forsinkelse til å laste inn dataene */ setTimeout (funksjon () {/ * * Merk all koden som er lastet inn i */ $ ('forhåndskode'). Hver (funksjon (i, blokk) { hljs.highlightBlock (blokk);});}, 1000); });

For å gjøre denne porteføljen enkel å endre og administrere bestemte jeg meg for å bruke et format på en side. Det holder alt lokalt for det meste og gjør innholdet raskere.

toggleSection

Jeg brukte klasseverdier for å administrere hvilket innhold som må vises eller skjules fordi jeg mesteparten av tiden bruker divs til å skille og gruppere flere elementer sammen. Du kan også bruke denne til å gruppere individuelle knapper, men det krever en ekstra sjekk før du setter "blokk" -skjermen for å ikke vise noe innhold.

dokumentinnlasting

Jeg inkluderte dette fordi det generelt er rotete å inkludere en haug med uavhengig programmeringskode i vanlige HTML -filer. Vi kan bruke denne metoden for dynamisk utheving for å tvinge prosessen til å finne sted etter at vi har lastet inn innhold fra andre filer.

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

Dette er et eksempel på hvordan vi laster inn innhold.

Trinn 5: Navigasjonslinje

Initialer

• Hjem
• Om meg
• Prosjektopplæringer
• Kontakt meg

• Navigasjonsfeltet er det mest komplekse elementet av alt i porteføljen. Den rene kombinasjonen av klasser gjør det som et puslespill som krever at du kontinuerlig ser på regelboken.

  Bootstrap -funksjonalitet

  Bootstrap fungerer hovedsakelig gjennom forskjellige klasseverdier. Når man ser på selve "nav" -elementet, er det ikke så vanskelig å fastslå formålet med hver klasse:

  Vår "navbar" er alternativet "md" (medium), "utvid", "mørkt". Og vi "fikset" det til "toppen". Det ser forvirrende ut fordi det er et virvar av identifikatorer, men hvis du ser på dem som adjektiv for elementet, blir det mye lettere å forstå hva som skjer.

  Merke

  Merket er den typiske logoen og navnet du ser på hvert nettsted øverst til venstre. Det er et velprøvd designelement som hver bruker forventer på dette tidspunktet.

  Merk: "i" -merkene er faktisk FontAwesome -ikonene, og du får disse kodene fra et ikon på siden.

  Toggler/sammenleggbar knapp (mobil)

  Denne knappen vises bare på mobile enheter. Men siden vi inkluderte i "nav" -erklæringen om at navigasjonsfeltet må være utvidbart, kobler disse elementene seg til hverandre gjennom sine ID-er og "data-veksle" -identifikatorer.

  Navbar -lenker (venstre side)

  Disse koblingene er helt avhengig av hvilke kategorier du trenger for porteføljen din. Jeg tok med noen få av de typiske eksemplene som utgangspunkt, men ingen er like. Du trenger kanskje ikke en "Tutorials" -del fordi du fokuserer på å lage kunstskulpturer. Hver "li" -element kan kopieres og limes inn, så når du har funnet ut hva du trenger, er det enkelt å sette opp navigasjonen.

  Merk: Du kan teknisk lage nedtrekksmenyer i andre rullegardinmenyer, men jeg vil ikke anbefale det med mindre du er villig til å legge til mer CSS og Javascript for å få grensesnittet til å se rent ut.

  Navbar -lenker (høyre side)

  Ved å gi den riktige listen med lenker "ml-auto" -klassen, skiller Bootstrap de to listene jevnt. Dette skaper den rene venstre og høyre sideinndeling. Jeg bestemte meg for å bruke denne plassen til lenker til sosiale medier fordi det er en veldig vanlig og populær metode for å øke din tilstedeværelse. Hvis det ikke er relevant, kan du skrap disse koblingene for en søkefelt, påloggingsinformasjon osv. Men husk at det er viktig plass å bruke. Og i likhet med navigasjonslinjelinkene på venstre side, kan du også kopiere og lime inn disse.

  Merk: Hvis du planlegger å bruke koblingene jeg allerede har konfigurert, må du endre "brukernavn" i selve "href" -linkene selv.

  Trinn 6: Hjemmeside

  

  

  

  Navnet ditt

  Programmerer Writer Gamer

  Denne delen, og de påfølgende sidene med innhold, vil avhenge av hva du vil ha i porteføljen din. Jeg kan åpenbart ikke ta opp hver enkelt innholdstype, men jeg prøvde å inkludere bilder, PDF -filer, videoer, kodeblokker, noen av de typiske inneslutningene.

  Tabellformat

  Hjemmesiden er satt opp for å fungere som et bord. Jeg ville ikke stole på mine fantastiske designferdigheter for å lage ditt sluttprodukt, men jeg la til de forskjellige variantene av rad- og kolonnekombinasjoner for å vise at det er veldig dynamisk og fleksibelt. Du kan lage 3 rader og 2 kolonner for å ha knapper til venstre og innhold til høyre, eller du kan gjøre noe helt annet. Det krever bare litt eksperimentering.

  Knapper

  Disse fungerer i hovedsak som vanlige knapper. Den eneste virkelige Bootstrap -integrasjonen her stammer fra stylingen som matcher resten av temaet. Ellers kan du opprette så mange eller så små knapper du trenger for å vise innholdet ditt, og sørg for å matche href -koblingene med ID -ene for divene.

  Programmering av kodeinnhold

  "Kode" -taggene er standardmerkene som highlight.js bruker til å administrere alle uthevingene. Hvis du husker fra javascript.js -filen, er det en seksjon for å laste inn innhold fra andre filer.

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

  • Den første delen av dette ser etter "id" for elementet du vil sette innholdet i.
  • Den andre delen er plasseringen av filen du vil laste inn.

  Merk: Innholdet vil ikke lastes inn helt fordi det er en god sjanse for at du redigerer denne websiden lokalt i stedet for på en server. Dette kan løses på en rekke forskjellige måter som jeg vil ta opp på slutten av instruksjonsboken.

  YouTube -video

  Den innebygde "iframe" kommer faktisk fra YouTube selv. Jeg vil ikke grundig forklare hvordan du får dem, men når du går til "Del" en video, er det et "Embed" -alternativ som hjelper deg med å generere koden som er nødvendig for å vise videoen din på websiden.

  Trinn 7: Ser fremover

  Det er en veldig god sjanse for at jeg ikke dekker noen elementer eller innholdstyper du vil inkludere på nettstedet ditt. Heldigvis er det mange gode alternativer for deg å ta de neste trinnene selv.

  Bootstraps dokumentasjon

  Bootstraps dokumentasjon er et flott sted å starte hvis du leter etter elementer som er forhåndsprogrammert og har eksempler du kan kopiere og lime inn i porteføljen din for å eksperimentere med. Jeg berørte ikke kort, karuseller eller skjemaer. Jeg anbefaler på det sterkeste at du ser gjennom delen "Komponenter" for å se alternativene.

  W3Skoler

  W3Schools er et fantastisk nettsted hvor du kan lære alt om webprogrammering og utvikling. De er mye smartere enn meg, og de dekker omtrent alle HTML-, CSS- og Javascript -funksjoner du kan tenke deg.

  Hosting din portefølje

  Denne instruksen lærer deg hvordan du hoster nettstedet ditt på noen få forskjellige plattformer. Dette er trinnene du må ta hvis du vil kunne vise folk, rekrutterere osv. Din portefølje.

  Eksperimenter og ha det gøy

  Den eneste måten du kan lage en flott portefølje på er å eksperimentere og prøve alt som ser interessant ut. Mange flotte designporteføljer og nettsteder bruker flotte overgangseffekter eller dynamiske bakgrunner, men ingen av dem kom på forhånd.