I den tidligere opplæringen i serien vår på Bootstrap 3, lærte du om noen av CSS-funksjonene som har endret seg i versjon 3. I denne opplæringen avsluttes det med andre endrede funksjoner, for eksempel bilder og knapper.

Knappendringer 

Den mest fremtredende forandringen i klassene som brukes til å style knapper i BS3 er standard stil. Under BS2, legger du ganske enkelt til btnklassen til et inngangselement av typen knapp, eller til en ankermerke, ville gi kontrollen standardknappen ser ut og føles. 

Fra BS3 og fremover, må du nå eksplisitt legge til btn-standard; bare å legge til btnpå egen vilje vil nå ikke lenger ha noen effekt. 

Den andre hovedendringen er å omdøpe noen av grunnklassene. nærmere bestemt, btn-errorhar blitt omdøpt til btn-fareslik at navngivningssystemet samsvarer med de andre tilsvarende navngitte klasseendringene og bringer enhetlighet til Bootstrap-basebiblioteket. 

Annet enn det, forblir baseknappklassene uendret, ettersom følgende kodeprøve viser: 

Misligholde primær~~POS=TRUNC Suksess info Advarsel Fare link

Når du gjengis i nettleseren, ser du den vanlige flatknappen ser BS3 nå har for kontroller: 

Det er noen nye klasser for knappelementet, lagt til for å gi enhetlighet til grid-dimensjoneringsklassene. Disse klassene er btn-lg, btn-sm, og BTN-xs; det er ingen btn-md, som den mellomstore knappen er standardstørrelsen som brukes når ingen klasse er angitt. 

Følgende kodeeksempel viser alle knappestiler i forskjellige størrelser: 

 Stor standardknapp Medium standardknapp Liten standardknapp Ekstra liten standard knapp 
 
 Stor primærknapp Medium primær knapp Liten primærknapp Ekstra liten primærknapp 
 
 Stor suksessknapp Middels suksessknapp Liten suksessknapp Ekstra liten suksessknapp 
 
 Stor info knapp Medium info knapp Liten informasjonsknapp Ekstra liten info-knapp 
 
 Stor advarselsknapp Mellom advarselsknapp Liten advarselsknapp Ekstra liten advarselsknapp 
 
 Stor fareknapp Medium fare knapp Liten fareknapp Ekstra liten fareknapp 
 
 Stor koblingsknapp Medium koblingsknapp Liten koblingsknapp Ekstra liten koblingsknapp 

Når gjengitt i nettleseren, bør denne koden prøven gi deg følgende utgang: 

Når du legger til klassen btn-blokktil en knapp eller et ankerelement utformet ved hjelp av en av de foregående knappeklassene, strekker den knappen for å fylle 100 prosent av ledig plass. Dette er nyttig når du produserer dialogbokser og størrelseskontroller med BS3-gridsystem, da det gir deg mulighet til å spesifikt størrelse knapper (og andre elementer) for å opprettholde en god balanse i formutformene dine. 

I de fleste tilfeller trenger du ikke å angi en knapps aktiv tilstand selv, men hvis du gjør det, kan du enkelt legge til aktivklasse til ethvert element merket opp ved hjelp av knappeklassene. Aktivgenerelt (på element i det minste) bruker vanligvis :aktivpseudofunksjon for å endre knappens stil. Legge til aktivklassen vil imidlertid tvinge knappen til å vise sin aktive tilstand. 

Merk: Hvis du tenker på å bruke den aktive tilstanden for å lage klistrede knapper, vær oppmerksom på at i de følgende opplæringsprogrammene skal vi diskutere knappestater ved hjelp av komponent- og JavaScript-anleggene som er tilgjengelige. BS3 gir bare en slik klebrig knapp med de ekstra funksjonene som er tilgjengelige i disse anleggene, slik at du ikke trenger å lage dine egne klissete knapper ved å bruke aktive under de fleste omstendigheter.

Du kan også deaktivere knappene dine og markere dem som inaktive ved hjelp av de samme "deaktiverte" klassene og attributter som vi diskuterte tidligere med endringene i formelementene. 

Følgende kode viser knapper merket opp for å se aktive og i deaktiverte tilstander: 

Aktiv primærknapp Aktiv standardknapp

Deaktivert primærknapp Deaktivert standardknapp

Vær imidlertid oppmerksom på at i tilfelle ankerknapper, er funksjonshemmetelement / klasse gjør ikke deaktiver koblingen For å sørge for at en deaktivert tilstand ankerlink ikke brann, må du bruke tilpasset JavaScript. 

Av denne grunn anbefaler BS3-teamet at du bruker element der det er mulig å merke knapper, og bruk bare ankeretiketter under spesielle forhold. 

La oss heller ikke glemme emnet "idempotence" og betydningen av å bruke knapper over ankre. Generelt er en ankerlink hensiktsmessig dersom bestemmelsesstedet er en forespørsel, og å gjøre koblingen flere ganger, vil ikke forårsake noen problemer ved gjentatt aktivering. ellers, bruk en knapp. 

