Lær om bootstrap: Kom i gang med at udvikle responsive websteder

Afsløring: Din support hjælper med at holde webstedet kørt! Vi tjener et henvisningsgebyr for nogle af de tjenester, vi anbefaler på denne side.


Denne guide introducerer dig til Bootstrap, den populære open-source front-end ramme for websteder. Fortsæt med at læse for en introduktion og en kort historie, eller brug navigationen til højre for at springe til den Bootstrap-ressource, du leder efter.

Siden version 2 inkorporerer Bootstrap komponenter fra Responsive Web Design (RWD), hvilket gør det til et fremragende værktøj til skalering af websteder med en enkelt kodebase, der deles mellem forskellige enheder ved hjælp af CSS-mediespørgsmål.

Bootstrap er open source, og det hostes, udvikles og vedligeholdes på GitHub. I øjeblikket er det det mest stjernede projekt på GitHub. Lad os finde ud af hvorfor.

Hvad er Bootstrap?

Bootstrap-udviklingen blev startet af Twitter’s Mark Otto og Jacob Thornton som et forsøg på at udvikle et internt værktøj – en ny ramme for at tilskynde til konsistens på tværs af interne værktøjer på Twitter.

I disse tidlige udviklingsstadier blev Bootstrap oprindeligt navngivet “Twitter Blueprint.” Den nye ramme modnet hurtigt og blev frigivet som et open source-projekt den 19. august 2011.

Bootstrap kerneteam fortsætter udviklingen, og den seneste version er Bootstrap 3, som blev frigivet i august 2013.

Bootstrap er en gratis open source HTML-, CSS- og JS-ramme, der indeholder skabeloner til tekst, formularer, knapper, navigation og andre relevante interfacekomponenter.

Som en front-end ramme er Bootstrap en grænseflade for brugeren, i modsætning til server-side-kode, der findes på back-end-serveren. Med brug af RWD-komponenter tilpasser Bootstrap websider automatisk til forskellige skærmstørrelser og pixeltætheder på forskellige enheder.

Med Bootstrap kan webudviklere koncentrere sig om den faktiske udvikling uden at bekymre sig om design og få et godt websted godt igang.

Bootstrap kan bruges i ethvert udviklingsmiljø eller editor, og enhver serversides teknologi og sprog, fra ASP.NET til PHP til Ruby on Rails.

Siden august 2015 kan officielle Bootstrap-temaer købes med en enkelt betaling og en licens til flere brug med gratis opdateringer.

Bootstrap er ophavsretligt beskyttet af Twitter, men det frigives under MIT-licensen, så du kan bruge og ændre Bootstrap eller dets komponenter til både private og kommercielle formål.

Bootstrap-funktioner

Bootstrap er kompatibel med de nyeste versioner af Google Chrome, Mozilla Firefox, Internet Explorer, Opera og Safari browsere. Nogle af disse browsere understøttes ikke på alle platforme.

Stilark, der indeholder grundlæggende stildefinitioner for alle større HTML-komponenter, er inkluderet i Bootstrap, hvilket tillader nem tilpasning af webstedsudseende.

En af hovedfunktionerne i Bootstrap er dets fluidnet-system, der kan skalere op til 12 kolonner i henhold til størrelsen på skærmen, fra mobile enheder til skrivebordsskærmstørrelser, og alt derimellem, både portræt og liggende orienteret.

Dette gittersystem skaber de væsentlige byggesten til dynamiske sider.

Bootstrap indeholder også mange andre almindelige interfaceelementer, herunder knapper med avancerede funktioner, etiketter, lister, miniaturebilleder, advarselsmeddelelser, statuslinjer og flere JavaScript-komponenter som dialogbokse, karrusler, værktøjstips, alarmer, knapper og så videre.

Nogle af disse komponenter udvider funktionaliteten af ​​eksisterende interfaceelementer, for eksempel at tilføje en auto-komplet funktion til inputfelter.

Fordele ved at bruge Bootstrap

I de sidste par år er Bootstrap blevet en stadig mere populær front-frame med millioner af websteder, der bruger den.

Ifølge Bootstrapbays Christopher Gimmer er der fem vigtigste grunde til at bruge Bootstrap.

