Share
Så langt har du allerede sett et antall av de nye CSS-funksjonene som er tilgjengelige i versjon 3 av Bootstrap. I denne veiledningen vil vi gå inn i litt mer detaljert om bare hva som anses som nytt og hva som ikke er.
I mange tilfeller er disse nye klassene bare fornavnene til de gamle, men vi behandler dem som nye her, slik at du enkelt kan gjøre forskjellen.
De ulike klassene som utgjør BS3s typografiseksjon, har ikke forandret seg så mye som noen av de andre elementene. Tags H1gjennom H6behandles fortsatt på samme måte som de var i v2, med tillegget du nå kan bruke i tråd med et hvilket som helst headerelement uten at det først må pakkes inn i en divbruker side-headerklasse. Dette betyr ikke noe ekstra oppslag nå, med mindre du vil at blokkposisjonen skal understrekes med en annen paragrafmargin.
Dette er min super webside Det er det beste der er
I v2 hadde du ikke annet valg enn å pakke din H1 i en side-header div, da dette var den eneste måten småkoder-utgangene ville være pent oppført. Dette har nå blitt korrigert og også brukt på alle nivåer av overskrift, i stedet for bare de tre første.
Dette er min super webside det er det beste det er
Fortsatt på, den vanlige kroppskopiklassen har ingen endringer, og gjenstår med en standardstørrelse på 14 piksler med en linjehøyde på ca 1,4.
Kroppseksempler blir brukt på all tekst inne i en avsnittetikett automatisk, så ingen klasser er nødvendig med mindre du vil bruke noen av de spesielle funksjonene (som vi ser snart).
Blytekropp (avsnitt med klassenavnet til lede) har heller ingen endringer i navn eller styling, og som med v2, er utformet for å gi åpningsdelen din litt større vekt enn den andre vanlige kroppskopien. Kombinere disse tre CSS-reglene, kan du ha noe som følger:
Dette er min super nettside Det er det beste der er
Velkommen til min super-duper-nettside, det er ingen annen nettside som den i hele verden, siden min er den beste på Internett som du bør besøke
På denne fantastiske siden har jeg tekst og litt mer tekst, og det er enda litt tekst for deg å lese, så vel som en fin tittetitteltittel
Når det gjøres i nettleseren din, bør det se ut som følgende:
De tag kan nå også brukes selv, da stylingen nå håndteres riktig og brukes i konteksten der den brukes, slik at stylingen vil følge sin posisjon i dokumentet, uansett hva foreldre-taggen.
På samme måte er fet skrift fremdeles opprettet ved hjelp av tag og kursiv ved hjelp av stikkord; som med mange av typografi klassene, dette er ikke annerledes enn v2 rammen.
Justeringsklassene opprettholder også de samme klassenavnene til tekst-venstre, tekst-senter, tekst til høyre, og tekst-rettferdig, og utfør fortsatt de samme funksjonene som beskrevet i BS2-boken som ligger foran denne serien.
På samme måte opprettes forkortelser fremdeles ved hjelp av tag med tittelAttributt som fungerer som den fulle beskrivelsen av forkortelsen. Det er en ny klasse, initialism, som kan legges til en forkortelsestag og gir den gjengitte utgangen et litt mindre utseende enn den omgivende teksten.
Adresser (ved hjelp av tag) og blokkeringer (ved hjelp av tag) har heller ingen endringer i CSS- eller basisregler mellom v2 og v3 i rammen.
De siste få kodene som forblir i den typografiske kategorien inkluderer , pleide å lage en inline-kodeeksempel. Igjen, dette har ikke endret seg på noen måte, med den tilsiktede bruken som fortsatt er for kodeprøver som ligger i tråd med vanlig kroppstekst.
For kodesampler (eller alt som er vanlig tekst) som må forbli formatert i henhold til innrykk og vognretur, bør du fortsatt bruke stikkord; igjen stylingen her har ikke endret seg fra v2, og layout med denne taggen skal fortsatt oppføre seg som forventet.
Det endelige typografiske elementet er tillegg av et nytt element som kalles .
Formålet med denne nye taggen er å vise tekst på en måte som indikerer at brukeren skal legge inn informasjonen i datamaskinen på en eller annen måte, generelt ved å skrive den.
For eksempel:
Åpne en kommandoprompt ved å skrive cmd inn i boksen og klikk på knappemarkedet 'Kjør', når det åpnes skriv inn myprogram og trykk enter, på hvilket tidspunkt appen skal kjøre
Som når det gjengis i et HTML-dokument, bør det se ut som følgende:
Generelt består de vanlige listelementene av list-unstyled, list-inlinesammen med dl-horisontalKlasser for definisjonslister forblir også uendret i BS3, og har samme oppførsel som i BS2.
Det er imidlertid noen endringer i listelementene, men siden disse forekommer med spesialkursene som brukes til å lage menyer og navigasjonslister, vil vi dekke dem når vi adresserer endringene til navigasjonselementene i neste opplæring i serien.
Tabeller er fortsatt stilige akkurat som de var i BS2 ved å lage en standard Denne markeringen skal gi deg følgende: Som med BS2, klassene å legge til valgfrie stiler til et bord- Denne koden vil for eksempel gi deg et bord som har en ytre kant og alternerende farger på hver tabellrad. En ting å merke seg er imidlertid at bordstrimmingen nå bruker Resten av bordklassene for å fargelegge tabellrader har endret seg litt. For det første er det en ny klasse kalt De gjenværende kontekstuelle klassene, som med BS2, er utformet for å markere tabellrader for å vise forskjellige forhold, og er de samme, med unntak av en liten forandring. Klassenavnet som representerer en farlig eller negativ handling har blitt omdøpt til Når det gjøres, bør det se slik ut: Det er to nye tillegg til klassene som brukes til å støtte bord. Først er det en ny responsiv klasse som tar hensyn til størrelsen på rutenettet ditt og gir enten vertikale rullefelt eller et justert bord som passer til forskjellige størrelsesdisplayer. For det andre er det evnen til å bruke de nevnte fargede radklassene på individuelle celler, i stedet for bare hele rader, slik det var tilfelle i BS2. For å bruke fargeklassene på et cellenivå, trenger du bare å legge til klassene for individuelle Denne koden skal resultere i følgende: Den siste tabellen-relaterte tillegget er en klasse kalt Når denne nye klassen brukes på en skjerm som er større enn 768 piksler (det vil si en hvilken som helst skjerm med en annen dimensjoneringsklasse enn Som med BS2 har alle standardformelementer som standard et minimumsnivå som gir dem en grunnleggende stil. Dette betyr at bare å merke opp en vanlig formetikett og tilhørende kontroller, vil du gi skjemaet ditt standard Bootstrap-utseende. Ta følgende eksempel: Hvis vi gjør dette eksempelet i en nettleser, ser vi at vi får en rimelig god produksjon uten å legge til noen ekstra klasser, som du kan se i følgende bilde: Merk: Siden forrige eksempel ble skrevet, har det vært en mindre oppdatering til BS3-koden. Hvis du prøver eksempelet som det er skrevet her, vil utgangen sannsynligvis ikke se som forventet. Endringen som har blitt gjort i BS3 synes nå å bety at bare å merke et skjema uten noen BS3-klasser, vil det ikke gi formet et konsekvent utseende. Jeg har forlatt eksemplet her, da det stemmer overens med informasjonen som fremdeles er tilstede på dokumentasjonssiden, og som sådan synes fortsatt å være det offisielle rådet fra rammebeskrivelsen. Som nevnt i overføringsdelen, har klassene og komponentene rundt HTML-skjemaene vært noen av de største tilfellene når det gjelder endringer i klassenavnet, men dette er en god grunn. Før BS3 var mange av klassene som ble brukt for skjemaer svært smale i omfang - det var individuelle klasser for mange individuelle formål, snarere enn en enkelt klasse som dekket mange baser. For eksempel var det separate klasser for å håndtere justeringene av avmerkingsbokser og radioknapper, og det var separate klasser å håndtere innboks bokser og tekstområder med hensyn til deres radjustering. I BS3 har mange av disse klassene blitt slettet og er nå rullet opp under et mindre antall klasser og elementer. Ta vårt forrige eksempel og legg til i anbefalte markeringer som vist i BS3-dokumentasjonen gir oss følgende: Eksternt, hvis du gjør denne koden, ser du ingen forskjell på utgangen generert for eksempel 18. Internt kan Bootstrap nå finne og arbeide med enkeltelementer mye lettere enn det tidligere kunne. I BS2 var det ikke nødvendig å gruppere kontroller med mindre du ønsket å jobbe med de automatiske valideringsklassene. Det er fortsatt ingen absolutt krav til å bruke dem, men gjør det mulig for BS å endre størrelse og reposisjonere ting riktig når de bruker nettet (blant mange andre ting). Du vil også merke at hver kontroll nå har bare en enkelt Legg også merke til at skjemaetiketten selv har en Til slutt, hvis du ser på Dessverre er det fortsatt et område i støtten til skjemaer som mangler - filopplastingskontrollen. Som BS2 skyldes dette at sikkerheten i alle gjeldende avlinger av nettlesere begrenser muligheten til å utforme filinngangskontroller for å matche resten av inngangskontrollene som er tilgjengelige. Som jeg nevnte i den forrige boken, er det imidlertid fortsatt tredjepartstilførsler der ute som har dette området dekket, og fordi du nå kan produsere ditt eget opplastingssystem ved hjelp av HTML5-klassene, har du strengt tatt ikke behov for filopplasting kontroll - du kan produsere din egen. I BS2 var det en rekke spesifikke formetyper som De I eksemplet fra forrige kodeeksempel legger du til De Merk: I dagens modige nye verden av HTML 5 er det viktigere enn noensinne å merke innspillelementene riktig sammen med en tilhørende label. Fordi ufordelte brukere kan bruke hjelpemidler for å hjelpe dem, og ikke gi de nødvendige delene for at disse hjelpemidler skal fungere riktig, vil fremover bli sett på som en dårlig ting, og selskaper som forlater dem kan bli shunned for å gjøre det. Ikke bekymre deg selv om-BS3 har du dekket. Hvis du bestemmer deg for at du ikke vil ha etiketter i skjemaene dine, kan du merke dem med en valgfri klasse, Hvis du gjør koden fra dette eksempelet i nettleseren din, bør det se ut som følgende: Som du kan se fra koden i eksempel 20, er den ekstra oppslaget egentlig ikke så mye mer, og det meste eksisterer bare for å justere kolonnene riktig slik at alt sitter pent. Hovedpoengene for å være oppmerksom på i prøve 20 er: For resten av klassene og tilhørende deler i skjemaavsnittet i BS3, har ingenting annet enn de som er nevnt hittil endret seg. Imidlertid, fra et aktuelt applikasjonssynspunkt, kontrollerer inngangen nå må ha en riktig type på dem for å bli stylet. Dette betyr at du minst må ha minst Det anbefales imidlertid at du bruker de riktige typene, men. Som du ser snart når vi kommer til valideringsgrupper, vil ha den riktige typen tillate det meste av valideringsfunksjonene til å fungere riktig uten å gjøre noen endringer i merkingen din. Kryss av boksene og radioknappene, som i BS2, stables som standard. Hvis du ønsker å få dem til å gjengis vertikalt over skjermen, må du bruke Gjengivelse av prøve 21 i nettleseren din bør se ut som følgende: Velg og flervalgs bokser er merket med standardformat bare ved å bruke elementene mens de står; Dette er ingen endring fra BS2, hvor oppmerkningen og stilen til disse elementene er identiske. En ny stil som har blitt innført i BS3 er den statiske kontrollstilen. I BS2 måtte du ofte bruke en deaktivert formkontroll for å representere statisk formdata som ikke kunne endres. BS3 endrer dette ved å gi en Når det gjengis i nettleseren, produserer dette en vanlig formoppsett, med den statiske kontrollen tydelig merket som ikke redigerbar eller ligner en inngangskontroll, som følgende bilde viser: Den deaktiverte stilen til skjemakontrollene er fremdeles merket og brukt på samme måte som i BS2, ved å bare legge til "deaktivert" attributtet til inngangselementet som følgende viser: Dette vil produsere det klassiske deaktiverte og skyggefulle kontrollutseendet, noe som følger: Hvis du legger til Den endelige tingen jeg vil nevne når det gjelder emneformer er validering og fokusklasser. Som jeg tidligere har nevnt, hjelper du å legge til riktig inntasting i HTML5-elementer når det gjelder bruk av valideringsklassene. Hvorfor det? I tillegg til å ha dedikerte klassenavn og -stiler som du kan bruke, kobler valideringsklassene også de nye HTML5-pseudoelementene som f.eks. Dette betyr at hvis du markerer en tekstboks som Hvis det ikke gjør det, eller hvis du har annen måte å gjøre valideringsarbeidet ditt, kan du bare bruke Hvis du gjør denne koden i nettleseren din, bør du se noe som følger: Poeng å merke seg er at jeg har lagt til klassene til skjemagruppene for å produsere et statisk display; Du bør imidlertid også prøve å bare merke skjemaet med de riktige inntastene. Jeg har funnet nettleserstøtte på pseudoklassene er fortsatt litt usammenhengende, selv om det ikke er noe om det i BS3-dokumentene, så jeg anbefaler at du også bruker klassenavnene når du manipulerer elementene dine med JavaScript. Vær også oppmerksom på at etikett- og blokkeringshjelpeteksten også tar på seg den riktige fargen til gruppen, slik at du ikke trenger å legge til farger eller stiler til disse separat til skjemakontrollgruppen. Husk at Det siste å nevne for valideringsgrupper er at du også kan gi valgfrie tilbakemeldingsikoner direkte i skjemakontrollene for å hjelpe med staten. Du gjør dette ved å gi et spenningselement umiddelbart etter inngangselementet som det skal brukes til. Dette spanelementet har de vanlige ikonklassene som er brukt på det (som vi vil se i neste opplæring), sammen med en klasse av Hvis vi utvider forrige kodeeksempel for å ta dette inn på kontoen og legge til tilbakemeldingsikoner, så ser det slik ut: Når vi gjentar med disse endringene, bør du se følgende: Denne opplæringen representerer et kapittel fra Bootstrap 3 Succinctly, en gratis eBok fra teamet ved Syncfusion.arrangement, og deretter legge til en
bordklasse til oppslaget. Som i BS2, bør bord alltid bygges med hele spekteret av ,
, og HTML-elementer som følgende eksempel viser:
Col A Col B Col C Val A Val B Val C Val A Val B Val C 
table-stripete, table-grenser, table-hover, og Tabellen-kondensert-jobbe nøyaktig det samme som i BS2; Disse ekstraklassene legges til som sekundære klasser til hovedbordsklassen på bordelementet selv. : N-te-barn pseudovelector, noe som betyr at det ikke lenger vil fungere i IE8 eller tidligere uten en poly-fill eller annen fix for å hjelpe. aktiv. Før BS3, den aktivKlassen var ikke tilgjengelig på alle elementer, men hovedsakelig bare på navigasjons- og knappelementer. Fra BS3 og videre kan den nå brukes på en element for å vise den raden som en uthevet rad, som som standard er en lysegrå. fare. I BS2 ble den røde klassen navngitt feil. Annet enn det, klassene blir brukt på samme måte som element som følgende kode viser:
Klasse Col B Col C Aktiv Val B Val C Suksess Val B Val C info Val B Val C Advarsel Val B Val C Fare Val B Val C 
eller elementer som følger:
Klasse Col B Col C Val A Val B Val C 
table-responsive, som du kan bruke ved å bruke den til en som følger:
Col A Col B Col C Val A Val B Val C * -XS- *), så vises tabellvisningen som et vanlig oppstartspåvirket bord. Men hvis tabellen vises på en enhet som retter seg mot en * -XS- *klassen og er mindre enn 768 piksler, vil beholderen bli endret slik at en vertikal rulling er tilgjengelig, slik at hele bordet kan flyttes til venstre og høyre uten å påvirke resten av siden. 
Utgang fra kodeeksempel på en enhet som er større enn 768 piksler i bredde
Utgang fra kodeeksempel på en enhet mindre enn 768 piksler i breddeForm endringer
formkontrollklassen tildelt det, i stedet for mange forskjellige som retter seg mot forskjellige aspekter. rolletildelt den. Dette, bortsett fra å være god praksis rundt, håndheves nå av BS3 for å hjelpe med aria roller og standarder som styrer bruken av webapplikasjoner av funksjonshemmede. tag med a help-blokk, du vil merke at det også nå brukes til inline form tekst i alle tilfeller, mens i BS2 vi hadde en rekke forskjellige klasser, for eksempel skjema-info. search-skjema; Under BS3 har alle disse blitt rullet opp i tre hovedtyper av form. Først har du standardskjemaet; Som vi har sett, er dette en vanlig form uten ekstra klasser lagt til skjemaetiketten. De to andre formtypene er form inlineog form horisontal. form inlineklassen er utformet for skjemaer i små, begrensede høyder steder som meny og navigasjon barer. Et advarselsvarsel: alle inngangselementer i denne klassen og de andre formtypene er som standard 100 prosent, så hvis du trenger skjemaet for å bare ta opp en liten mengde plass (spesielt i navlinjenskjemaer), må du sette manuelle størrelser på de enkelte kontrollene. form inlineeller form horisontali sin tur bør endre grunnleggende layout for å se ut som følgende: 
Skjema produsert av tidligere kodeksempel med form-inline-klassen lagt til skjemaetiketten.form horisontal klassen brukes til å lage vanlige topp-ned-skjemaer med inndata kontroller som har tilhørende etiketter til venstre for dem, snarere enn over dem som standard skjemaet gjør. Vær imidlertid oppmerksom på at for at skjemaet horisontal skal fungere riktig, må du legge til litt ekstra oppslag til skjemaet generelt, som vist i følgende kodeprøve. sr-only. Hvis du legger til denne klassen, vil det forhindre at etiketten eller tilhørende hjelpetekst vises i dokumentet ditt, men vil sikre at den er merket slik at den er synlig av skjermlesere og andre lignende enheter eller programvare.
Utdata som vises fra tidligere kodeeksempel, viser vårt skjema merket som horisontalt.
kontroll-etikettla til. Dette er ikke nødvendig for de andre formtypene, og BS2 vil rett og slett ignorere det. form horisontalbrukes på den ytre mest formetiketten. type = "text"for BS3 å gjøre sin magi. avkrysnings-inlineog radio-inlineklasser som følger: 
skjema-kontroll-statiskeklasse som kan brukes til individuelle kontroller i stedet for det vanlige formkontroll, som følgende kode viser: 
funksjonshemmetTilordne et feltsett som omgir et skjema, alle kontrollene i den gruppen blir deaktivert samtidig, ved hjelp av samme styling. Dette er noe som ikke skjedde i BS2-du måtte i stedet markere opp hver enkelt kontroll. fokus:, feil:, og andre. type = "email", og legg ikke inn en e-postadresse i den når du sender inn, bør nettleseren automatisk markere feltet rødt for deg. har-suksess, har-advarsel, og har-errorklasser på skjema gruppene som følgende kode viser: 
skjema-gruppeseksjoner kan også bruke alt annet vi har nevnt så langt for å deaktivere, skygge og endre størrelse på formelementer etter behov på gruppert grunnlag. skjema-kontroll-feedback. Dette må settes etter inngangskontrollen, og før andre markeringer i inngangsgruppen, på grunn av måten kontrollen er plassert på for å få den til å vises i kontrollen. Når du legger til span, må du også legge til en klasse av har-feedbacki formgruppen klasseliste sammen med den andre har-xxxxxklasser som brukes til å vise valideringstilstanden. 
Accentsconagua