Bildeendringer 

CSS endringer, hvor den ydmyke bildemerket er bekymret, har ikke vært så vidtgående som i andre steder i BS3. Tidligere var bildene ikke responsive som standard, og som med mange ting i BS2 måtte du legge til de valgfrie responsive klassene for å komme hvor som helst i nærheten av å være lydhør med dem. 

Dessverre, selv etter at du la til de valgfrie responsive klassene, var det fortsatt ikke perfekt; mange siterte problemer med sider der Google Maps ble brukt, blant annet. 

BS3 endrer alt dette. Nå er bildene som standard fullt mottakelige ved bruk av en stikkord. For å utvide og gjøre denne responsen enda bedre og mer flytende, kan du legge til img-responsivetil hva som helst tag for å sikre at selv når du skalerer riktig, forblir bildens høyde og bredde også i forhold til hverandre. 

Annet enn det er den eneste andre endringen som er gjort i bildeseksjonen navnet på img-polaroidklasse (brukes til å generere miniatyrbilder) til img-thumbnail, slik at den faller i tråd med annen lignende omdøping i hele biblioteket. 

BS2-klassene jeg har husarrestog img-sirkelFortsett å jobbe som de gjorde tidligere, og gi en sirkulær og avrundet rektangel-miniatyr-effekt. 

Hjelper- og synlighetsendringer 

Til slutt kommer vi til endringene som dekker de tingene som egentlig ikke passer inn i noen spesifikke kategorier. 

Under typografi klassene i BS2 ble du opprinnelig innført i et sett med fargeklasser som brukes til å sette fargen på et tekstelement til de samme merkevarenes farger som brukes i andre elementer i rammen. 

BS3 tar dette et skritt videre og introduserer konseptet om å ha de samme fargene som brukes til kontekstuell bakgrunn også. 

I dette tilfellet er bakgrunnen en lettere variasjon, som brukes i paneler og varslingsbokser andre steder. Det er en ekstra bonus: Hvis du bruker disse kontekstuelle fargeklassene på ankerkoder og alt annet som har et hover-over-sett som standard, vil fargene automatisk dimme litt for å vise at de har blitt svevet over. 

Som med navngivningen i andre fargebaserte klasser, er klassene som er tilgjengelige her tekst-dempet, tekst-primær, tekst-suksess, tekst-info, tekst-advarsel, og tekst-farefor avsnitt, span og andre inline- eller blokkbaserte tekstelementer. 

For bakgrunnsfarger er klassenavnene bg-primær, bg-suksess, bg-info, bg-advarsel, og bg-fare. 

Følgende kode viser et eksempel på bruk av dem: 

Dette avsnittet bruker den deformerte teksteklassen, Vanligvis reservert for noe som ikke er veldig viktig eller mindre fremtredende.
 
Dette avsnittet bruker primærtekstklasse, Vanligvis reservert for noe viktig eller standard og synlig.
 
Dette avsnittet bruker suksess tekst klassen, Vanligvis reservert for en handling som bare lykkes eller noe godt og gratulerer.
 
Dette avsnittet bruker info tekst klassen, Vanligvis reservert for uformelle meldinger, for eksempel en bakgrunnsjobb som bare er ferdig eller en ny fil tilgjengelig.
 
Dette avsnittet bruker advarselsklassen, Vanligvis reservert for noe som kan være farlig eller som trenger oppmerksomhet, men kan vente en stund.
 
Dette avsnittet bruker faren tekst klassen, Vanligvis reservert for noe veldig viktig, eller noe som virkelig trenger oppmerksomhet som drar til det.
 

 
Dette avsnittet bruker vanlig tekst, men med en primær bakgrunnsfarge for å fortelle deg at det du ser er standardstatusen.
 
Dette avsnittet bruker vanlig tekst, men med en suksessbakgrunnsfarge for å fortelle deg at det du ser er alt bra.
 
Dette avsnittet bruker vanlig tekst, men med en bakgrunnsinformasjon for å fortelle deg at det du ser er informativt og bør leses, men ikke alltid handlet på.
 
Dette avsnittet bruker vanlig tekst, men med en advarselsbakgrunnsfarve for å fortelle deg at det du ser kan føre til problemer som du bør være oppmerksom på.
 
Dette avsnittet bruker vanlig tekst, men med farlig bakgrunnsfarge for å fortelle deg at det du ser må du være oppmerksom på det nå.

En ting som ble notert som nødvendig i BS3, og ikke tilstede i BS2, er en dedikert caretklasse for nedtrekksindikatorer på knapper og andre skjermmøbler. 

Du kan nå bruke dette på dine egne elementer ved å legge til et klassenavn på carettil din ytre beholder-a eller

som bryter inn ditt indre innhold. 

Et annet nytt tillegg i BS3, mens det egentlig ikke er en klasse, fortjener fortsatt en omtale: dialogboksen tverrkorset. 

