2011 introducerade Twitter Bootstrap-ramverket. Sedan dess har det här CSS-ramverket sett två stora omskrivningar, varav den senaste (Bootstrap 3) släpptes 2013. Bootstrap 3 förvandlade CSS-biblioteket genom att implementera en mobil-först-metod som lämnade ramverket helt responsivt.
Från och med 2022 har Bootstrap version fem och är ett av de mest populära frontend-ramverken. Den har en omfattande lista med förbyggda komponenter och en imponerande samling av JavaScript-plugins. I den här artikeln kommer du att lära dig hur du använder Bootstrap och får ut det mesta av dess funktioner.
Installera Bootstrap i ditt projekt
Det finns tre sätt att använd Bootstrap i ditt projekt. Du kan ladda ner och vara värd för CSS- och JavaScript-filerna, installera dem i ditt projekt med hjälp av npm, eller kopiera och klistra in lämpliga cdn-länkar i ditt projekt.
Med cdn-metoden måste du komma ihåg att placera Bootstrap-länken före någon annan CSS-länk i head-taggen på din HTML-fil.
Vissa Bootstrap-komponenter har funktionella aktiviteter, såsom knappväxling och positionering som kräver import av JavaScript och Popper-skript. Så om du tänker använda några funktionella komponenter måste du också lägga till skripttaggen i din HTML-fil.
Det sista du behöver för att börja använda Bootstrap är utsiktsplats märka.
Eftersom Bootstrap är en mobil-först-teknologi, utsiktsplats märka kommer att hjälpa till med responsiv design. Ett enkelt sätt att använda bootstrap i ditt projekt är att bara kopiera Bootstraps startmall.
Skapa en webbplats med Bootstrap
När du skapar en ny webbplats är en av de första sakerna du behöver tänka på layouten. Efter det kan du flytta till andra komponenter som knappar och typografi.
Bootstrap har en samling strukturella komponenter som du kan använda för att organisera element på en webbsida. Dessa layoutstrukturer inkluderar:
- Behållare
- Rutnät
- Kolumner
- Rännor
- Brytpunkter
Med hjälp av en något ändrad version av Bootstrap startmallen kan du börja beskriva strukturen på din webbsida och lägga till nya komponenter.
Filen index.html
Obligatoriska metataggarBootstrap CSS
Bootstrap
Separat Popper och Bootstrap JS
Bootstrap Container Class
Bootstrap behållare klassblock, innehåller och justerar elementen på din webbsida. Om du planerar att använda Bootstraps standardrutnät, då måste du också använda Bootstraps behållare klass. Det finns tre typer av behållare klasser; behållare, behållare-vätska, och container-{breakpoint}. Behållarklassen är standardbehållaren; den är lyhörd och har en fixbredd vid var och en av Bootstraps sex brytpunkter.
Bootstraps sex standardbrytpunkter inkluderar:
- Extra liten: Mindre än 576 pixlar.
- Små: Större än eller lika med 576px.
- Medium: Större än eller lika med 768px.
- Stor: Större än eller lika med 992px.
- Extra stor: Större än eller lika med 1200px.
- XX-stor: Större än eller lika med 1400px.
För att använda Bootstraps behållare i ditt projekt kan du helt enkelt lägga till önskad containerklass till den externa div på din webbsida.
Använder Bootstraps behållare
placera webbplatselement här Om du infogar koden ovan i brödtexten i din befintliga HTML-fil blir din webbsida responsiv, och den skapar också utfyllnad på varje sida av din webbsida.
Bootstrap Grid System
Bootstraps rutnät använder ett tolvkolumnssystem som förlitar sig på rad och kol rutnätsklasser, såväl som containerklassen. Varje rad har tolv kolumner, och alla element kan sträcka sig över en eller flera av dessa kolumner. Kolumnklassen kommer att indikera hur många kolumner ett element ska uppta. Till exempel ett element som använder kol-2 klass kommer att sträcka sig över två kolumner, ett element som använder kol-3 klass kommer att sträcka sig över tre kolumner, och så vidare.
Bootstrap-nätsystemet är baserat på flexbox-modulen. Om bara två kolumner upptar en rad delar de upp utrymmet lika mellan sig. De ränna klass är ett av Bootstraps strukturella element, och det styr avståndet mellan varje kolumn i rutsystem. Varje rutnät kolumnen har 12px stoppning på vardera sidan.
Använder Bootstraps Grid System
huvudinnehållet på en webbsida
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.
Genom att infoga koden ovan i container div skapas ett Bootstrap-rutnätssystem med tre rader och två kolumner. Den första raden högst upp kommer att hålla navigeringsfältet, den tredje raden längst ner kommer att hålla webbplatsens sidfot, och den andra raden i mitten kommer att innehålla webbsidans innehåll. Den andra raden har två kolumner – huvudartikeln och en sida.
Genom att skapa en lokal CSS-fil och lägga till en ram till varje sektion av rutnätet kan du se det tydligare.
Filen style.css
.rad{
kant: 2px blå fast;
}
.col, .col-sm-4{
kant: 2px rött fast;
}
Genom att länka till CSS-filen ovan skapas följande utdata i din webbläsare:
En uppenbar skillnad i bilden ovan är storleken på kolumnerna. Vanligtvis upptar två (eller flera) kolumner i en rad lika mycket utrymme om du inte uttryckligen anger något annat. De kol-sm-4 klass i HTML-koden ovan säkerställer att den andra kolumnen endast sträcker sig över fyra av de tolv kolumnerna i raden. De sm i kol-sm-4 klass representerar den lilla brytpunkten, så sektionen åt sidan kommer bara att uppta fyra kolumner från den lilla brytpunkten och uppåt.
Bootstrap-komponenter
När du har bestämt dig för layouten på din webbsida är nästa steg att lägga till webbplatsbyggande element, som Bootstrap kallar komponenter. Bootstraps lista över komponenter inkluderar:
- Navbar
- Knappar
- Knappgrupp
- Listgrupp
- Kort
- Kollaps
- Dropdown-meny
Bootstrap Navbar-klassen
Varje Bootstrap-navigeringsfält kräver navigeringsfältet klass. De kräver också användning av
eller tilldela nyckelordet "navigering" till Bootstrap roll attribut i navigeringsfältets överordnade div. För att göra navigeringsfältet responsivt måste du använda komprimera JavaScript-plugin.Bootstrap navigeringsfältet klass använder en aria-ström attribut som tar "page"-värdet för att indikera den aktuella sidan, eller "true" för att indikera den aktuella delen av en webbsida. Värdet du tilldelar beror på strukturen på din webbplats (en sida eller flera sidor). Du bör också använda aktiv klass för att ange den aktuella sidan eller avsnittet.
Använder Bootstraps Navbar
Ersätter navigeringen rad av Bootstrap rutnät med koden ovan skapas följande utdata i din webbläsare:
Det finns flera andra viktiga klasser och Bootstrap-attribut i koden ovan, såsom navbar-märke klass, som är inriktad på logotypen för din navigeringsfältet. De navigeringsfältet är också helt lyhörd tack vare komprimera JavaScript-plugin.
Responsiv Navbar
Du kanske minns att Bootstrap har sex standardinställningar brytpunkter och en av dessa brytpunkter är stor (lg). De navbar-expand-lg klass i
ovan expanderar till en horisontell lista med navigeringsobjekt vid den stora brytpunkten och över, och den listan återgår till en knapp vid valfri brytpunkt under stor.Om du vill lära dig mer om att skapa responsiva webbplatser har vi sammanställt en beskrivning hur man gör detta med mediefrågor i HTML och CSS.
Bootstrap-knappkomponenten
Bootstrap knapp komponenten använder och kräver att du ställer in typ attribut till "knapp".
Bootstrap har flera typer av knappar. För att skapa den mer konventionella knappen skulle du använda btn klass, men för att skapa en hamburgerknapp som i koden ovan skulle du använda navbar-växla klass.
När ska du använda Bootstrap?
Bootstrap är känt som ett av de mer populära CSS-ramverken eftersom det är en banbrytare. Långt innan responsiv design var så vanligt inom mjukvaruutveckling förvandlade Bootstrap sig till ett helt responsivt ramverk.
Under åren har Bootstrap fortsatt att utvecklas och förbättras, vilket gör det till det främsta valet för toppföretag, som Twitter och Spotify. Det kommer dock inte alltid att vara det bästa alternativet för dina behov av mjukvaruutveckling. Till exempel, om du skapar en React-applikation finns det ett designsystem som heter MUI som är anpassat för React-applikationer.
Material-UI har ett nytt namn och syftar till att skapa ett nytt designsystemalternativ till Material Design. Så här kan du använda MUI i ReactJS-projekt.
Läs Nästa
- Programmering
- Kodningstips
- Programmering
- Programmeringsverktyg
Kadeisha Kean är en full-stack mjukvaruutvecklare och teknisk/teknikskribent. Hon har den distinkta förmågan att förenkla några av de mest komplexa tekniska koncepten; producera material som lätt kan förstås av alla nybörjare. Hon brinner för att skriva, utveckla intressant programvara och att resa runt i världen (genom dokumentärer).
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
