I 2011 introduserte Twitter Bootstrap-rammeverket. Siden den gang har dette CSS-rammeverket sett to store omskrivninger, med den siste (Bootstrap 3) utgitt i 2013. Bootstrap 3 transformerte CSS-biblioteket ved å implementere en mobil-først-tilnærming som gjorde at rammeverket var fullstendig responsivt.
Fra 2022 er Bootstrap i versjon fem og er et av de mest populære frontend-rammeverket. Den har en omfattende liste over forhåndsbygde komponenter og en imponerende samling av JavaScript-plugins. I denne artikkelen lærer du hvordan du bruker Bootstrap og får mest mulig ut av funksjonene.
Installere Bootstrap i prosjektet ditt
Det er tre måter å bruk Bootstrap i prosjektet ditt. Du kan laste ned og være vert for CSS- og JavaScript-filene, installere dem i prosjektet ditt ved å bruke npm, eller kopiere og lime inn de riktige cdn-koblingene i prosjektet.
Med cdn-tilnærmingen må du huske å plassere Bootstrap-lenken før enhver annen CSS-kobling i head-taggen til HTML-filen din.
Noen Bootstrap-komponenter har funksjonelle aktiviteter, for eksempel knappeveksling og posisjonering som krever import av JavaScript og Popper-skript. Så hvis du har tenkt å bruke funksjonelle komponenter, må du legge til script-taggen i HTML-filen din også.
Det siste du trenger for å begynne å bruke Bootstrap er viewport stikkord.
Siden Bootstrap er en mobil først-teknologi, viewport stikkord vil hjelpe til med responsiv design. En enkel måte å bruke bootstrap i prosjektet er å bare kopiere Bootstraps startmal.
Opprette et nettsted med Bootstrap
Når du oppretter et nytt nettsted, er en av de første tingene du må vurdere utformingen. Etter det kan du flytte til andre komponenter som knapper og typografi.
Bootstrap har en samling av strukturelle komponenter som du kan bruke til å organisere elementer på en nettside. Disse layoutstrukturene inkluderer:
- Containere
- Nett
- Kolonner
- Takrenner
- Knekkpunkter
Ved å bruke en litt endret versjon av Bootstrap-startmalen kan du begynne å skissere strukturen til nettsiden din og legge til nye komponenter.
index.html-filen
Nødvendige metakoderBootstrap CSS
Støvelhempe
Separat Popper og Bootstrap JS
Bootstrap Container Class
Bootstrap container klasse pads, inneholder og justerer elementene på nettsiden din. Hvis du planlegger å bruke Bootstraps standard rutenett, så må du også bruke Bootstraps container klasse. Det finnes tre typer container klasser; container, beholder-væske, og container-{breakpoint}. Beholderklassen er standardbeholderen; den er responsiv og har en fast bredde ved hvert av Bootstraps seks bruddpunkter.
Bootstraps seks standardbruddpunkter inkluderer:
- Ekstra liten: Mindre enn 576 piksler.
- Liten: Større enn eller lik 576 piksler.
- Medium: Større enn eller lik 768px.
- Stor: Større enn eller lik 992px.
- X-Large: Større enn eller lik 1200px.
- XX-Large: Større enn eller lik 1400px.
For å bruke Bootstraps container i prosjektet ditt kan du ganske enkelt legge til ønsket containerklasse til den eksterne div på nettsiden din.
Bruke Bootstraps container
plasser nettstedselementer her Hvis du setter inn koden ovenfor i brødteksten til den eksisterende HTML-filen din, blir nettsiden responsiv, og den vil også skape utfylling på hver side av nettsiden din.
Bootstrap Grid System
Bootstraps rutenett bruker et tolv-kolonne system som er avhengig av rad og kol rutenettklasser, samt containerklassen. Hver rad har tolv kolonner, og ethvert element kan spenne over én eller flere av disse kolonnene. Kolonneklassen vil indikere hvor mange kolonner et element skal oppta. For eksempel et element som bruker kol-2 klasse vil spenne over to kolonner, et element som bruker kol-3 klasse vil spenne over tre kolonner, og så videre.
Bootstrap-nettsystemet er basert på flexbox-modulen. Hvis bare to kolonner opptar en rad, deler de plassen likt mellom seg. De takrenne klasse er et av Bootstraps strukturelle elementer, og den kontrollerer avstanden mellom hver kolonne i nettsystem. Hver Nett kolonne har 12px polstring på hver side.
Bruker Bootstraps Grid System
hovedinnhold på en nettside
Artikkel
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 setter inn koden ovenfor i container-div, opprettes et Bootstrap-rutenettsystem med tre rader og to kolonner. Den første raden øverst vil inneholde navigasjonslinjen, den tredje raden nederst vil inneholde bunnteksten på nettstedet, og den andre raden i midten vil inneholde innholdet på nettsiden. Den andre raden har to kolonner – hovedartikkelen og en side.
Å lage en lokal CSS-fil og legge til en kantlinje til hver del av rutenettet vil tillate deg å se den tydeligere.
style.css-filen
.rad{
kantlinje: 2px blått fast;
}
.col, .col-sm-4{
kantlinje: 2px rødt solid;
}
Kobling til CSS-filen ovenfor vil skape følgende utdata i nettleseren din:
En åpenbar forskjell i bildet ovenfor er størrelsen på kolonnene. Vanligvis opptar to (eller flere) kolonner i en rad like mye plass med mindre du uttrykkelig oppgir noe annet. De col-sm-4 klasse i HTML-koden ovenfor sikrer at den andre kolonnen bare spenner over fire av de tolv kolonnene i raden. De sm i col-sm-4 klasse representerer det lille bruddpunktet, så sidedelen vil bare oppta fire kolonner fra det lille bruddpunktet og oppover.
Bootstrap-komponenter
Etter at du har bestemt deg for utformingen av nettsiden din, er neste trinn å legge til nettstedsbygningselementer, som Bootstrap kaller komponenter. Bootstraps liste over komponenter inkluderer:
- Navbar
- Knapper
- Knappegruppe
- Listegruppe
- Kort
- Kollapse
- Rullegardiner
Bootstrap Navbar-klassen
Hver Bootstrap-navigasjonslinje krever navbar klasse. De krever også bruk av eller tilordne nøkkelordet "navigering" til Bootstrap rolle attributt i navigasjonslinjens overordnede div. For å gjøre navbaren responsiv må du bruke skjul JavaScript-plugin.
Bootstrap navbar klasse bruker en aria-strøm attributt som bruker «page»-verdien for å indikere gjeldende side, eller «true» for å indikere gjeldende del av en nettside. Verdien du tildeler vil avhenge av strukturen til nettstedet ditt (enkeltside eller flere sider). Du bør også bruke aktiv klasse for å indikere gjeldende side eller seksjon.
Bruker Bootstraps Navbar
Bytter ut navigasjonen rad av Bootstrap Nett med koden ovenfor vil du lage følgende utdata i nettleseren din:
Det er flere andre viktige klasser og Bootstrap-attributter i koden ovenfor, for eksempel navbar-merke klasse, som er rettet mot logodelen til din navbar. De navbar er også fullstendig responsiv takket være skjul JavaScript-plugin.
Responsiv navigasjonslinje
Du husker kanskje at Bootstrap har seks standard bruddpunkter og et av disse bruddpunktene er stort (lg). De navbar-expand-lg klasse i ovenfor utvides til en horisontal liste over navigasjonselementer ved det store bruddpunktet og over, og den listen går tilbake til en knapp ved et hvilket som helst bruddpunkt under stort.
Hvis du vil lære mer om å lage responsive nettsider, har vi satt sammen en skisse hvordan gjøre dette med mediespørringer i HTML og CSS.
Bootstrap-knappkomponenten
Bootstrap knapp komponenten bruker og krever at du stiller inn type attributt til "knapp".
Bootstrap har flere typer knapper. For å lage den mer konvensjonelle knappen bruker du btn klasse, men for å lage en hamburgerknapp som i koden ovenfor, bruker du navbar-veksle klasse.
Når bør du bruke Bootstrap?
Bootstrap er kjent som et av de mer populære CSS-rammeverket fordi det er en banebryter. Lenge før responsiv design var så vanlig i programvareutvikling, forvandlet Bootstrap seg til et fullstendig responsivt rammeverk.
Gjennom årene har Bootstrap fortsatt å utvikle seg og forbedre seg, noe som gjør det til det første valget for toppselskaper, som Twitter og Spotify. Det vil imidlertid ikke alltid være det beste alternativet for dine programvareutviklingsbehov. For eksempel, hvis du lager en React-applikasjon, er det et designsystem kalt MUI som er tilpasset for React-applikasjoner.
Material-UI har et nytt navn og har som mål å lage et nytt designsystemalternativ til Material Design. Her er hvordan du kan bruke MUI i ReactJS-prosjekter.
Les Neste
- Programmering
- Kodetips
- Programmering
- Programmeringsverktøy
Kadeisha Kean er en fullstack-programvareutvikler og teknisk/teknologiskribent. Hun har den utpregede evnen til å forenkle noen av de mest komplekse teknologiske konseptene; produsere materiale som lett kan forstås av enhver teknologinybegynner. Hun er lidenskapelig opptatt av å skrive, utvikle interessant programvare og reise verden rundt (gjennom dokumentarer).
Abonner på vårt nyhetsbrev
Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis e-bøker og eksklusive tilbud!
Klikk her for å abonnere