Akkurat som caret, Dette var tilstede i BS2, men var ikke tilgjengelig for bruk separat fra den tilsiktede bruken i modale dialoger og advarselsstenger. Men fra BS3 og videre, kan du bruke det helt fint på egen hånd. 

Følgende kodeeksempel viser et eksempel på begge caretklasse og nært kryss i generisk mark-up: 

x

Denne teksten vises i en div som har sitt eget lukkikonet knyttet til det.

Akkurat som i BS2, bruker rask flyt verktøyet klasser pull-venstreog pull-righteksisterer fortsatt, men de er nå med i senter-blokk, som bare gjør begge margene automatiske og sentrerer elementet i sin overordnede, og clearfix, som fjerner eventuelle flyter du kan bruke, og gjenoppretter normalt dokumentflow. 

Andre nye klasser inkluderer vise fram, skjult, og usynligklasser. Vise framganske mye snakker for seg selv, men hva er forskjellen mellom de to sistnevnte? skjultKollapser fysisk plassen som brukes av elementet, så hvis du har den i en full høyde div for eksempel, vil den div kollapse ned til sin minste høyde. Men hvis du bruker usynlig, elementet beholder sin plass (og opptar fortsatt sin plass i elementstrømmen), men det forsvinner fra visning. 

Vi har allerede sett at en ny klasse kalles sr-onlyhar blitt introdusert for å markere en blokk som synlig for skjermlesere og ingenting annet. Det er nå en annen klasse som dette som brukes til grafiske overskrifter. 

Hvis du definerer en sidetittel ved hjelp av et bildebanner, vil en typisk skjermleser ikke kunne fortelle hva teksten i bildet sier. I lang tid har mange forfattere brukt en hackkalt bildeutskifting for å komme seg rundt dette. Bildeutskifting fungerer ved å pakke inn bildebanneret i en H1eller noen annen standardtype-tag, sette navnet i den som klar tekst ved siden av bildebanneret, og bruk deretter CSS for å flytte tekst av skjermbildet. 

Hva skjer da er det visningsvis, bildebanneret blir sett av de med godt syn, men de som bruker en skjermleser, hører leseren å si den faktiske teksten i bildebanneret. 

BS3 gir nå en klasse som heter tekst-hidefor å lette dette. Et enkelt eksempel følger: 

  
En grafisk bildebasert tittel
 

Output generert av kodeksempel i en vanlig PC-nettleser

Til slutt kommer vi til siste av sistnevnte i CSS-endringsavsnittet. 

Hvilken god ville et responsivt webdesign rammeverk være uten bruksklasser for å hjelpe deg med å administrere dine responsive layouter? 

"Men vær så snill, vi har dekket det med rister," Jeg hører deg, og ja, vi har. Men BS3 har enda et knep på ermet, som i all rettferdighet var tilstede i BS2, men fungerte egentlig ikke så bra. 

Så hva er dette ekstra magiske? La meg introdusere deg til de responsive synlighetsklassene. 

I det vesentlige, hva disse små edelstenene gjør er at du kan bytte og endre deler av brukergrensesnittet ditt, avhengig av rutenettet og skjermstørrelsen. 

La oss for eksempel forestille deg at du har en liste over e-postinnbokselementer, og når den vises på en stasjonær PC, har hvert element en forhåndsvisning ved siden av den, i likhet med et klassisk e-postlesingsprogram. Noe kanskje som følgende: 

E-post applikasjon layout eksempel

Nå er dette bra til du prøver å passe på den på en mobil enhet, der du absolutt vil gjemme forhåndsvisningspanelet og bare forlate e-postlisten. Normalt utføres en oppgave som dette ved hjelp av en liten bit av JavaScript for å endre synligheten av elementet ved å endre elementets synlige innstillinger. 

BS3 har en innebygd løsning som bruker CSS-klasser som hjelper deg med å håndtere slike situasjoner med stor letthet. Ta følgende bit av kode: 

 
 
 
 
E-post 1 (1/1/11)
 
 
 
E-post 2 (1/1/11)
 
 
 
E-post 3 (1/1/11)
 
 
 
E-post 4 (1/1/11)
 
 
 
E-post 5 (1/1/11)
 
 
 
E-post 6 (1/1/11)
 
 
 
 
 
E-post 2: Mottatt (1/1/11)
 
Til: En person
 
 
 
Kjære En person,
 
Blah blah blah blah blah blah blah
 
 

Hvis du gjør dette i nettleseren din, bør du få noe som ser ut som følgende: 

E-post søknad mock-up produsert av tidligere kodeksempel

Hvis du imidlertid endrer størrelsen på nettleseren din til mobilskjermstørrelse, begynner ting å se litt rart ut: 

E-postprogrammet mock-up på en forstørret visning

Dette kan fungere for noen, men generelt er det en dårlig ide. Hva skjer når du har 100 uleste e-postmeldinger, og må rulle til bunnen av visningen hver gang for å lese forhåndsvisningen? 

Ta hovedforhåndsvisningen