Share
I denne serien på Bootstrap 3 tar vi deg gjennom alle de nye funksjonene i den nyeste versjonen av denne populære rammen. I den siste opplæringen har vi sett på noen endringer i komponentene, og denne gangen vil vi fullføre ved å se på endringer i andre komponenter, for eksempel etiketter, merker, listegrupper og paneler.
Dette kommer til å bli en veldig kort del, fordi det bare har vært to endringer på etikettene, og en stor til merkene.
For å lage en etikett i BS2, ga vi det bare en etikett-xxxx klassenavn, hvor xxxx representerer staten etiketten var å portrette. Under BS3 har vi nå en todelt klassetekst, og et nytt navn fra feil til fare for den røde fargeklassen, slik at navngivningen nå stemmer overens med alt annet, og det er ganske mye det.
Det er heller ingen størrelsesklasser / alternativer for disse i BS3, da etiketter tar størrelsen på den omkringliggende beholderen. Så, hvis du lager en med en passende etikettklasse, og deretter pakk den inn i a , Størrelsen på etiketten vil være mye større enn resten.
Følgende kodeeksempel viser dette:
Misligholde
primær~~POS=TRUNC
Suksess
info
Advarsel
Fare
Output produsert av kodeksempelMerker, derimot, har gjennomgått en større endring.
I BS3 har merker ikke lenger kontekstuelle fargeklasser. Det er, det er ikke lenger en label-suksess eller label-advarsel, som det er med de forrige etikettene og med andre elementer.
Dette betyr at du ikke kan farge merker på samme måte som i BS2, og enhver etikett du lager, kan bare gjengis ved hjelp av standard grå farge. Vel, i det minste offisielt kan du ikke.
Hvis du bruker en alert-xxxxx ved siden av a merkelapp klasse på blir brukt til etiketten din, så vil etiketten ta på fargen på denne varslingsklassen, og mens dette ikke er en støttet måte å gjøre ting på, fungerer det, og lar deg bruke etikettene som du gjorde i BS2.
For å markere en standard etikett, er alt du trenger å gjøre å legge til en merkelapp og 'Label-standard' klasse til a , og du er klar til å gå:
Accentsconagua
Dette er en etikett
Etikett produsert av kodeksempelHvis du vil hacke dine etiketter for å bruke de forskjellige farger, kan du gjøre det slik:
Normal Suksess info Advarsel Fare
Output produsert av kodeksempelEn fin funksjon som merkekomponenten fortsatt har, er imidlertid bruken av tømme: pseudo-velger, slik at den automatisk kan forsvinne fra skjermen hvis den indre teksten er tom. Dette hjelper med de interne endringene som er utformet for å fungere på listegrupper og pillelister, fordi det nå betyr at det er utrolig enkelt å lage ting som innboksvarslingslister, hvor verdiene forsvinner når innholdet fjernes. Her er et eksempel:
- 42 Innboks
- 10000 spam
- Lotteriet vinner
Output produsert av kodeksempelHvis du undersøker koden, vil du se at det siste alternativet i listen ikke har noen verdi innenfor spenningen, som på grunn av tømme: pseudo-selector, fører til at nettleseren ikke gjengir det. Men den andre du legger noe der inne med JavaScript eller en hvilken som helst metode som kan manipulere DOM, vil at badgeet kommer til å komme tilbake helt utenom et slag. Legg merke til bruken av pull-right justeringsklasse for å sørge for at etiketten sitter på høyre side av elementet, slik at alt ser fint ut og justert.
Listegrupper er en ny ting lagt til i BS3, designet for å erstatte BS2 navigasjonslister, og har langt flere muligheter enn deres BS2 motpart.
Når du begynner å bruke dem, vil du innse at listegruppene er mer som helt stilige listepostkasser, og for å være ærlig, vil alt som trengs for å lage en fullstendig stilbar boks faktisk være å pakke dem i egen div og sett overløpet for å bla på riktig måte.
En grunnleggende listegruppekomponent kan opprettes med oppslag som ligner på følgende:
Output produsert av kodeksempelSom du så tidligere i merketavsnittet, kan du legge til merker i lister og andre objekter, og hvis du legger dem til en listegruppe, retter de seg perfekt:
Utgang fra kodeksempelDe mest observante av deg kan tenke, "OK, så liste grupper ser bra ut, men de er fortsatt bare
Vel, kanskje du har rett om det ... eller kanskje må vi eksperimentere litt mer.
Listegrupper, i motsetning til klassene vi så i navigasjonsseksjonene, kan ikke bare brukes på en uordnet liste. En listegruppe kan brukes til en hvilken som helst foreldrebeholder, og når dette er gjort, vil stylingen føre til at alle barn i den beholderen blir koblet sammen. Ta en titt på følgende eksempel:
Output produsert av kodeksempelSom denne kodenprøven viser, kan vi lage en liste over koblinger som ikke bruker noe mer enn a Legg merke til at vi fortsatt får den fulle, celle-hover-effekten når musen din svinger over en kobling, og ved å legge til Men hvorfor stoppe der? På samme måte som med andre elementer i BS3, har listegrupper også egne kontekstuelle klasser for å gi dem mening i standardfargesettet: Som du kan se, hvilken bruk er en burger uten ost og en bolle? Tomater jeg kan ta eller gå, men vær så snill å holde pickle! Vi dekket de grunnleggende miniatyrbildeendringene for styling tilbake i opplæringen på CSS, men det vi ikke kom inn, er endringene i de omkringliggende komponentene. Sammenslåingen som nå finnes i BS3, gjør at vi kan kombinere miniatyrklassene med gridklassene for å lage brukervennlige billedlister. Den mest grunnleggende måten vi kan bruke dem på er å bruke For de som lurer på, bruker jeg Dette eksemplet er ingenting spesielt spesielt; hvis du har lest resten av denne serien, har du sannsynligvis allerede funnet ut hvor lett det er å gjøre dette. Men hvis vi legger til litt mer markering og arbeider med samme idé, kan vi enkelt produsere noe som følger: Planeten utstråler pulser. Dette livet er intet mindre enn en blomstrende oase av transformativ potensial utenfor vesenet. Liker Misliker Dette livet er intet mindre enn et blomstrende opprør av frekvens-aspirasjon. Potensial er rikheten av bevisst liv, og av oss. Liker Misliker Det kan være vanskelig å vite hvor du skal begynne. Totaliteten ringer til deg via subatomiske partikler. Kan du høre det? Liker Misliker Gjennom reiki blir våre essenser nurtured med hensikt. Du vil snart bli styrt av en kraft dypt inne i deg selv. Liker Misliker Å lage vertikale lister er like enkelt, men i stedet for å bruke Den primære designmotivet her er i kommentar- og meldingslister med et avatar-bilde, men de kan brukes til nyhetsartikler, produktlister og mange andre ting. For å merke et medieobjekt, bruk bare en ytre Målet med ultralydsenergi er å plante frøene av bevissthet i stedet for stagnasjon. Du og jeg er vesener av kvantmatrisen. Formålet er en konstant. Som du sannsynligvis allerede kan forestille deg, ville det ikke ta mye å legge til i en listegruppe, eller en annen struktur oppbygget ved hjelp av BS3-nettverket. BS3 gjør det faktisk mye enklere enn det ved å tilby en egen medieobjektliste og støttet oppslag. Ved å endre markeringen din bare litt, kan du generere fulle lister over medieobjekter, som følger: Bevissthet er veksten av synkronisitet, og av oss. Dette livet er intet mindre enn en utfoldende eksplosjon av uendelig sannhet. Vi eksisterer som sonar energi. Menneskeheten har ingenting å tape. Vi er på en kryssning av gjenfødelse og diskontinuitet. Vi er midt i en bevissthetsutvoksende modning av veiledning som vil fjerne en bane mot kvantesuppen selv. Vi må lære å lede enhetlige liv i lys av villfarelser. Eoner fra nå, vil våre krigere reflektere som aldri før, da vi blir gjenfødt av kvantesuppen. Vi må lokke oss og oppfylle andre. Hvis du nester Som listegrupper er paneler et nytt tillegg til BS3-og hva et tillegg de er! Vi er alle kjent med ting som skjemaer, for eksempel i gruppekasser eller deler av et nettsted som er logisk delt opp fra hverandre. BS3-paneler lar deg enkelt kontrollere denne logiske separasjonen. Du kan ha vanlige gamle paneler, paneler med overskrifter, paneler med titler i overskrifter, paneler med footers og paneler med sitt eget sett med kontekstuelle farger. Et grunnleggende panel er konstruert med bare to Men det er ikke så bra uten en tittel, og egentlig som det står i denne koden, er det ikke noe mer enn a Hvis vi legger til en tredjedel Paneloverskriften din trenger ikke å være bare en enkel Panel under overskrift Panelinnholdet går her Panelinnholdet går her Panelinnholdet går her Du kan også bruke et panelfotograf ved å legge til en En ting å være forsiktig med, skjønt - hvis du bruker Paneler kan også fungere flytende med listegrupper og tabeller. Hvis du blir med på et bord med et panel inne i foreldrene Panel under overskrift Panelinnholdet går her Panelinnholdet går her Panelinnholdet går her Hvis du fjerner Å legge til en listegruppe i panelet ditt er også like enkelt, og utført på nøyaktig samme måte. Jeg la det som en øvelse for leseren å leke med, men. Før vi endelig forlater veiledningen på komponenter bak, er det noen flere ting å dekke: Jumbotron, varselbokser, fremdriftsbjelker og brønner. Jumbotronen er ikke et nytt element, men bruken i BS2 var litt mer rotete enn det nå er i BS3. Å lage en jumbotron er veldig enkel; du bruker bare en Elsker du ikke bare dette rammene? Den er elegant, enkel å bruke, og frigjør deg fra så mye boilerplate-kode. Heck ja det gjør jeg Og det er det. Du kan fjerne de avrundede hjørnene og gjøre den i full bredde ved å bytte rekkefølgen og flytte den ut av beholderen, men det er ingen spesielle klasser eller valgfrie farger for dette. Den er designet for å være stor og fet og fange oppmerksomheten. Når vi snakker om å få oppmerksomhet, har vi også en rekke varslingsklasser, og den eneste virkelige forandringen mellom BS2-versjonen og BS3 er omdøpet av klassenavnet Hvis du vil legge til linker i varslene dine ved hjelp av en standard Du kan også legge til et kryss / avvis ikon i varselet, slik at brukeren kan lukke den og gjøre det forsvinne fra skjermen. For å gjøre dette må vi legge til en Vi har lagt til den ekstra klassen Hvis varsler gir operativ tilbakemelding, er det en annen tilbakemeldingsrelatert komponent som er en må-ha-fremdriftslinjen. Ingen tilbakemelding element har produsert så mye hat eller hilsen som denne ydmyke, lille farget bar. Fra BS2 til BS3 er de eneste endringene som gjøres her, som med varslingsklassene, omdøpet av kontekstuelle farger for å matche den generelle ordningen omdøper andre steder i rammen. Basis HTML-oppretting for å produsere dem forblir akkurat det samme: En ting du virkelig bør være oppmerksom på, men (og noe jeg har gjentatt på forskjellige punkter i denne serien), er gruppen av attributter og statister som brukes til å gjøre dette elementet vennlig til skjermlesere og lignende utstyr. Siden en fremdriftslinje ofte har en tendens til å være rent grafisk, betyr det ingenting for noen som ikke klarer å lese skjermen. De fleste andre elementer har minst nok tekst for å gi leseren en ide om hva som er der; fremdriftsstenger trenger all hjelp de kan få. Du kan se fra det forrige eksemplet at vi har lagt til ekstra ariaverdier for å rapportere om hvilken prosentandel verdien er på, og vi har også merket opp et spenne som bare gjelder for skjermlesere, spesielt for å gi en hørbar rapport. Hvis vi fjerner Det sier seg selv at du også kan legge til Du kan også legge til Det endelige elementet som er igjen, er det ydmyke Denne opplæringen representerer et kapittel fra Bootstrap 3 Succinctly, en gratis eBok fra teamet ved Syncfusion. tagger, vi kan nå gå enda lenger:
Output produsert av kodeksempelaktiv klassen, som vi har i andre eksempler, kan vi markere et element som det aktive, og alt mens du opprettholder et enkelt sett med grenser, og utseendet til hvert element oppfører seg som en vanlig 
Output produsert av kodeksempelMedieobjekter og tilpassede miniatyrendringer
rad klassen og rutenettet, sammen med de grunnleggende miniatyrklassene, for å lage perfekt opprullede miniatyrbilder, som følgende viser:
Miniatyrer produsert av kodeksempelholder.js å produsere bildeplassholdere. Jeg lar deg Google plasseringen (det kommer opp som den første er tilgjengelig); det er et flott verktøy for å reservere bildeplass, spesielt når du gjør mockups for klienter.
Ecstasy krever leting
Vi eksisterer som frekvenser
Å krysse myten er å bli en
Vi reflekterer, vi helbreder, vi blir gjenfødt
Output produsert av kodeksempelthumbnail klasser, vi trenger nå å bruke media objektklasser. Disse klassene og tilhørende merking oppretter en layout som ligner på forrige eksempel, men i stedet for å vises under miniatyrbildet, er teksten lined opp til høyre.div med en klasse av media. Deretter, inne i det, bruk media-objekt, media-legeme, og media rubrikken klasser for å markere de enkelte biter, som følgende eksempel viser:
Å følge reisen er å bli en med den
Medieobjekt produsert av kodeksempel
Menneskeheten har ingenting å tape
Det er et tegn på ting som skal komme
Bare en reisende av galaksen kan generere dette livets baldakin
Fullmedieobjektliste generert av kodeeksempels og pull-right og pull-venstre hvor det er nødvendig å plassere bildet på motsatt side, for eksempel. Eller for å justere ting litt annerledes, kan du kombinere dem med paneler (som vi ser snart) og andre lignende strukturer for å sette grenser og andre kontekstuelle hint rundt hele listen og pakke dem inn for å produsere komposittkomponenter.Panelendringer
div med polstring og en kant rundt den.panel rubrikken, så begynner vi å få noe litt mer interessant:
Panel produsert av kodeksempelPaneloverskrift
Output produsert av kodeksempelpanel-footer. Hvis du vil gi panelene mening, kan du også bruke kontekstuelle fargene som brukes til alt annet. Du gjør dette ved å erstatte panel-standard klasse i forrige kodeksempler med panel-primær, panel-suksess, panel-info, panel-advarsel, eller panel-fare.
Utgang produsert av kodeksempel, med typen satt til panel-primærpanel-footer og kontekstuelle farger, vil footer IKKE vedta panelets fargeskjema. Dette er bevisst, da BS3-utviklerne følte det kontekstuelt, var bare innholdet i panelet viktig. Eventuelle knapper, kontroller eller bunntekstinformasjon for å svare på den informasjonen behøvde ikke å bli uthevet på samme måte, slik at utviklerens frihet til å legge til forskjellige kontekstuelle farger for forskjellige kontroller etter behov.div, du får et panel som vist tidligere, og en sømløs sammenføyning til bordet under den, som følgende viser:Paneloverskrift
#ID Navn Twitter håndtere 1 Peter Shaw @shawty_ds 2 Digital Solutions UK @digitalsolut_uk 
Output produsert av kodeksempelAndre endringer
Jumbotron brukes, og deretter legge til noen valgfri merking inne. Hvilket merke du bruker er helt opp til deg, men for å få den tiltenkte effekten, er anbefalt anbefaling:Bootstrap 3
Jumbotron produsert av kodeksempel alert-feil til alert-fare. Annet enn det, er merkingen for å produsere varsler fortsatt like enkelt som å bruke en standard 
Alert bokser produsert av kodeksempel tag, pass på at du bruker klassen alert-link til ankeretiketten; Dette vil sikre at linkfarging forblir i samsvar med kontekstuell fargeklasse som brukes. element merket opp med en stum av dataattributter og ekstra klasser som følger:
Avvisbart varsel produsert av kodeksempelalert-dismissable til ytre avskjedige dataattributt for å koble JavaScript-handlingen til varselets avskjedige metode, ved hjelp av en enkel knapp.
Fremdriftslinje produsert av prøvesr-only klasse, men det gjør vår bar ser litt bedre ut til de som kan se det også:
Fremdriftslinje med sr-only klassen fjernet fra det indre spekteretProgress-bar-suksess, Progress-bar-info, Progress-bar-advarsel, og Progress-bar-fare til det indre Progress-bar klassen, for å utnytte kontekstuelle farger som er tilgjengelige.fremgang-stripete og / eller aktiv til ytre framgang klassen for å få stripete og animerte effekter på fremdriftslinjene dine. En stablet fremdriftslinjeffekt kan oppnås ved å plassere flere Progress-bar framgang beholder og sette sine verdier hensiktsmessig.vi vil. Ingen endringer har blitt gjort på dette siden BS3, men det har nå en ekstra klasse kalt godt sm. Det er ingen magi involvert her - hvis du vil ha et enkelt, boxed-off-område med en skyggefull bakgrunn, bare opprett en vi vil klasse til det, og legg deretter til innholdet ditt inni. Wells er nyttige for sidebars og / eller footers, eller altfor enkelt å garantere å bli satt i et fullt panel eller annet inngjerdet område. Det finnes heller ingen kontekstuelle farger eller spesielle handlinger; det er enkelt, effektivt og enkelt å bruke:
Vel eksempel produsert av prøve
