Hvis du gjør noe nettrelatert, er sjansen stor for at du har hørt om Bootstrap. Hvis du fremdeles ikke vet hva Bootstrap er, eller bare ønsker å finne en Bootstrap-opplæring for nybegynnere for å få en bedre oversikt over hva det er og hva det gjør best, har du kommet til rett sted.

Støvelhempe er en kraftig verktøysett - en samling av HTML-, CSS- og JavaScript-verktøy for å lage og bygge websider og webapplikasjoner. Det er et gratis og åpen kildekode-prosjekt GitHub , og opprinnelig opprettet av (og for) Twitter .

Så hvorfor lære Boostrap?

Etter utgivelsen av åpen kildekode i 2011 ble Bootstrap populær veldig raskt, og ikke uten grunn. Webdesignere og nett utviklere som Bootstrap fordi den er fleksibel og enkel å jobbe med. Hovedfordelene er at den er responsiv av design, den opprettholder bred nettleserkompatibilitet, den gir jevn design ved å bruke gjenbrukbare komponenter, og den er veldig enkel å bruke og rask å lære. Det tilbyr rik utvidbarhet ved hjelp av JavaScript, med innebygd støtte for jQuery-plugins og et programmatisk JavaScript API. Bootstrap kan brukes med hvilken som helst IDE eller editor, og hvilken som helst server-side teknologi og språk, fra ASP.NET til PHP til Ruby on Rails.

Med Bootstrap, webutviklere kan konsentrere seg om utviklingsarbeidet, uten å bekymre seg for design, og få et flott nettsted til å gå raskt i gang. Omvendt gir det webdesignere et solid grunnlag for å lage interessante Bootstrap-temaer.

Komme i gang med Bootstrap Basics

Bootstrap er tilgjengelig i to former; som en forhåndskompilert versjon, og som en kildekodeversjon. Kildekodeversjonen bruker Mindre CSS preprosessor, men hvis du er mer interessert i Sass, er det en offisielle Sass-port av Bootstrap også tilgjengelig. For å gjøre det lettere å bruke CSS-leverandørprefikser, bruker Bootstrap Autofrefixer .

Kildekodeversjonen leveres med kildekoder skrevet i Less (eller Sass), all JavaScript og tilhørende dokumentasjon. Dette gjør at mer ambisiøse designere og utviklere kan endre og tilpasse, etter eget ønske, alle de stilene som følger med, og å bygge sin egen versjon av Bootstrap. Men hvis du ikke er kjent med Less (eller Sass), eller bare ikke er interessert i å endre kildekoden, ikke bekymre deg. Du kan bare bruke den forhåndskompilerte vaniljen CSS. Alle stilene kan overstyres senere ved å bruke egendefinerte stiler.

Filstruktur

Vi vil fokusere på den forhåndskompilerte versjonen, som kan lastes ned her . Når du laster ned zip-arkivet og pakker ut det, ser den grunnleggende filstrukturen slik ut:

Bootstrap-strukturen er ganske enkel og selvforklarende. Den inkluderer forhåndskompilerte filer som muliggjør rask bruk i ethvert webprosjekt. Foruten kompilerte og minifiserte CSS- og JS-filer, inkluderer den også skrifter fra Glyphicons , og valgfritt start Bootstrap-tema.

Denne strukturen kan enkelt innlemmes i filstrukturen til ditt eget prosjekt ved å bare inkludere Bootstrap-filene nøyaktig når de kommer ut av zip-arkivet, eller hvis det passer bedre for prosjektet ditt, kan du omorganisere disse filene og plassere dem hvor som helst. Bare vær sikker på at Glyphicons-skrifttypemappen er på samme nivå som CSS-mappen.

Grunnleggende Bootstrap HTML-mal

En grunnleggende Bootstrap HTML-mal skal se ut slik:

Det er viktig å starte hvilken som helst HTML med en HTML 5 Doctype-erklæring, slik at nettlesere vet hva slags dokument de kan forvente. Hodet inneholder tre viktige merker som må erklæres først, og eventuelle ekstra hodemerker må legges til etter disse. Hvis du vil støtte eldre nettlesere som IE8, kan du også inkludere HTML 5 shim i hodet, som vil muliggjøre bruk av HTML5-elementer i eldre nettlesere, og Respond.js , som vil fylle ut CSS3 Media Queries, i de gamle versjonene av Internet Explorer.