Først, Bootstrap øger udviklingshastigheden. En af de største fordele ved Bootstrap er den rene udviklingshastighed.

Med Bootstrap kan du bruge færdige blokke med kode, og kombineret med rammens cross-browser-kompatibilitet kan du hurtigt udvikle et websted. Brug af færdige Bootstrap-temaer og ændring af dem til dine behov kan spare endnu mere tid.

For det andet, Bootstrap genererer lydhøre, mobile klar websteder.

Med den fortsatte stigning i popularitet af mobile enheder og optimistiske forudsigelser om global mobil datatrafikvækst bliver det meget vigtigt at have et responsivt websted, der kan arbejde på enheder med vildt forskellige formfaktorer..

Med Bootstraps indbyggede RWD-komponenter og væskegitterlayoutet, der dynamisk tilpasser sig enhedens skærmopløsning, kræver det at skabe responsive websteder næsten ingen ekstra indsats fra udvikleren.

Tredje, Brug af Bootstrap sikrer konsistens.

Bootstrap blev oprindeligt udviklet for at tilskynde til konsistens. Bootstrap sikrer konsistens uanset hvem der arbejder på projektet. Derudover er resultaterne ensartede på tværs af platforme, så output forbliver det samme på tværs af forskellige webbrowsere.

Fjerde, Bootstrap kan let tilpasses.

Bootstrap kan skræddersys efter forskellige behov i specifikke projekter. Udviklere kan vælge de funktioner, de har brug for, ved hjælp af Bootstrap-tilpasningssiden og kun downloade disse funktioner i en brugerdefineret version af Bootstrap, hvilket gør koden slankere og renere i processen.

femte, God support.

Takket være størrelsen på lokalsamfundet og Bootstraps popularitet er støtten en tendens til at være god. Bootstrap-kerneteamet har også været god til at offentliggøre rettidige opdateringer, og udviklingsarbejdet er kontinuerligt. I betragtning af dens popularitet forventer vi ikke, at dette snart ændres.

Kom godt i gang med bootstrap

Hvis du er klar til at begynde at lære, hvordan du bruger Bootstrap, men du ikke allerede kender HTML og CSS, er det første skridt til at lære Bootstrap at lære det grundlæggende i HTML og CSS.

Grundlæggende skal Bootstrap CSS henvises til i hovedafsnittet på dine HTML-filer. JavaScript-filer kaldes i slutningen af ​​kroppen-sektionen af ​​dine HTML-filer. Denne grundlæggende HTML-struktur kaldes en Bootstrap-skabelon.

Brug af Bootstrap kommer ned til at anvende sine CSS-klasser og JavaScript på dine HTML-elementer, derfor skal du have et godt greb om CSS og HTML. Heldigvis vil dette ikke være et problem for seriøse udviklere.

Bootstrap-udviklingsmiljø

Når du har downloadet og udpakket den forudkompilerede version af Bootstrap, får du Bootstrap-filstrukturen, som er meget enkel. Bootstrap-filer findes i tre mapper: css, js og skrifttyper.

Denne filstruktur er selvforklarende og enkel at inkludere i ethvert webprojekt. Udover de klar-til-brug CSS- og JS-filer er Glyphicons-skrifttyper også inkluderet sammen med det valgfri standard Bootstrap-tema.

Inden du begynder at bruge Bootstrap, bliver du nødt til at integrere den i dit udviklingsmiljø. Detaljerede instruktioner kan findes online for forskellige platforme, så det er meget let at tilføje Bootstrap til dit udviklingsmiljø.

Bootstrap-ressourcer

På grund af dens popularitet bør du ikke have problemer med at finde masser af Bootstrap-læringsressourcer online. Samfundet trives og nye ressourcer offentliggøres regelmæssigt.

Da Bootstrap imidlertid er en relativt ung ramme, finder du ikke mange paperbacks. De fleste Bootstrap-ressourcer offentliggøres online, så forvent ikke at finde nogen i din lokale boghandel.

GitHub er et godt sted at starte din søgning efter Bootstrap-ressourcer. Derudover kan du finde adskillige Bootstrap-guider og -tutorials udgivet af individuelle udviklere og softwarevirksomheder. Deres kvalitet kan variere, så sørg for at kontrollere feedback fra samfundet, før du vælger en.

