Sådan laver du et slankt og enkelt websted med Bootstrap 4: 7 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:27

Formålet med denne Instructable er at give dem, der er fortrolige med programmering - HTML eller på anden måde - en enkel introduktion til at lave en online portefølje med Bootstrap 4. Jeg vil guide dig gennem den indledende opsætning af webstedet, hvordan du opretter et par forskellige indholdsblokke, og et par problemer, du måske støder på.

Porteføljen er opdelt i en række mindre trin for at forsøge at gøre det mere overskueligt: HTML -ramme, CSS -ramme, Javascript -ramme, navigationslinje og hjemmeside (med indholdsblokke).

Hvis mine forklaringer på noget stadig efterlader dig forvirret, er du velkommen til at efterlade en kommentar med dine spørgsmål, forslag eller google det element, du er forvirret over. Der er mange ressourcer til rådighed til programmering af websteder og Bootstrap.

Bemærk: Denne vejledning er ikke altomfattende og bør ikke bruges som en erstatning for at lære at programmere i HTML, CSS eller Javascript.

Påkrævede ressourcer

• Bootstrap 4
• jQuery 3.3.1

Valgfrie ressourcer

• FontAwesome
• Google skrifttyper
• highlight.js

Hvis du gerne vil springe til hele eksemplet eller tage et kig på depotet:

• Fuldt eksempel
• Depot

Bemærk: Jeg vil bruge Sublime på billederne til mine eksempler, hvis du gerne vil følge med den samme tekstredigerer.

Trin 1: Opsætning

Mappeopsætning

1. Opret en mappe et sted, hvor du kan gemme alt, hvad vi skal downloade. Dette vil være din rodmappe til porteføljen.
2. Opret en mappe inde i den der hedder "bootstrap"
3. Opret en anden mappe i din rodporteføljemappe, der hedder "jquery"

Porteføljemappe

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

Bootstrap 4

1. Besøg deres websted, og klik på knappen "Download" under sektionen "Kompileret CSS og JS".
2. Gem.zip -filen i mappen "Downloads" eller en anden bekvem placering.
3. Åbn.zip -filen, og udpak mapperne "css" og "js" til "bootstrap" -mappen, som du lavede tidligere.

jQuery

1. Besøg deres websted og download "ukomprimeret, udvikling jQuery 3.3.1"
2. Gem den fil inde i "jquery" -mappen, du lavede tidligere.

Alle rammerne er nu klar til, når vi begynder at arbejde med den egentlige portefølje.

Trin 2: HTML Frame (index.html)

Dit navn

Denne ramme er ikke alt for kompleks, men jeg vil forklare de generelle formål med opsætningen.

Bootstrap JS Efter jQuery

Der ser ud til at være en slags overlapning mellem Bootstraps Javascript -fil og jQuery's. Jeg testede ikke for at se, hvor omfattende dette overlapning er, men et eksempel er dropdown -funktionaliteten, som jeg bruger i navigationslinjen. Hvis du først indlæser i Bootstrap, fungerer rullemenuen ikke.

FontAwesome

Hvis du har foretaget nogen webudvikling, er det sandsynligt, at du ved, hvad FontAwesome er. Men hvis det ikke er tilfældet, er det et ikonsæt, der indeholder et værktøjskasse til ekstra tilpasning. Det er utrolig nyttigt, hvis du er som mig og slet ikke har noget kunstnerisk talent.

hightlight.js

Denne ramme gør det muligt at fremhæve dynamisk kode på websider. Du kan importere det som resten af de rammer, jeg bruger, hvis du kun bruger almindelige programmeringssprog, men der er også en mulighed for at downloade et brugerdefineret sæt sprog. Jeg valgte den sidste mulighed på grund af et par makro- og ini -sprog, men det er helt op til dig.

Bemærk: Vær opmærksom på de steder, hvor jeg bruger hårdkodede links til filer som de to ikoner og highlight.js. Da kun Bootstrap og jQuery er påkrævet, er du velkommen til at tilføje eller fjerne andre rammer. Hvis du fjerner nogen, skal du huske at fjerne de kodelinjer, der svarer senere.

Trin 3: CSS Frame (style.css)

/ * * Forhåbentlig nedtoner bg -farven til grå og ændrer skrifttypestilen hjemmesiden lettere at forbruge */ body {baggrund: grå; font-family: 'Open Sans', sans-serif; }

/*

* Dette sikrer, at navigationslinjen er oven på alt */ nav {z-index: 9999; }

/*

* Dette skulle gøre afsnitsteksten mere læsbar */ p {font-size: 18px; margin-top: 5px; margin-bund: 5px; }

/*

* Dette sikrer, at alle mine kodeblokke er formateret korrekt */ code {text-align: left; }

/*

* Jeg vil ikke have, at lister har punkterne */ li {list-style-type: none; }

/*

* Links er som standard blå, og jeg vil have dem til at stemme overens med Bootstraps stil */ li a, en {farve: hvid; }

/*

* Jeg knytter et klassemærke til en div, der indeholder navigationslinjen for at sikre, at indholdet ikke overlapper */.navFix {padding-bottom: 70px; }