Selv om dette ikke er veldig viktig hvis du bare målretter mot moderne nettlesere.

JavaScript-filer blir lagt til på slutten av kroppen, slik at websiden kan lastes synlig før JavaScript kjøres. jQuery er nødvendig for Bootstrap-plugins, og må lastes inn før bootstrap.js. Hvis du ikke bruker noen av Bootstraps interaktive funksjoner, kan du også utelate disse filene fra kilden.

Dette er det minste minimum som er nødvendig for å få et grunnleggende Bootstrap-oppsett. Hvis du er utvikler, vil du sannsynligvis ta en titt på noen mer avanserte eksempler på Bootstraps eksempleside . Hvis du er designer, eller bare leter etter inspirasjon, Bootstrap Expo viser nettsteder som er bygget med Bootstrap. Som vi får se senere, kan alle deler av Bootstrap enkelt tilpasses i CSS. Men hvis det ikke er din ting, og du leter etter et litt annet utseende og preg fra de forhåndspakkede Bootstrap-temaene, er det mange gratis temaer med åpen kildekode og premium tilgjengelig fra kilder som Bootswatch og WrapBootstrap .

Bootstrap-maler og UI-komponenter

Bootstrap leveres med grunnleggende HTML- og CSS-designmaler som inkluderer mange vanlige UI-komponenter. Disse inkluderer typografi, tabeller, skjemaer, knapper, glyfikon, rullegardin, knapper og inngangsgrupper, navigering, paginering, etiketter og merker, varsler, fremdriftslinjer, modeller, faner, trekkspill, karuseller og mange andre.

Mange av disse bruker JavaScript-utvidelser og jQuery-plugins.

Disse Bootstrap-malene blir gjort tilgjengelige som velvurderte CSS-klasser som du kan bruke på HTML-en din for å oppnå forskjellige effekter. Dette gjør bruk av Bootstrap veldig praktisk. Ved å bruke semantiske klassenavn som .success, .warning og .info, er disse komponentene lett gjenbrukbare og utvidbare. Men mens Bootstrap bruker beskrivende klassenavn som har betydning, er det ikke spesifikt om implementeringsdetaljer. Alle klasser kan overstyres med tilpasset CSS-stil og farge, og fortsatt vil betydningen av klassen være den samme.

Bootstrap Grid System

Før vi dykker mer inn i Bootstrap-komponenter og designmaler, er det viktig å nevne en av de viktigste funksjonene som Bootstrap introduserte i versjon 3: a mobil-første design filosofi, som resulterte i en Bootstrap som er responsiv av design. Sluttresultatet er at Bootstrap enkelt og effektivt skalerer med en enkelt kodebase, fra telefoner, gjennom nettbrett, til stasjonære datamaskiner.

Denne responsen oppnås ved hjelp av et flytende Bootstrap-rutenettsystem som kan brukes til å skalere riktig opptil 12 kolonner i henhold til størrelsen på enheten eller visningsporten. Rutenett gir struktur til oppsettet, og definerer de horisontale og vertikale retningslinjene for å arrangere innhold og håndheve marginer. Rutenett har også en intuitiv struktur for seere, fordi det er enkelt å følge fra venstre mot høyre eller en høyre til venstre flyt av innhold som beveger seg nedover på siden. Før rutenett, og før CSS var så kraftig, ble rutenettbaserte oppsett oppnådd ved å bruke tabeller der innholdet skulle ordnes i bordceller. Da CSS ble mer moden, begynte det å vises en rekke CSS-rammer for nettbaserte oppsett. Disse inkluderer YUI rutenett , 960 GS og blåkopi , for å nevne noen.

For å bruke Bootstrap-rutenettet, noen få regler må følges . Rutenettkolonneelementer er plassert i radelementer, som skaper horisontale kolonnegrupper. Du kan ha så mange rader du vil på siden, men kolonnene må være umiddelbare underordnede rader. I en hel rad vil kolonnebreddene være en hvilken som helst kombinasjon som legger opp til 12, men det er ikke obligatorisk å bruke alle de 12 tilgjengelige kolonnene.

