De bedste Bootstrap-selvstudier til responsivt webdesign

Bootstrap er en populær frontend-ramme til webudvikling. Den indeholder forudbyggede komponenter og designelementer til stil af HTML-indhold. Moderne browsere som Chrome, Firefox, Opera, Safari og Internet Explorer understøtter Bootstrap.

Bootstrap inkluderer et responsivt gittersystem til forskellige layouter. Det er et godt udgangspunkt for opbygning af et mobilvenligt websted. Det inkluderer også valgfri JavaScript-funktionalitet som sammenklappeligt indhold, karruseller og modeller.

Versionshistorik

Twitter oprindeligt udviklede Bootstrap-rammen som et internt værktøj. De udgav det som et open source-projekt i august 2011.

Bootstrap 2 blev udgivet i januar 2012. En af de primære funktioner var introduktionen af ​​det 12 søjles responsive gittersystem. Bootstrap 3 dukkede op i august 2013 og skiftede til et fladt design og en mobil-første tilgang. Bootstrap 4 er tilgængelig i beta fra august 2017 og inkluderer nu Sass og Flexbox.

Bootstrap 4 var under udvikling i to år, inden der blev frigivet nogle betaversioner i løbet af 2017, mens den første stabile udgivelse var udgivet i januar 2018. Nogle bemærkelsesværdige ændringer inkluderer:

  • Flyttet fra mindre til Sass;
  • Flyttet til Flexbox og forbedret netsystem;
  • Tilføjede kort (erstatter brønde, miniaturer og paneler);
  • Og meget mere!

I skrivende stund er Bootstraps seneste udgivelse 4.1.3. Hvis du vil følge med i nyhederne om meddelelser, skal du følge dem her.

Installation

Der er to hovedmuligheder for at tilføje Bootstrap til dit webprojekt. Du kan linke til offentligt tilgængelige kilder eller downloade rammen direkte.

Link til en anden kilde

Du kan tilføje Bootstrap CSS ved at bruge et element inde på din webside, der refererer til et Content Delivery Network (CDN):

Tilføjelse af JavaScript-elementerne i Bootstrap er ens med elementer, der normalt placeres i bunden af ​​dit '' tag. Du skal muligvis medtage nogle afhængigheder først. Vær særlig opmærksom på den anførte rækkefølge:

Bemærk: Dette er kun eksempler og kan ændres uden varsel. Se et CDN for aktuelle links til at medtage i dit projekt.

Download / installer

Du kan downloade og installere Bootstrap-kildefiler med Bower, Composer, Meteor eller npm. Dette giver større kontrol og muligheden for at inkludere eller ekskludere moduler efter behov.

npm install bootstrap

gem 'bootstrap', '~> 4.1.3'

Bemærk: Dette er kun eksempler og kan ændres uden varsel. Se det tomme 'rel =' nofollow '> Bootstrap-websted for de mest opdaterede links.

Bootstrap Grid System

Gittersystemet er et mobilt første flexbox-system til hurtig opbygning af layouts i alle former og størrelser, der passer til alle enheder. Det er baseret på et 12 kolonnelayout og har flere niveauer, en for hvert medieforespørgsel.

Bootstrap leveres med foruddefinerede gitterklasser til din brug i markering. Se flere detaljer og eksempler på //getbootstrap.com/docs/4.1/layout/grid/

Boostrap-funktioner

Mere information:

Bootstrap har grundig dokumentation med mange eksempler og en HTML-skabelon til at komme i gang (denne skabelon indeholder kun script inkluderet; den indeholder ikke en opsætning af gittersystemet, hvis det er det, du leder efter).

Derudover kan du finde både gratis og betalte temaer, der bygger på Bootstrap-rammen for at give et mere tilpasset og stilfuldt look.

Bootstrap-ressourcer:

Bootstraps officielle blog

Bootstrap site inspiration

Fremvisning af websteder bygget med Bootstrap

HTML-linter til projekter, der bruger Bootstrap

Designelementer og kodestykker til Bootstrap

Kode, tema og tilføjelsesressourcer til Bootstrap

Kom godt i gang med Bootstrap-tutorial

Brug af Bootstrap gør det nemt at designe et fuldt responsivt websted og er en ramme, der er værd at lære.

Hvad er et responsivt websted?