/*

* Øget størrelse strækker navbar */.social-media {font-size: 1.3em; }

/*

* Standardfarve for fremhævning af dropdown-links er hvid */.dropdown-menu a: svæver {baggrund-farve: #212529; }

/*

* Tving divs, der viser pdfs til en bestemt højde */.pdfFill {height: 45rem; }

/*

* Tilføj lidt afstand mellem knapperne og kodeblokkene */.codeStyle {padding-top: 30px; }

Jeg inkluderede de indholdsbaserede CSS-elementer i denne ramme for at prøve at spare dig lidt tid senere. De er alle meget enkle og er for det meste livskvalitetsændringer, der gør det lettere for læsere at interagere med porteføljen.

nav z-indeks

Jeg har en meget begrænset mængde webudviklingserfaring, så jeg er ikke sikker på, om dette er et almindeligt problem ved implementering af Bootstraps navigationslinje, men uden nogen orienteringsspecifikation forfra-til-bag, vil navigationslinjen faktisk blive vist under andet indhold som f.eks. Bootstraps kort. Dette er mest mærkbart med den sammenklappelige navbar, men jeg inkluderede indeksændringen alligevel for sikkerheden.

kodejustering

Da jeg typisk bruger Bootstraps "justify-content-center" og "text-center" klasser til at justere elementer, vil jeg ikke have, at min kode skal arve den centerjusterede karakter. Dette løses let ved at overskrive eventuelle justeringsændringer og gøre kodetags venstrejusteret: dette bevarer tabsafstand i koden.

navFix polstring

Når Bootstraps navigationslinje sidder fast på toppen af siden, indlæses indholdet under den. Jeg tror, at dette sker, fordi navigationslinjen faktisk sidder fast på toppen af visningsporten i stedet for selve siden. Uanset dette løses dette ved at øge mellemrummet mellem navigationslinjen og resten af indholdet.

pdf højde

Standardhøjden på pdf -filer er utrolig lille. Det er i det væsentlige ulæseligt, så jeg ændrede højden for at prøve at give plads nok til cirka en side ad gangen.

Trin 4: Javascript Frame (javascript.js)

/ * * Dette søger efter ethvert element med klassen 'toggle' 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 = "blok";

}

return falsk;

}

/*

* Kode, der skal køres i en bestemt rækkefølge */ $ (dokument).ready (funktion () {/ * * Indlæse indhold fra filer */

/*

* Tving en lille forsinkelse til at indlæse dataene */ setTimeout (funktion () {/ * * Fremhæv al den kode, der er indlæst i */ $ ('forudkode'). Hver (funktion (i, blok) { hljs.highlightBlock (blok);});}, 1000); });

For at gøre denne portefølje let at ændre og administrere besluttede jeg mig for at bruge et format på en side. Det holder for det meste lokalt og gør indholdet hurtigere.

toggleSektion

Jeg brugte klasseværdier til at styre, hvilket indhold der skal vises eller skjules, fordi jeg for det meste bruger divs til at adskille og gruppere flere elementer sammen. Du kan også bruge dette til at gruppere individuelle knapper, men det kræver en ekstra kontrol, før du indstiller "blok" -visningen, så der ikke kan vises noget indhold.

dokumentindlæsning

Jeg inkluderede dette, fordi det generelt er rodet at inkludere en masse uafhængig programmeringskode i almindelige HTML -filer. Vi kan bruge denne metode til dynamisk fremhævning til at tvinge processen til at finde sted, efter at vi har indlæst indhold fra andre filer.

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

Dette er et eksempel på, hvordan vi indlæser indhold.

Trin 5: Navigationslinje

Initialer

• Hjem
• Om mig
• Projekter Tutorials
• Kontakt mig