Radene må plasseres enten i en layoutomslag med fast bredde, som har .container klasse og en bredde på 1170 piksler, eller i fullbredde layoutomslag, som har .container-fluid klasse, og som muliggjør responsiv oppførsel i den raden.

Bootstrap-rutenettet har fire klasser: xs for telefoner (<768px), sm for tabletter (≥768 px), md for skrivebord (≥992 px), og LG for større skrivebord (≥1200 px). Disse definerer i utgangspunktet størrelsene der kolonnene vil kollapse eller spre seg horisontalt. Klassene kan brukes i alle kombinasjoner for å få dynamiske og fleksible oppsett.

Hvis vi for eksempel vil få to rader, en med to kolonner og en med fire, kan vi skrive:

Vi kan også bruke blandede kolonnebredder:

Vi kan til og med skifte kolonner ved å bruke offset, for eksempel for å lage mer smalt og sentrert innhold:

Kolonner kan nestes. Det kan være færre enn 12 kolonner, og som nevnt ovenfor kan vi velge kolonner med fast bredde eller full bredde ved å bruke .container eller .container-fluid innpakninger, henholdsvis.

Hvis vi kombinerer forskjellige klassetrinn, vil vi få forskjellig utseende på mobil og på stasjonære visninger. I eksemplet nedenfor vil det på skrivebordet være fire kolonner på en linje, og på mobilen vil de ha full bredde og stabel på hverandre.

Det er mulig å deaktiver sidesvar helt. Dette vil i utgangspunktet deaktivere 'mobile site' aspektene av Bootstrap. Bare husk at hvis du deaktiverer respons, vil ikke alle komponenter med fast bredde, for eksempel en fast navbar, ikke være synlig når visningsområdet blir smalere enn sideinnholdet. For en ikke-responsiv container betyr det en bredde på 970 px. Også i dette tilfellet vil navfelt ikke kollapse i mobilvisninger som beskrevet senere.

Dette er bare grunnleggende eksempler. For å se nettets fulle potensiale, sjekk ut Bootstraps Grids-dokumentasjon .

Bootstrap Typography

Begynnende utviklere antar ofte at deres rene og ikke-stilede HTML vil se likt ut i alle nettlesere. Dessverre har hver nettleser sitt eget standard 'user agent' stilark som brukes på HTML, og ingen nettlesere har de samme standardinnstillingene. For eksempel er skriftstørrelser for overskrifter ikke konsistente på tvers av nettlesere, noen uordnede og ordnede lister har venstre marginer og andre har igjen polstring, nettlesere bruker tilpassede kanter og polstring i HTML-brødteksten, og til og med knapper gjengis forskjellig på tvers av nettlesere. For å løse alle disse uoverensstemmelsene ble det født forskjellige CSS 'reset' -regler som definerer konsistente standardinnstillinger.

Bootstrap bringer noen flere godbiter til bordet i tillegg til ren CSS-tilbakestilling. Den kommer med normalisere.css , et HTML5-klart alternativ til CSS-tilbakestillinger, og det har også noen egenutviklede standardverdier. For eksempel angir Bootstrap den globale standard font-size til 14 px, med en linjehøyde på 1.428. Standardskrifttypen endres til Helvetica / Arial, med sans serif fallback. Alle disse stilene brukes på alle avsnitt, med tillegg

(avsnitt) mottar en bunnmargin på halvparten av den beregnede linjehøyden (10px som standard). I tillegg til disse standardene er det også tilpassbare stiler for standard HTML-koder som gir mer konsistens til teksten, for eksempel uthevet tekst (), slettet tekst (og), understreket tekst (), liten tekst () og fet tekst ( ). Justeringsklasser hjelper deg med å ordne innhold på siden lettere ved å bruke .text-left, .text-center, .text-right, .text-justify og .text-nowrap klasser. Det er også forhåndsdefinerte stiler for blokketilbud, og uordnet og ordnet liste, med innebygde alternativer, bare for å nevne noen. For å få en full liste, gå til Bootstrap Typography-side .