NemProgrammering.dk logo

Lav en hjemmeside med Bootstrap

  Skrevet af: Ekstern Blogger     02-05-2015     Skrevet i: CSS og CSS3, HTML + HTML5

bootstrapMen hvad er Bootstrap egentlig?

Bootstrap er et framework, som du kan bruge til at bygge hjemmesider med.

Med framework menes der, at alle CSS klasser, HTML markup og JavaScript scripts er lavet for dig, så du blot skal vælge, hvor og hvordan de skal implementeres på din hjemmeside.

Bootstrap er ”mobil-first”, hvilket betyder, at hvis du anvender Bootstrap til at lave din hjemmeside med, så får du en hjemmeside som er 100% optimeret til mobile-eneheder og tablets.

F.eks. kunne du vælge at implementere Bootstrap navigation-baren, og uden du behøver at tænke på at kode al CSS og HTML selv, så vil denne navigationsbar automatisk kunne tilpasse sig smartphones og tablets, fordi Bootstrap netop udviklet til at være ”mobile-first”.  Det her med at hjemmesiden tilpasser sig kaldes ”Responsivt design”.

Et eksempel på en hjemmeside der er lavet med Bootstrap er Billig-Bredbånd.nu. Besøg siden og prøv så at gøre dit browservindue mindre. Læg mærke til, hvordan siden automatisk tilpasser sig vinduets størrelse – dét er hvad Bootstrap og responsivt design handler om!

Har du allerede en hjemmeside som ikke responsiv, så kan du ved hjælp af Bootstrap´s framework re-designe din side og derved gøre den responsiv. Dette kunne f.eks.  gøres ved blot at skifte dine egen css klasser ud med dem som Bootstrap kommer med, og på den måde vil du automatiks få den resposivitet der er indbygget i Bootstrap.

Faktisk handler Bootstrap blot om at anvende de CSS klasser de stille til rådighed samt bygger din markup op i henhold til deres retninglinjer.  Du kan her se alle de hjemmesideelementer der tilbydes i Bootstrap ,og hvordan du implemeterer dem på din egen hjemmeside:  http://getbootstrap.com/components/

Som du sikkert allerede kan regne du, så kan du ikke bare bygge en hjemmeside med Bootstrap uden at kende til HTML og CSS, da du selv skal lave din HTML markup og tilføje Bootstrap’s CSS klasser.  Dog findes der også Bootstrap hjemmeside-skabeloner, som du blot kan smide ind på en hjemmeside sammen med Bootsstraps css filer og jquery filer, og så har du en responsiv hjemmeside – så let kan det også være.

Jeg håber at du med denne artikel har fået en bedre fornemmelse af hvad Bootstrap er, og hvordan du kan bruge det til at lave din egen hjemmeside.

Spørgsmål og kommentarer

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.

  • Robin siger:

    Kære nem-programmering
    Laver I ikke snart en af jeres fantastiske videoserier om bootstrap?

    1. Thomas I. siger:

      Hej Robin,

      En serie om Bootstrap kunne bestemt være en rigtig god idé – det vil jeg skrive bag øret :-)

      Mvh.

  • Mick siger:

    Hej Fedt indlæg jeg blev lidt klogere, men skal lige forstå det rigtigt.

    Kan man sige, at det er lidt af wordpress bare for nørder / gør-det-selv-manden/kvinden?

    Kan man fx ta et element der fra. fx en formular, nav menu eller andet, og så bare tilføje den del, til sin hjemmeside. lidt lige som på en bil, når man sætter en ny ting ind i den, hvis den samligning giver mening :-)