• Navigationslinjen er det mest komplekse element ud af alt i porteføljen. Den blotte kombination af klasser gør det lidt som et puslespil, der kræver, at du løbende ser på regelbogen.

  Bootstrap -funktionalitet

  Bootstrap fungerer hovedsageligt gennem forskellige klasseværdier. Når man ser på selve "nav" -elementet, er det ikke for svært at fastslå formålet med hver klasse:

  Vores "navbar" er indstillingen "md" (medium), "udvid", "mørk". Og vi "fikset" det til "toppen". Det ser forvirrende ud, fordi det er et virvar af identifikatorer, men hvis du ser på dem som adjektiver for elementet, bliver det meget lettere at forstå, hvad der sker.

  Mærke

  Mærket er det typiske logo og navn, som du ser på hvert websted øverst til venstre. Det er et gennemprøvet designelement, som hver bruger forventer på dette tidspunkt.

  Bemærk: "i" -mærkerne er faktisk FontAwesome -ikonerne, og du får disse tags fra ethvert ikons side.

  Toggler/sammenklappelig knap (mobil)

  Denne knap vises kun på mobile enheder. Men da vi inkluderede i "nav" -erklæringen om, at navigationslinjen skal kunne udvides, forbinder disse elementer hinanden via deres id'er og "data-toggle" -identifikatorer.

  Navbar -links (venstre side)

  Disse links afhænger helt af, hvilke kategorier du har brug for til din portefølje. Jeg tog et par af de typiske eksempler med som udgangspunkt, men ingen er ens. Du har muligvis ikke brug for en sektion "Selvstudier", fordi du fokuserer på at lave kunstskulpturer. Hver "li" -post kan kopieres og indsættes, så når du har fundet ud af, hvad du har brug for, er det let at konfigurere navigationen.

  Bemærk: Du kan teknisk oprette rullemenuer inden for andre rullemenuer, men jeg vil ikke anbefale det, medmindre du er villig til at tilføje mere CSS og Javascript for at få grænsefladen til at se ren ud.

  Navbar -links (højre side)

  Ved at give den rigtige liste med links "ml-auto" -klassen adskiller Bootstrap de to lister jævnt. Dette skaber den rene venstre og højre sideafdeling. Jeg besluttede at bruge dette rum til links til sociale medier, fordi det er en meget almindelig og populær metode til at øge din tilstedeværelse. Hvis det ikke er relevant, kan du slette disse links til en søgelinje, loginoplysninger osv. Men husk bare, at det er vigtigt at bruge. Og i lighed med navigationslinjelinkene i venstre side kan du også kopiere og indsætte disse.

  Bemærk: Hvis du planlægger at bruge de links, jeg allerede har opsat, skal du ændre "brugernavnet" i selve "href" -linkene selv.

  Trin 6: Hjemmeside

  

  

  

  Dit navn

  Programmerer Writer Gamer

  Dette afsnit og dine efterfølgende indholdssider afhænger af, hvad du vil lægge i din portefølje. Jeg kan naturligvis ikke adressere hver enkelt indholdstype, men jeg forsøgte at inkludere billeder, PDF'er, videoer, kodeblokke, nogle af de typiske inklusioner.

  Tabelformat

  Hjemmesiden er konfigureret til at fungere som en tabel. Jeg ville ikke stole på mine fantastiske designfærdigheder for at skabe dit slutprodukt, men jeg tilføjede de forskellige variationer af række- og kolonnekombinationer for at vise, at det er meget dynamisk og fleksibelt. Du kan oprette 3 rækker og 2 kolonner for at have knapper til venstre og indhold til højre, eller du kan gøre noget helt andet. Det kræver bare lidt eksperimenter.

  Knapper

  Disse fungerer i det væsentlige som almindelige knapper gør. Den eneste rigtige Bootstrap -integration her stammer fra stylingen, der matcher resten af temaet. Ellers skal du oprette så mange eller så små knapper, som du har brug for for at vise dit indhold, og derefter sørge for at matche href -linkene med ID'erne for divs.

  Programmering af kodeindhold

  "Kode" -mærkerne er standardmærkerne, som highlight.js bruger til at administrere alle fremhævningerne. Hvis du husker fra javascript.js -filen, er der en sektion, der skal indlæses indhold fra andre filer.

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

  • Den første del af dette leder efter "id" for det element, du vil indsætte indholdet i.
  • Den anden del er placeringen af den fil, du vil indlæse.

  Bemærk: Indholdet indlæses faktisk ikke helt, fordi der er en god chance for, at du redigerer denne webside lokalt i stedet for på en server. Dette kan løses på en række forskellige måder, som jeg vil behandle i slutningen af Instructable.

  YouTube -video

  Den indlejrede "iframe" kommer faktisk fra YouTube selv. Jeg vil ikke udførligt forklare, hvordan du får dem, men når du går til "Del" en video, er der en "Integrer" -indstilling, der hjælper dig med at generere den kode, der er nødvendig for at vise din video på websiden.

  Trin 7: Ser fremad

  Der er en meget god chance for, at jeg ikke dækkede et element eller en indholdstype, som du vil inkludere på dit websted. Heldigvis er der mange gode muligheder for dig selv at tage de næste trin.

  Bootstraps dokumentation

  Bootstraps dokumentation er et godt sted at starte, hvis du leder efter elementer, der er forudprogrammeret og har eksempler, du kan kopiere og indsætte i din portefølje til at eksperimentere med. Jeg rørte ikke ved kort, karruseller eller formularer. Jeg anbefaler stærkt, at du kigger igennem sektionen "Komponenter" for at se mulighederne.

  W3Skoler

  W3Schools er et vidunderligt websted, hvor du kan lære alt om webprogrammering og udvikling. De er meget klogere end jeg, og de dækker næsten alle HTML-, CSS- og Javascript -funktioner, du kan tænke på.

  Hosting af din portefølje

  Denne instrukser lærer dig, hvordan du hoster dit websted på et par forskellige platforme. Dette er de trin, du skal tage, hvis du vil kunne vise folk, rekrutterere osv. Din portefølje.

  Eksperimenter og have det sjovt

  Den eneste måde, du kan lave en god portefølje på, er ved at eksperimentere og prøve alt, hvad der ser interessant ud. Mange smarte designporteføljer og websteder bruger store overgangseffekter eller dynamiske baggrunde, men ingen af dem kom på forhånd.