Gratis interaktive kurser

Læsning om software og rammer kan vise dig de grundlæggende brugsmodeller og regler, men for at få et rigtigt præg af, hvordan en ramme fungerer, er du nødt til at se det i handling.

Gratis interaktive online onlinekurser er den bedste måde at få en virkelig følelse af, hvordan en ramme fungerer, og hvad den kan gøre.

Disse kurser har en online compiler, så du kan udføre og se eksemplerne med det samme:

  • Se det grundlæggende i Bootstrap i Codecademy-tutorial. Dette er en kort begyndertutorial, der guider dig gennem grundlæggende HTML, CSS og tilføjelse af Bootstrap til dit websted. Denne tutorial viser dig den grundlæggende syntaks for Bootstrap med dens online compiler.
  • W3Schools Bootstrap 3 Tutorial er en omfattende og meget detaljeret trin-for-trin-guide med en komplet Bootstrap-reference til alle CSS-klasser, komponenter og JavaScript-plugins.
  • Tutorialspoint Bootstrap-tutorial er meget detaljeret og dækker næsten alt hvad du har brug for at vide om Bootstrap, fra Bootstrap CSS, layoutkomponenter, plugins, demoer og nyttige ressourcer. Denne Bootstrap-tutorial indeholder også en online compiler og er også tilgængelig som PDF-download.

Disse interaktive kurser skal give dig en god nok forståelse af Bootstrap til at begynde at bruge det på dine projekter uden meget besvær.

Bootstrap-demonstrationer og yderligere ressourcer

Da Bootstrap er så populært og udbredt, er det ikke let at udskrive et par websteder for at vise styrken og funktionerne i det i handling.

Derfor overlader vi dette valg til Bootstrap-kerneteamet og giver dig deres officielle Bootstrap Expo med smukke og inspirerende eksempler på Bootstrap.

Åbn eksemplerne, og ændr størrelsen på browservinduet for at se RWD-funktioner i Bootstrap i aktion, dynamisk tilpasse sidelayoutet til forskellige skærmstørrelser.

Hvis du er klar til at begynde at bruge Bootstrap, og du har brug for yderligere nyttige ressourcer til dine projekter, så tjek nogle af følgende:

  • Bootstrap officielle temaer fra skaberne af Bootstrap
  • Markedspladser med med premium, kommercielle Bootstrap-temaer og skabeloner: creativemarket.com, wrapbootstrap.com, themeforest.net
  • Gratis Bootstrap-skabeloner og temaer: startbootstrap.com, shapebootstrap.net, bootstrapzero.com.

Der er selvfølgelig mange andre Bootstrap-ressourcer tilgængelige online, og samfundet bidrager regelmæssigt med nye, så det kan ikke være et problem at finde det, du har brug for.

Ebøger og Paperbacks

Der er mange online ressourcer til rådighed for Bootstrap, men hvis du foretrækker en bog eller en e-bog, er valget begrænset.

Selvom det er så mange gratis online-tutorials og ressourcer, er det måske bedre at prøve nogle af disse freebies først. Når du har mestret dem, kan du overveje at købe et par bøger.

Hvis du foretrækker fysiske tekster og bøger, er her nogle af de Bootstrap-tekster, der er tilgængelige i dag:

  • Trin for trin Bootstrap 3: En hurtig guide til responsiv webudvikling ved hjælp af Bootstrap 3 af Riwanto Megosinarso er en ægte trinvis vejledning for begyndere. Det anbefales, hvis du er helt ny med Bootstrap, og det dækker nok til at komme i gang.
  • Jump Start Bootstrap af Syed Fazle Rahman er velegnet til begyndere og mellemudviklere, der dækker alt, hvad du har brug for, implementer Bootstrap på din webside.
  • Bootstrap Site Blueprints af David Cochran og Ian Whitley er skrevet for begyndere til mellemliggende frontend-udviklere. God dækning af tilpasning af Bootstrap-komponenter og -layouts.

Alle tre er også tilgængelige i e-bog-form til Kindle.

Vigtige links

  • bootstrap
  • Bootstrap på GitHub.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map