Share
Velkommen til denne serien som dekker brukergrensesnittet for Twitter Bootstrap (BS) UI og CSS.
I min bok, Twitter Bootstrap Succinctly, la jeg opp det grunnleggende grunnlaget og kom deg i gang med Bootstrap 2.
Siden denne boka ble utgitt, har Bootstrap 3 imidlertid blitt den vanlige versjonen.
I denne serien skal vi fortsette å bygge videre på det grunnlaget og fortsette å bruke BS v3. Vi ser etter hvor ting er forskjellige, og når vi ser på de nye funksjonene, ser vi at en stor del av det som var til stede i v2, fortsatt er aktuelt for v3.
Hvis du ennå ikke har lest boken på Bootstrap 2, oppfordrer jeg deg til å gjøre det, da jeg vil referere til det på forskjellige punkter i hele serien.
Hvorfor? Jeg tror at for å forstå hele Bootstrap-landskapet må du undersøke det fra begynnelsen. Du må kunne forstå hva det står for å oppnå og hvordan.
Du vil kunne følge denne serien og lære grunnleggende av BS v3, men du får en mye dypere, bedre forståelse hvis du leser v2-boken først.
Så hva er endret fra v2 til v3?
Ganske mye.
Den store forandringen mellom de to versjonene er at v3 er nå "Mobile First". Bootstrap v2 var et responsivt layout CSS-sett, men dets mobile og responsive funksjoner var alltid andreplassen til sine rike UI-funksjoner. Faktisk, for å få de responsive produktene til å fungere riktig, måtte du inkludere en andre CSS-fil, hvis eneste formål var å aktivere de responsive, mobile funksjonene og ingenting annet.
I v3 har hele denne situasjonen blitt helt reversert. Hele rammen er nå mobilvennlig og lydhør ut av boksen, og det tar nå ekstra arbeid for å tilpasse oppsettene dine for større skjermformater. Ikke misforstå, det er på ingen måte en stor mengde arbeid. Det meste av det du trenger å endre, er ganske enkelt bare å bytte klasser om og strukturere HTML-merket ditt riktig.
Den andre store endringen er i navngivning av klasser og API-anrop. Mange av klassenavnene som ble introdusert i v2 er nå enten avskrevet eller blitt omdøpt til noe mer egnet til deres tiltenkte formål.
Det har også vært en stor innsats for å gi navn til klassene for å være mer konsistente. For eksempel, i v2, for elementer som retter seg mot den røde feilfarge, hadde vi følgende klasser:
Accentsconagua
btn-fare tekst-feil tr.error .viktig .viktig .feil fremgang-fare Nå, i v3, har disse blitt konsolidert slik at navngivning er lik over alle komponenter som følger:
btn-fare tekst-fare .fare .fare Progress-bar-fare Som du ser, er konsistens nå en stor aktør i v3-klassene, og mange andre lignende endringer har blitt gjort over hele rammen.
Det har vært ganske mange mindre endringer også. For eksempel har bokmodellen brukt av Bootstrap nå blitt forbedret betraktelig, med alle elementene som nå benyttes border-box som standard CSS-boks størrelsesmodell.
Gittersystemet har blitt utvidet og forbedret også, og i stedet for å være et monolitisk rutenett med valgfrie klasser, består den nå av fire nivåer av gitterstørrelser spesielt rettet mot telefoner, tabletter, stasjonære og store stasjonære datamaskiner.
Alle JavaScript-innholdene har også nå blitt navngitt for å redusere konflikt med andre JavaScript-koder; De tilgjengelige hendelsene er nå bedre oppkalt for å reflektere deres formål og er mye tydeligere dokumentert.
Modals og navbars har blitt vesentlig forbedret når det gjelder lydhørhet, og sammen med klassenavnende endringer har størrelsesklassene for alle komponentene (Inc Nav Modals) nå blitt justert.
Component-wise, noen av de eldre, mindre brukte komponentene er blitt avskrevet og fjernet, den mest bemerkelsesverdige som er den Trekkspill komponent. Men fortvil ikke-trekkspillet har blitt erstattet med en helt ny sammenlegg-panel komponent som er mye mer fleksibel enn sin forgjenger.
Vi har også en ny, smal Jumbotron, ny panel typer, listegrupper og mye mer.
Endelig endrer den den alle vil legge merke til er utseendet og følelsen: TWB V3 er flatt. Den har et enkelt farget, nytt grensesnitt, men med avrundede hjørner flatt.
Hoverklassene har ikke lenger gode utførte effekter i dem, og fremdriftslinjene og knappene ser ikke lenger halv-3D ut som de gjorde i v2. I stedet, hva vedlikeholderne av Twitter Bootstrap har bestemt å gjøre, er å gjøre det lettere å tilpasse utseendet på elementene som er i CSS.
Vedlikeholdene har til og med gjort tilgjengelig et "Bootstrap" -tema som gjør at v3 ser ut som det opprinnelige v2-designet for å komme i gang. I den siste delen av denne serien vil jeg vise deg hvor enkelt det er å overstyre de ulike klassene, og vise deg hvordan du skal overhale det flate temaet for å ta på seg ditt eget utseende.
For nå skjønt, hvis du vil ha v2-opplevelsen, må du sørge for at du også inkluderer riktig CSS-fil etter behov. Hvis du vil holde fast ved standard v3, trenger du ikke noe ekstra.
Når BS2 ble først utgitt, var den eneste måten å få det på via en nedlasting fra prosjektets nettside. Dette ble omtalt i den første boken med en grundig diskusjon om nøyaktig hvilke filer som var i zip-filen og hvorfor.
Fordi så mange brukte Bootstrap, tok det ikke lang tid før det ble gjort tilgjengelig gratis på CDN av folkene som kjører MaxCDN. Denne tradisjonen har fortsatt i v3-koden, og du kan nå bare få den valgte standard v3-installasjonen din ved hjelp av følgende HTML-skriptetiketter:
Hvis du bruker CDN-versjonene, husk at du også må sørge for at du inkluderer en nylig kopi av JQuery; ingen av BS3 JS-funksjonaliteten vil fungere med mindre du gjør det.
I tillegg til CDN-koblingen er det nå også en direkte nedlasting på getbootstrap.com-siden, ikke bare for standard JavaScript og CSS-pakken som beskrevet i forrige bok, men også en direkte kobling til en zip-fil av den opprinnelige " Mindre "kilder og en konvertering til" Sass "for de som ønsker å kunne inkludere en helt variabelbasert, tilpassbar versjon av koden i ditt eget byggesystem ved hjelp av verktøy som Grunt for å automatisere ting.
I tillegg til de nye kildene kan du nå også bruke Bower til å installere alt du trenger ved å bruke følgende fra kommandolinjene for prosjektmapper:
bower install bootstrap
Bower er et HTML stillas- og pakkesystem designet for å automatisere mye av applikasjonsskjeleplaten. Du trenger ikke å forstå det for å forstå BS v3, men et raskt Google-søk etter "Bower" vil dukke opp mange referanser for å utdype din forståelse.
På samme måte kan BS v3 også installeres ved hjelp av NuGet pakkebehandling hvis du jobber i Visual Studio. Som Bower, vil dette automatisere mye av prosessen for å installere og sette opp de nødvendige filene. Vær forsiktig - det er mange Bootstrap-pakker tilgjengelig i NuGet, hvorav noen vil føre til mer arbeid enn de sparer deg.
Endelig er TWB-tilpasseren fortsatt tilgjengelig. Det har blitt sterkt omstrukturert og ombygd for å gi flere alternativer og et lettere, mer intuitivt blikk på hva du endrer og hvorfor.
Faktisk er det nå så enkelt å endre ting ved hjelp av tilpasseren at designeren eller designteamet kan gjøre 90 prosent av arbeidet som trengs for å angi fargene og merkevaren til nedlastingen før filene som kreves, er til og med lastet ned. Dette gjør at designavdelingen kan begynne å lage farger og layoutvalg umiddelbart, mens du arbeider på sidelayoutene og tilleggskoden for den nødvendige interaktiviteten. Da er alt som kreves for deg å bare erstatte standardfilene dine med filene du har oppgitt av designerne dine, og en øyeblikkelig temaendring skal skje.
Offisielt støtter BS v3 bare den siste runden av HTML 5-kompatible nettlesere og Internet Explorer 10 og nyere.
I virkeligheten støtter rammen også IE8 og IE9; Det er imidlertid noen funksjoner i CSS3 og HTML5 som ikke fungerer som forventet. Spesielt, hvis du vil at de responsive elementene skal fungere riktig, må du bruke respond.js, som du kan laste ned fra dette GitHub-depotet.
Når du legger til svar til prosjektet, er det i utgangspunktet bare en generell forventning til hva som var og ikke ble lagt til de ulike nettleserne, på forskjellige tidspunkter.
Delene som vil bli mest lagt merke til som mangler, er som følger:
For IE8:
border-radius er ikke støttet.box-shadow er ikke støttet.forvandle er ikke støttet.overgang er ikke støttet.plassholder teksten er ikke støttet.Dette innebærer i hovedsak at plassholdertekst i inngangselementer ikke vil vises, og alt som bruker avrundede hjørner eller drop-skygger, eller har noen form for overgang eller transformasjon på elementet, vil ikke vises riktig.
For IE9:
border-radius er støttet.box-shadow er støttet.forvandle er støttes (men bare med -ms prefiks).overgang er ikke støttet.plassholder teksten er ikke støttet.Ting er litt forbedret der IE9 er bekymret - Avrundede hjørner og slippskygger er nå fine, og transformasjoner vil også fungere, så lenge de også har en -ms prefiksversjon.
Overganger og plassholdere på inngangselementene mangler likevel dessverre.
Den offisielle støttematrixen for den nåværende versjonen av BS3 i nåværende nettlesere ser slik ut:
| Chrome | Firefox | DVS | Opera | Safari | |
|---|---|---|---|---|---|
| Android | ✓ | ✗ | ✗ | ||
| iOS | ✓ | ✗ | ✓ | ||
| Mac OS X | ✓ | ✓ | ✓ | ✓ | |
| Windows | ✓ | ✓ | ✓ | ✓ | ✗ |
Hvis du målretter mot IE9 og IE8, og bruker respond.js For å støtte disse anstrengelsene, vær så oppmerksom på følgende punkter:
Du må referere til respond.js docs hvis du er vert for CSS, etc. på et annet domene (for eksempel en CDN) for å redusere problemer med flere domener.
Nettlesersikkerhet vil føre til problemer med fil:// og @importere baserte ressursreferanser.
Spesifikk til @importere er det respond.js kan ikke lese reglene riktig, noe som er viktig for Drupal-brukere, som Drupal bruker @importere ganske tungt.
Eldre IE-kompatibilitetsmodi stopper Bootstrap fra å fungere helt, ikke bare med respond.js, så vær forsiktig hvis du tester for bakoverkompatibilitet ved hjelp av en moderne IE i emuleringsmodus - resultatene vil mest sannsynlig ikke vær hva du forventer.
Denne opplæringen representerer et kapittel fra Bootstrap 3 Succinctly, en gratis eBok fra teamet ved Syncfusion.