Et responsivt websted er et websted, der ændrer størrelsen på og omarrangerer elementerne på siden afhængigt af størrelsen på din browser. Hvis du ændrer størrelsen på din browser, med et responsivt websted, kan du se, at ændringerne sker i realtid. Bootstrap gør dit websted lydhør for dig.

Sådan tilføjes Bootstrap til din side

Tilføjelse af bootstrap til din side er en hurtig proces, bare tilføj følgende til tags i din kode.

Du skal også tilføje følgende mellem bodytags i din kode. Med bootstrap bruger du tags. Når du bruger mange af Bootstraps funktioner, har hvert tag sit eget unikke sæt anvendte klasser, der gør det muligt for tagget at udføre sin opgave. Andre sektioner i denne Bootstrap-guide viser flere eksempler på, hvordan Bootstrap bruger tags. ( tags er ikke eksklusive for Bootstrap, men Bootstrap bruger dem.).

Nedenfor er den kode, der vil føjes til bodytags i din kode for at komme i gang. Husk, at mens dette opretter containeren, forbliver siden stadig tom, indtil du tilføjer indhold til containeren.

Congratulations!

Bootstrap is now working on this page

Skabeloner

Skabeloner er forudbyggede værktøjssæt, der gør spinding af en ny webside til en leg. Hvis du har en generel idé om dit ønskede layout, eller hvis du vil gennemse et bibliotek med almindelige layoutskabeloner til ideer, tager Bootstrap-skabeloner meget af kedsomhed og frustrationer væk fra den indledende byggeproces. Denne hjælp hjælper dig med at fokusere på de finere detaljer i projektet i stedet for at undre dig over, hvorfor CSS ikke samarbejder.

Kom godt i gang

Skabelonlinks

Navigations bar

Bootstrap-rammen giver dig en funktion med opkaldsnavigationslinjer. Kort sagt er en navigationslinje (også kaldet navbars) en overskrift øverst på siden for at vise navigationsoplysninger.

Sådan bruges

For at bruge Bootstrap-navigationsbjælker tilføjer du et element øverst inde i elementet på din webside. Der er forskellige stilarter, du kan tilføje for at tilpasse visningen af ​​dine navbjælker.

Kodeeksempel

Dette er den kode, der er nødvendig for at lave en grundlæggende navbar.

 Site Name 
      
  • Home
  • Page 1
  • Page 2
  • Page 3

Navbar Styles

Bootstrap giver et sæt klasser i Bootstrap-rammen for at style dine navbarer. Disse klasser er som følger:

Tilføjelse af rullemenuer til navlinjen

Du kan inkludere en rullemenu inde i en navbar. Denne funktion kræver, at du inkluderer Bootstraps javascript-fil, for at den kan fungere.

  • Drop down
    • Item 1
    • Item 2
    • Item 3
  • Tilføjelse af knapper til navlinjen

    Du kan tilføje knapper på navlinjen. De eksisterende Bootstrap Button-klasser fungerer, men du skal medtage klassen navbar-btntil slutningen af ​​klasselisten.

    Button

    Tilføjelse af formularer til navlinjen

    Du kan også tilføje formularer til navlinjen. Dette kan bruges til opgaver såsom et søgefelt, et hurtigt loginfelt osv.

     Search 

    Justering af elementer til højre på navlinjen

    I nogle tilfælde vil du muligvis justere elementer i en navbar til højre (for eksempel en login- eller tilmeldingsknap.). For at gøre dette skal du bruge navbar-rightklassen.

     Site Name 
          
    • Home
    • Page 1
    • Page 2
    • Page 3
    • Action Link #1
    • Action Link #2

    Viser navlinjen uafhængigt af rulle

    I nogle tilfælde ønsker du måske at holde navlinjen øverst eller nederst på skærmen uanset rulning. Du bliver nødt til at tilføje enten klassen navbar-fixed-topeller navbar-fixed-bottomklassen til elementet.

     Site Name 
          
    • Home
    • Page 1
    • Page 2
    • Page 3

    Sammenklapper navbar

    På en lille skærm (såsom en telefon eller tablet) vil navigationspanelet tage for meget plads. Heldigvis findes muligheden for at kollapse navlinjen. Du kan opnå dette ved hjælp af følgende eksempel.

     Site Name 
          
    • Home
    • Page 1
    • Page 2
    • Page 3

    Navbar Eksempler