Share
În tutorialul anterior din seria noastră despre Bootstrap 3, ați învățat despre unele dintre caracteristicile CSS care s-au schimbat în versiunea 3. În acest tutorial vom termina acest lucru prin examinarea altor funcții modificate, cum ar fi imagini și butoane.
Cea mai proeminentă schimbare a clasei utilizate pentru stilul butoanelor din BS3 este stilul implicit. Sub BS2, pur și simplu adăugați BTNclasa la un element de intrare a butonului de tip sau la o etichetă de ancorare, ar da controlului aspectul și simțul butonului implicit.
Din BS3, acum trebuie să adăugați în mod explicit BTN-default; doar adăugând BTNpe cont propriu nu va mai avea nici un efect.
A doua schimbare principală este redenumirea unor clase de bază. Specific, BTN-eroarea fost redenumit BTN-pericolastfel încât schema de denumire să se potrivească cu celelalte schimbări de clasă numite în mod similar și să aducă uniformitate bibliotecii de bază Bootstrap.
În afară de asta, clasele de butoane de bază rămân neschimbate, deoarece următoarea eșantion de cod arată:
Atunci când sunt redate în browser, veți vedea aspectul normal al butonului plat pe care BS3 îl are acum pentru controale:
Există câteva clase noi pentru elementul de buton, adăugate pentru a aduce uniformitatea clasei de dimensionare a rețelei. Aceste clase sunt BTN-lg, BTN-sm, și BTN-xs; nu este BTN-md, deoarece butonul de dimensiune medie este dimensiunea standard utilizată atunci când nu este specificată nicio clasă.
Următorul exemplu de cod demonstrează toate stilurile de butoane la diferite dimensiuni:
Când este redat în browser, această mostră de cod vă va oferi următoarele rezultate:
Când adăugați clasa BTN-blocla un buton sau la un element de ancorare, folosind oricare dintre clasele de butoane anterioare, acest buton se va întinde pentru a umple 100% din spațiul disponibil. Acest lucru este util când se generează casete de dialog și comenzi de dimensionare cu sistemul de grilă BS3, deoarece vă permite să dimensionați în mod special butoanele (și alte elemente) pentru a menține un echilibru bun în desenele de formă.
În cele mai multe cazuri, nu va trebui să setați singur starea activă a unui buton, dar dacă o faceți, puteți adăuga cu ușurință activclasă la orice element marcat folosind clasele de butoane. Activîn general (pe element cel puțin) utilizează de obicei :activpseudo-selector pentru a schimba stilul butonului. Adăugarea activclasa va forța butonul să afișeze starea sa activă.
Notă: Dacă vă gândiți să utilizați starea activă pentru a crea butoane lipicioase, rețineți că în următoarele tutoriale vom discuta despre stările butoanelor utilizând facilitățile disponibile pentru componente și JavaScript. BS3 oferă doar un astfel de buton lipicios, utilizând caracteristicile suplimentare disponibile în aceste facilități, astfel încât nu veți avea nevoie să creați propriile butoane lipicioase folosind activ în majoritatea cazurilor.
De asemenea, puteți să dezactivați butoanele și să le marcați ca inactive utilizând aceleași clase și atribute "dezactivate" pe care le-am discutat anterior cu modificările din elementele formularului.
Următorul cod arată butoanele marcate ca să pară active și în stările dezactivate:
Fiți conștienți, totuși, că în cazul butoanelor de ancorare invalidelement / clasa nu nu dezactivați linkul; pentru a vă asigura că nu se declanșează o legătură de ancoraj de stare dezactivată, va trebui să utilizați JavaScript personalizat.
Din acest motiv, echipa BS3 vă recomandă să utilizați dacă este posibil, să marcați butoanele și să utilizați numai etichete de ancorare în anumite circumstanțe.
Să nu uităm, de asemenea, subiectul "idempotence" și importanța utilizării butoanelor peste ancore. În general, o legătură de ancorare este potrivită dacă destinația este o solicitare de a primi și de a face link-ul de mai multe ori nu va provoca probleme prin activarea repetată; în caz contrar, utilizați un buton.
Modificările CSS, în cazul în care eticheta de imagine umilă este în cauză, nu au fost la fel de mult ca în alte locuri din BS3. Anterior, imaginile nu au fost receptive în mod implicit și, la fel ca în multe lucruri din BS2, a trebuit să adăugați clasele opționale receptive pentru a ajunge oriunde în a fi recepționate de ei.
Din păcate, chiar și după ce ați adăugat clasele opționale receptive, lucrurile încă nu erau perfecte; mulți oameni au citat probleme cu paginile în care au fost utilizate Google Maps, printre altele.
BS3 modifică toate acestea. Acum, în mod prestabilit, imaginile sunt pe deplin receptive la utilizarea unui img-receptivla oricine
În afară de aceasta, singura altă modificare efectuată în secțiunea de imagini este numele img-polaroid(utilizată pentru generarea miniaturilor) la img-miniatură, astfel încât să fie în linie cu alte redenumiri similare din întreaga bibliotecă.
Clasele BS2 sunt pedepsitși img-cerccontinuă să funcționeze așa cum au făcut-o anterior, oferind un efect miniatural circular și rotunjit.
În cele din urmă, ajungem la schimbările care acoperă acele lucruri care nu se încadrează într-adevăr în categorii specifice.
Sub clasele de tipografie din BS2, ați fost inițial introduse într-un set de clase de culori folosite pentru a seta culoarea unui element de text la aceleași culori de marcă utilizate în alte elemente din cadrul.
BS3 trece cu un pas mai departe și introduce conceptul de a avea aceleași culori folosite și pentru medii contextuale.
În acest caz, fundalul este o variație mai ușoară, așa cum se utilizează în panouri și casete de alertă în altă parte. Există un bonus suplimentar: dacă utilizați aceste clase de culoare contextuală pe etichetele ancorei și orice altceva care are un set de hover-over în mod prestabilit, culorile se vor diminua automat ușor pentru a arăta că au fost suspendate.
Ca și în cazul numelui în alte clase bazate pe culori, clasele disponibile aici sunt Text dezactivat, text-primar, text-succes, text-info, text de avertizare, și Text-pericolpentru paragraf, span și alte elemente de text inline sau blocate.
Pentru culorile de fundal, numele de clase sunt bg-primară, bg-succes, bg-info, bg-avertisment, și bg-pericol.
Următorul cod arată un exemplu de utilizare a acestora:
Acest paragraf utilizează clasa de text dezactivată, rezervat în mod obișnuit pentru ceva care nu este cu adevărat important sau mai puțin proeminent.
Acest paragraf utilizează clasa de text primar, rezervat în mod obișnuit pentru ceva important sau implicit și vizibil.
Acest paragraf utilizează clasa de text pentru succes, rezervat în mod obișnuit pentru o acțiune care tocmai a reușit sau ceva bun și felicitări.
Acest paragraf utilizează clasa textului de informații, rezervat în mod obișnuit pentru mesaje informale, cum ar fi o lucrare de fundal care tocmai termină sau un fișier nou disponibil.
Acest paragraf utilizează clasa de text de avertizare, rezervat în mod obișnuit pentru ceva care ar putea fi periculos sau care necesită atenție, dar poate să aștepte un timp.
Acest paragraf utilizează clasa de text periculoasă, rezervat în mod obișnuit pentru ceva foarte important sau ceva care are nevoie cu adevărat de atenție.
Acest paragraf utilizează text normal, dar cu o culoare de fundal primar pentru a vă spune că ceea ce vedeți este starea implicită.
Acest paragraf utilizează text normal, dar cu o culoare de fundal de succes pentru a vă spune că ceea ce vedeți este bine.
Acest paragraf utilizează un text normal, dar cu o culoare de fundal pentru a vă spune că ceea ce vedeți este informativ și ar trebui citit, dar nu întotdeauna a fost acționat.
Acest paragraf utilizează un text normal, dar cu o culoare de fundal avertizat pentru a vă spune că ceea ce vedeți ar putea cauza probleme pe care ar trebui să le cunoașteți.
Acest paragraf folosește un text normal, dar cu o culoare de fundal periculos pentru a vă spune că ceea ce vedeți are nevoie să-i acordați atenție acum.
Un lucru care a fost remarcat ca fiind necesar în BS3 și nu este prezent în BS2 este unul dedicat semn de omisiuneclasa pentru indicatorii drop-down pe butoane și alte mobilier de ecran.
Acum puteți utiliza acest lucru pe propriile elemente adăugând un nume de clasă O altă adăugare nouă în BS3, deși nu este de fapt o clasă, merită încă o mențiune: dialogul se apropie de cruce. La fel ca și Următoarea eșantion de cod arată un exemplu pentru ambele Acest text apare într-un div care are propria sa pictogramă apropiată atașată la acesta. La fel ca în BS2, clasele de utilitate rapidă plutitoare Alte clase noi includ Am văzut deja o nouă clasă numită Dacă definiți un titlu de pagină utilizând un banner de imagini, un cititor de ecran tipic nu va putea să spună ce spune textul din imagine. Pentru o lungă perioadă de timp, mulți autori au folosit un hack numit înlocuire a imaginii pentru a obține acest lucru. Înlocuirea imaginii funcționează prin împachetarea bannerului imaginii într-un Ceea ce se întâmplă atunci este faptul că pe ecran, bannerul imaginii este văzut de cei cu o vedere bună, dar cei care folosesc un cititor de ecran au auzit cititorul spunând textul real în bannerul de imagini. BS3 oferă acum o clasă numită În cele din urmă, ajungem la ultima din ultimele în secțiunea de modificări CSS. Cât de bine ar fi un cadru de design web receptiv fără clase de utilitate care să vă ajute să vă administrați planurile receptive? "Dar țineți-ne, ne-am acoperit cu grile", am auzit spunând și da, avem. Dar BS3 are încă un truc în mânecă, care, cu toată corectitudinea a fost prezent în BS2, dar nu a lucrat într-adevăr totul bine. Deci, ce este această magie suplimentară? Permiteți-mi să vă prezint clasele de vizibilitate receptivă. În esență, ceea ce fac aceste mici pietre vă permite să schimbați și să modificați părți ale interfeței dvs. în funcție de dimensiunea grilei și a afișajului dvs.. Să ne imaginăm, de exemplu, că aveți o listă de articole primite prin poștă electronică, iar atunci când este vizualizat pe un PC desktop, fiecare element are o previzualizare lângă el, la fel ca într-o aplicație clasică de citire prin e-mail. Poate ceva de genul: Acum, acest lucru este minunat până când încercați să îl potriviți pe un dispozitiv mobil, unde doriți să ascundeți complet panoul de previzualizare și să lăsați doar lista de e-mailuri. În mod normal o sarcină ca aceasta se realizează folosind un pic de JavaScript pentru a schimba vizibilitatea elementului prin modificarea setărilor vizibile ale elementului. BS3 are o soluție încorporată utilizând clase CSS care vă ajută să rezolvați situații de genul asta cu mare ușurință. Luați următorul cod de cod: Dragă O persoană, Blah bla bla bla bla bla bla Dacă redați acest lucru în browserul dvs., ar trebui să obțineți ceva care arată în felul următor: Dacă, totuși, redimensionați browserul la dimensiunea ecranului mobil, lucrurile încep să pară puțin ciudate: Acest lucru poate funcționa pentru unii, dar, în general, este o idee proastă. Ce se întâmplă atunci când aveți 100 de e-mailuri necitite și trebuie să derulați în partea de jos a ecranului de fiecare dată pentru a citi previzualizarea? Luați previzualizarea principală Apoi, dacă actualizați browserul și încercați să îl redimensionați, ar trebui să vedeți că previzualizarea La fel ca și în cazul rețelei, există patru dimensiuni diferite și există clase de ascuns și de vizibilitate. Clasele vizibile vor face vizibil elementul în cauză numai la dimensiunea specificată a ecranului, iar clasele ascunse fac ca elementul în cauză să fie ascuns numai la dimensiunea specificată a ecranului. Numele de clase sunt după cum urmează: Lățimile dispozitivelor și punctele de declanșare asociate sunt aceleași cu cele utilizate în sistemul de rețea în general, cu Există două clase finale utilizate în această categorie pentru a vă ajuta să gestionați afișarea versus versiunile bazate pe tipărire. Poți să folosești Acest tutorial reprezintă un capitol din Bootstrap 3 Succinctly, o carte electronică gratuită de la echipa de la Syncfusion.semn de omisiunela recipientul exterior - a sau semn de omisiune, acest lucru a fost prezent în BS2, dar nu a fost disponibil pentru a fi folosit separat de utilizarea dorită în dialogurile modale și barele de alertă. Cu toate acestea, de la BS3, puteți să o folosiți chiar bine pe cont propriu. semn de omisiuneclasa și încrucișată în generice: 
pull stângași pull-dreaptaîncă mai există, dar acum s-au alăturat centru de bloc, care simplifică automat marjele și centrează elementul din părinte, și clearfix, care elimină orice flotor pe care îl folosiți, restabilind astfel fluxul normal de documente. spectacol, ascuns, și invizibilclase. Spectacolvorbeste destul de mult pentru sine, dar care este diferenta dintre cele doua din urma? Ascunsfizic se prăbușește spațiul folosit de element, deci, dacă îl aveți la o înălțime completă div, de exemplu, acel div se va prăbuși până la cea mai mică înălțime. Cu toate acestea, dacă utilizați invizibil, elementul își păstrează spațiul (și încă mai ocupă locul său în fluxul de elemente), dar dispare din vedere. sr-numaia fost introdus pentru a marca un bloc ca fiind vizibil pentru cititorii de ecran și nimic altceva. Acum există o altă clasă ca aceasta, care este utilizată pentru titluri grafice. H1sau altă etichetă de tip standard, punând numele în text ca text clar alături de bannerul de imagini, apoi folosind CSS pentru a muta textul în afara ecranului. text-ascundepentru a facilita acest lucru. Un exemplu simplu urmează:
Un titlu grafic bazat pe imagine
Ieșirea generată de proba de cod într-un browser obișnuit al calculatorului
Exemplu de aspect al aplicației de e-mail
Email 1 (1/1/11) Email 2 (1/1/11) Email 3 (1/1/11) Email 4 (1/1/11) Email 5 (1/1/11) Email 6 (1/1/11) Email 2: Primit (1/1/11)
Către: O persoană
Efectuarea de machete de aplicații de e-mail produse de proba de cod anterioară
Efectuați o machetă a aplicației de e-mail pe o vizualizare redimensionatăascuns-sm, după cum urmează: 
E-mail de aplicație machetă, redimensionată, dar cu clase de ascundere adăugate
vizibile-xs: Faceți-le vizibile pe ecrane foarte mici vizibil-sm: Faceți vizibil pe ecrane mici vizibil-md: Efectuați vizibil pe ecranele medii vizibil-lg: Faceți-vă vizibil pe ecrane foarte mari
ascunse-xs: Ascundeți pe ecrane foarte mici ascuns-sm: Ascundeți pe ecrane mici ascuns-md: Ascundeți pe ecranele medii ascuns-lg: Ascundeți pe ecrane mari -xscare acoperă telefoanele cu dimensiuni de palmier și mai mici, -smcare acoperă comprimate medii până la mari, -mdcare acoperă cele mai multe computere desktop, și -lgcare acoperă desktopuri cu ecran lat. vizibile de imprimareși ascuns-printîn exact aceeași manieră ca și clasele de dimensiuni de mai sus, dar de această dată făcând un element vizibil și invizibil când o pagină este trimisă la imprimantă. 
Accentsconagua