I 2011 introducerede Twitter Bootstrap-rammen. Siden da har denne CSS-ramme set to store omskrivninger, med den seneste (Bootstrap 3) udgivet i 2013. Bootstrap 3 transformerede CSS-biblioteket ved at implementere en mobile-first-tilgang, der efterlod rammerne fuldstændigt responsive.
Fra 2022 er Bootstrap i version fem og er en af de mest populære frontend-frameworks. Det har en omfattende liste over forudbyggede komponenter og en imponerende samling af JavaScript-plugins. I denne artikel lærer du, hvordan du bruger Bootstrap og får mest muligt ud af dets funktioner.
Installation af Bootstrap i dit projekt
Der er tre måder at brug Bootstrap i dit projekt. Du kan downloade og hoste CSS- og JavaScript-filerne, installere det i dit projekt ved hjælp af npm eller kopiere og indsætte de relevante cdn-links i dit projekt.
Med cdn-tilgangen skal du huske at placere Bootstrap-linket før ethvert andet CSS-link i head-tagget på din HTML-fil.
Nogle Bootstrap-komponenter har funktionelle aktiviteter, såsom knapskift og positionering, der kræver import af JavaScript og Popper-script. Så hvis du har til hensigt at bruge nogen funktionelle komponenter, skal du også tilføje script-tagget til din HTML-fil.
Den sidste ting du skal bruge for at begynde at bruge Bootstrap er viewport tag.
Da Bootstrap er en mobil-først teknologi, er viewport tag vil hjælpe med responsivt design. En simpel måde at bruge bootstrap på i dit projekt er blot at kopiere Bootstraps starterskabelon.
Oprettelse af en hjemmeside med Bootstrap
Når du opretter en ny hjemmeside, er en af de første ting, du skal overveje, layoutet. Derefter kan du flytte til andre komponenter som knapper og typografi.
Bootstrap har en samling af strukturelle komponenter, som du kan bruge til at organisere elementer på en webside. Disse layoutstrukturer inkluderer:
- Containere
- Gitter
- Kolonner
- Tagrender
- Knækpunkter
Ved at bruge en lidt ændret version af Bootstrap-startskabelonen kan du begynde at skitsere strukturen på din webside og tilføje nye komponenter.
Filen index.html
Nødvendige metatagsBootstrap CSS
Bootstrap
Adskil Popper og Bootstrap JS
Bootstrap Container Class
Bootstrap beholder klasse pads, indeholder og justerer elementerne på din webside. Hvis du planlægger at bruge Bootstraps standardgitter, så skal du også bruge Bootstraps beholder klasse. Der er tre typer beholder klasser; beholder, beholder-væske, og container-{breakpoint}. Containerklassen er standardbeholderen; den er lydhør og har en fix-bredde ved hvert af Bootstraps seks brudpunkter.
Bootstraps seks standard breakpoints inkluderer:
- Ekstra lille: Mindre end 576px.
- Lille: Større end eller lig med 576px.
- Medium: Større end eller lig med 768px.
- Stor: Større end eller lig med 992px.
- X-Large: Større end eller lig med 1200px.
- XX-stor: Større end eller lig med 1400px.
For at bruge Bootstraps beholder i dit projekt kan du blot tilføje den ønskede containerklasse til den eksterne div på din webside.
Brug af Bootstraps container
placere hjemmesideelementer her Indsættelse af koden ovenfor i brødteksten af din eksisterende HTML-fil vil gøre din webside responsiv, og den vil også skabe polstring på hver side af din webside.
Bootstrap Grid System
Bootstraps gitter bruger et tolv-søjlesystem, der er afhængigt af række og col grid-klasser, samt containerklassen. Hver række har tolv kolonner, og ethvert element kan strække sig over en eller flere af disse kolonner. Kolonneklassen vil angive, hvor mange kolonner et element skal optage. For eksempel et element, der bruger col-2 klasse vil strække sig over to kolonner, et element ved hjælp af col-3 klasse vil strække sig over tre kolonner og så videre.
Bootstrap-gittersystemet er baseret på flexbox-modulet. Hvis kun to kolonner optager en række, vil de dele rummet ligeligt mellem sig. Det tagrende klasse er et af Bootstraps strukturelle elementer, og det styrer afstanden mellem hver kolonne i gittersystem. Hver gitter kolonne har 12px polstring på hver side.
Brug af Bootstraps Grid System
hovedindhold på en webside
Artikel
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, distinctio impedit
ratione facere numquam, optio eligendi delectus cumque quos.
Hvis du indsætter koden ovenfor i container-div, oprettes et Bootstrap-gittersystem med tre rækker og to kolonner. Den første række øverst vil indeholde navigeringslinjen, den tredje række nederst vil indeholde hjemmesidens sidefod, og den anden række i midten vil indeholde indholdet af websiden. Den anden række har to kolonner - hovedartiklen og en side.
Oprettelse af en lokal CSS-fil og tilføjelse af en kant til hver sektion af gitteret vil give dig mulighed for at se det tydeligere.
Filen style.css
.række{
kant: 2px blå fast;
}
.col, .col-sm-4{
kant: 2px rødt fast;
}
Link til CSS-filen ovenfor vil skabe følgende output i din browser:
En åbenlys forskel på billedet ovenfor er størrelsen på søjlerne. Normalt optager to (eller flere) kolonner i en række den samme mængde plads, medmindre du udtrykkeligt angiver andet. Det col-sm-4 klasse i HTML-koden ovenfor sikrer, at den anden kolonne kun strækker sig over fire af de tolv kolonner i rækken. Det sm i col-sm-4 klasse repræsenterer det lille brudpunkt, så sideafsnittet vil kun optage fire kolonner fra det lille brudpunkt og derover.
Bootstrap komponenter
Når du har besluttet dig for layoutet af din webside, er næste trin at tilføje webstedsbygningselementer, som Bootstrap kalder komponenter. Bootstraps liste over komponenter omfatter:
- Navbar
- Knapper
- Knap gruppe
- Listegruppe
- Kort
- Falde sammen
- Dropdowns
Bootstrap Navbar-klassen
Hver Bootstrap-navigationslinje kræver navbar klasse. De kræver også brug af eller tildele nøgleordet "navigation" til Bootstrap rolle attribut i navbarens overordnede div. For at gøre navbaren responsiv skal du bruge skjul JavaScript-plugin.
Bootstrap navbar klasse bruger en aria-strøm attribut, der tager "side"-værdien for at angive den aktuelle side, eller "true" for at angive den aktuelle sektion af en webside. Den værdi, du tildeler, afhænger af strukturen på dit websted (enkelt side eller flere sider). Du bør også bruge aktiv klasse for at angive den aktuelle side eller sektion.
Brug af Bootstraps Navbar
Udskiftning af navigation række af Bootstrap gitter med koden ovenfor oprettes følgende output i din browser:
Der er flere andre vigtige klasser og Bootstrap-attributter i koden ovenfor, såsom navbar-mærke klasse, som er rettet mod logosektionen på din navbar. Det navbar er også fuldstændig lydhør takket være skjul JavaScript-plugin.
Responsiv navigeringslinje
Du husker måske, at Bootstrap har seks standardindstillinger brudpunkter og et af disse brudpunkter er stort (lg). Det navbar-expand-lg klasse i ovenfor udvides til en vandret liste over navigationselementer ved det store brudpunkt og derover, og denne liste vender tilbage til en knap ved ethvert brudpunkt under det store.
Hvis du vil lære mere om at skabe responsive hjemmesider, har vi sammensat en oversigt hvordan man gør dette med medieforespørgsler i HTML og CSS.
Bootstrap-knapkomponenten
Bootstrap knap komponent bruger og kræver, at du indstiller type attribut til "knap".
Bootstrap har flere typer knapper. For at oprette den mere konventionelle knap ville du bruge btn klasse, men for at oprette en hamburgerknap som i koden ovenfor, ville du bruge navbar-toggle klasse.
Hvornår skal du bruge Bootstrap?
Bootstrap er kendt som en af de mere populære CSS-frameworks, fordi det er en banebrydende. Længe før responsivt design var så almindeligt inden for softwareudvikling, forvandlede Bootstrap sig selv til en fuldstændig responsiv ramme.
I årenes løb er Bootstrap fortsat med at udvikle sig og forbedre, hvilket gør det til det bedste valg for topvirksomheder, såsom Twitter og Spotify. Det vil dog ikke altid være den bedste løsning til dine behov for softwareudvikling. For eksempel, hvis du opretter en React-applikation, er der et designsystem kaldet MUI, der er tilpasset til React-applikationer.
Material-UI har fået nyt navn og har til formål at skabe et nyt designsystem alternativ til Material Design. Sådan kan du bruge MUI i ReactJS-projekter.
Læs Næste
- Programmering
- Kodningstip
- Programmering
- Programmeringsværktøjer
Kadeisha Kean er fuld stack softwareudvikler og teknisk/teknologiskribent. Hun har den udprægede evne til at forenkle nogle af de mest komplekse teknologiske begreber; producere materiale, der let kan forstås af enhver nybegynder teknologi. Hun brænder for at skrive, udvikle interessant software og rejse verden rundt (gennem dokumentarer).
Abonner på vores nyhedsbrev
Tilmeld dig vores nyhedsbrev for tekniske tips, anmeldelser, gratis e-bøger og eksklusive tilbud!
Klik her for at abonnere
