Bootstrap 3 sier mobil først, alt annet senere

Web-frontend-rammen Bootstrap effektiviserer byggingen av en responsiv webapplikasjon ved å tilby nesten alt du trenger. Tidligere versjoner av Bootstrap startet med desktop-klienter og nedgraderte grensesnittet for mindre, mobile klienter. Bootstrap har snudd denne tilnærmingen som begynner med den nåværende utgivelsen (v3.0.0) ved å være mobil først. Nettsteder bygd med den nåværende Bootstrap-versjonen (og utover) målretter mobilenheter og skalerer for større skjermer avhengig av skjermstørrelse.

Ikke bakoverkompatibel

Min første erfaring med den nyeste versjonen av Bootstrap var ganske sjokk, da jeg konverterte en eksisterende applikasjon bygget med Bootstrap 2.3.2 ved ganske enkelt å oppdatere ressursreferanser (CSS og JavaScript) til 3.0.0-versjonene. Nettoresultatet av disse endringene var et manglet nettsted, noe som ikke burde ha vært en overraskelse fordi denne informasjonen er tydelig angitt i rammens dokumentasjon. Ja, jeg leste dokumentasjonen, men jeg måtte prøve den for å se selv.

Årsaken til at den siste versjonen ikke er bakoverkompatibel, er en rekke klasseendringer. De mest bemerkelsesverdige endringene inkluderer fjerning av væskeklassene (.container-fluid og .row-fluid) som ble brukt til å bygge responsive grensesnitt. Med Bootstrap 3.0.0 reagerer nettsteder som standard, men det er et alternativ for å deaktivere den funksjonen. Borte er dagene med sider med pikselbredde - si hei til prosentbaserte oppsett fremover. Andre endringer som forårsaket problemer inkluderer fjerning av søkeskjemakontroller (.form-handlinger og .form-search) og .navbar-indre klasse.

Det er for mange klasseendringer til å dekke her, men online-dokumentasjonen gir alle nødvendige detaljer i tillegg til 3.0.0 ekvivalente funksjoner (der det er tilgjengelig). I tillegg inneholder det offisielle Bootstrap-blogginnlegget som kunngjør den nye versjonen nyttig informasjon.

Mange nye funksjoner

Nye klasser og funksjoner er lagt til i rammen. En ny funksjon som jeg bruker på nettstedet jeg bygger om, er panelkomponenten ( figur A ), som lar deg plassere et panel med informasjon (med valgfri topptekst og bunntekst) på siden. Panelet kan inneholde en grense, kundefargevalg og være sammenleggbar. I tillegg er det klasser for listegrupper, nye skjemakontroller og miniatyrbilder.

Figur A

Navneklassen har blitt overhalt med alternativer for å bruke en fast navne som alltid er synlig øverst på siden eller en statisk navla sammen med å være berettiget ( figur B ). Det finnes en rekke eksempler på nettet (jeg antar at Bootstrap vil fortsette å legge til flere eksempler) som gir en god følelse av hvordan ting fungerer.

Figur B

Nettbasert

Bootstrap 3.0.0 bruker et nettbasert system for layout og presentasjon. Den inkluderer fire rutenettklasser som er målrettet mot forskjellige enheter: stasjonære maskiner (vanlige og store), telefoner og nettbrett. Disse klassene kan brukes til å levere innhold / layout basert på enheten eller nettet. Bootstrap 3.0.0 lover en generell bedre flyt og dimensjonering, men jeg har ikke sett nok nettsteder som bruker den for å bekrefte denne påstanden.

Nettleserstøtte

Dokumentasjonen for Bootstrap 3.0.0 er oppdatert og utvidet, og det er veldig enkelt å finne informasjon. Dokumentasjonen om funksjoner og klasser er flott, mens detaljene om nettleserstøtte og midlertidig løsning er interessante. For eksempel støtter ikke Bootstrap Internet Explorer 7 og Firefox 3.6, og det er problemer med Internet Explorer 8 til 10 så vel som andre nettlesere. dokumentasjonen inneholder detaljer om hvordan du får nettstedene dine til å fungere best med disse nettleserne.

Dokumentasjonen har også en fin seksjon (med lenker) om tilgjengelighet.

Oppgradering fra en tidligere versjon

Endringen til at alt reagerer introduserte mange problemer på eldre nettsteder, og den nyoppdaterte navlinjen inneholder flotte nye funksjoner, men krevde mye omarbeiding. Så når du oppgraderer eller ettermonterer et nettsted bygget med en tidligere versjon (eller versjoner) av Bootstrap, må du gjøre et antall endringer.

Siden Bootstrap 3.0 håndterer skjermoppløsningene på en annen måte, måtte jeg omskrive eksisterende Bootstrap 2.3.2-kode for å bruke de nye klassene for klientskjermstørrelser, som kan tilpasses til stasjonære maskiner, nettbrett og telefoner. Andre mindre endringer som fjerning av søkeskjema og trekkspillklasser krevde omarbeidelse.

Det var et stort skifte for meg å komme inn på den mobile første tankegangen når jeg utviklet en nettapplikasjon. Jeg hadde brukt skrivebordet som utgangspunkt, men dette er en industri- og samfunnsforskyvning som ikke kan ignoreres. Dette ble gjort klart da en klient nylig sa: "Jeg vil ikke ha et eget design for mobil, men jeg vil at nettstedet skal fungere på min iPhone."

Et imponerende utgangspunkt

Bootstrap gir et godt grunnlag for å bygge fullverdige, responsive webapplikasjoner som teoretisk kan fungere på alle plattformer. Dette skjer ikke automatisk - du må fortsatt designe og bygge applikasjonen med plattformer i tankene, noe som krever grundig testing på tvers av de forskjellige klientene for å sikre at alt fungerer som planlagt. Sjekk ut BrowserStack for den delen av prosessen.

Del dine første inntrykk av Bootstrap 3.0.0 i diskusjonen.

Les mer om Bootstrap på TechRepublic

  • Bygg kraftige nettgrensesnitt med Bootstrap
  • Alternativer for å tilpasse et Bootstrap-nettsted
  • Divshot forenkler å bygge webapplikasjoner med Bootstrap

© Copyright 2021 | pepebotifarra.com