Byg dit første Bootstrap 4.0-sted

En hurtig tutorial for at få dig op med den nyeste version af Bootstrap.

Efter min mening er den bedste måde at lære en ny teknologi på at begynde at bygge ting fra første dag. Dette giver en følelse af mening med læringsprocessen. Plus, det er tilfredsstillende at se et produkt vises foran dig, mens du kæmper dig vej gennem materialet.

Så i denne artikel vil jeg lede dig gennem opbygning af et simpelt websted ved hjælp af Bootstrap 4.0, mens jeg fremhæver de vigtigste nye funktioner i biblioteket.

Hvis du vil lære Bootstrap 4.0 korrekt, så tjek dette gratis kursus på Scrimba!
Klik på billedet for at komme til kurset.

Lad os nu komme i gang.

Hvad vi bygger

Vi vil opbygge et grundlæggende porteføljewebsted. Selvom det er enkelt, indeholder det flere kernekoncepter, du skal lære for at bruge Bootstrap 4.0 korrekt.

Hvis du vil lege med koden, så tjek denne Scrimba legeplads. Brug det gjerne som reference, hvis du ikke forstår noget i artiklen og er nødt til at eksperimentere for dig selv.

Navbaren

Lad os starte med navlen. I Bootstrap 4.0 har de gjort navbars lettere, da de kræver lidt mindre markering nu. Her er hvad vi har brug for for at oprette den enkleste navbar mulig:

Hvilket resulterer i følgende:

Klassen bg-light gør baggrunden lysegrå, mens klassen i navbar-lys giver teksten en mørk farve. Som standard er tekstfarven i navbars blå, men jeg synes, den ser bedre ud med navbar-light-klassen.

Lad os tilføje noget indhold til vores navbar på samme niveau som mærket anker tag:

De tre klasser, man skal være opmærksom på her, er navbar-nav, navbar-link og navbar-item. Sammen konstruerer de navigationsindstillingerne, som du vil have dem.

Sådan ser det ud:

Men nu er vi nødt til at gøre det lydhør, da vi ønsker, at vores navigationsindstillinger skal kollapse i et hamburgerikon på mindre skærme. For at opnå dette er vi nødt til at gøre to ting:

  1. Fortæl Bootstrap, på hvilket tidspunkt navigationsindstillingerne skal bryde for at kollapse i en hamburger
  2. Opret markeringen til hamburgeren

For at få det til at kollapse, tilføjer vi klassen navbar-expand-md til selve nav-elementet: