Accentsconagua

Bootstrap 3 Succinct Caracteristici suplimentare ale componentelor modificate

Web design
Share

În această serie pe Bootstrap 3, vă prezentăm toate noile caracteristici din cea mai recentă versiune a acestui cadru popular. În ultimul tutorial am analizat unele modificări ale componentelor și de această dată vom termina examinând modificările aduse altor componente, cum ar fi etichete, insigne, grupuri de liste și panouri.

Etichete și modificări de insignă

Aceasta va fi o secțiune foarte scurtă, deoarece au existat doar două modificări la etichete, iar una mare pentru ecusoane.

Pentru a face o etichetă în BS2, am dat pur și simplu a etichetă-xxxx nume de clasă, unde xxxx reprezintă statul pe care eticheta urma să îl reprezinte. Sub BS3, avem acum o definiție de clasă în două părți și o redenumire de la eroare la Pericol pentru clasa de culoare roșie, astfel încât denumirea să se potrivească acum cu orice altceva, și asta este destul de mult.

Nu există, de asemenea, clase de dimensionare / opțiuni pentru acestea în BS3, deoarece etichetele se bazează pe dimensiunea containerului înconjurător. Deci, dacă creați o cu o clasă de etichetă adecvată și apoi o înfășurați într-o

, dimensiunea etichetei va fi mult mai mare decât restul.

Următorul exemplu de cod demonstrează acest lucru:

Mod implicit
 
Primar
 
Succes
 
Info
 
Avertizare
 
Pericol
Producția produsă prin eșantion de cod

Insignele, pe de altă parte, au suferit o schimbare mai mare.

În BS3, insignele nu mai au clase de culoare contextuală. Adică, nu mai există etichetă de succes sau Eticheta de avertizare, așa cum se întâmplă cu etichetele anterioare și cu alte elemente.

Aceasta înseamnă că nu puteți să obțineți inscripții de culoare în același mod în care ați putea obține BS2, iar orice etichetă pe care o creați poate fi redată numai cu culoarea gri standard. Ei bine, cel puțin oficial nu poți.

Dacă aplicați un alertă-xxxxx alături de a eticheta clasa pe fiind folosit pentru eticheta dvs., atunci eticheta va prelua culoarea acelei clase de alertă și, în timp ce aceasta nu este o modalitate acceptată de a face lucrurile, funcționează și vă permite să utilizați etichetele așa cum ați făcut în BS2.

Pentru a marca o etichetă standard, tot ce trebuie să faceți este să adăugați o a eticheta și 'Etichetă-default' clasa a , și sunteți gata să mergeți:

Aceasta este o etichetă
Etichetă produsă prin eșantion de cod

Dacă doriți să vă hackați etichetele pentru a utiliza diferite culori, puteți face acest lucru după cum urmează:

Normal Succes Info Avertizare Pericol
Producția produsă prin eșantion de cod

O caracteristică frumoasă a componentei insignei are, totuși, utilizarea sa gol: pseudo-selector, permițându-i să dispară automat de pe ecran dacă textul său interior este gol. Acest lucru ajută la modificările interne create pentru a lucra pe listele de grupuri și listele de pilule, deoarece acum înseamnă că este extrem de ușor să creați lucruri precum listele de notificări din mesajele primite, unde valorile dispar atunci când conținutul este eliminat. Iată un exemplu:

 
     
  •   42 Inbox  
    •  
  •   10000 Spam  
    •  
  •    Loteria câștigă  
    •
Producția produsă prin eșantion de cod

Dacă examinați codul, veți vedea că ultima opțiune din listă nu are nicio valoare în eticheta de span, care, din cauza gol: pseudo-selectorul, face ca browserul să nu o facă. Cu toate acestea, în al doilea rând, puneți ceva acolo folosind JavaScript sau orice altă metodă care poate manipula DOM, acea insignă va apărea imediat în existență fără a pierde o bătaie. Observați, de asemenea, utilizarea pull-dreapta pentru a vă asigura că eticheta se află pe partea dreaptă a elementului, făcând totul să pară frumos și aliniat.

Modificați grupul de modificări

Grupurile de listare sunt un lucru nou adăugat în BS3, proiectat să înlocuiască listele de navigare BS2 și să aibă mult mai multe capabilități decât omologul lor BS2.

Odată ce începeți să le folosiți, veți realiza că grupurile de liste sunt mai degrabă ca casete cu listă complet stilizabile și, pentru a fi sincer, tot ceea ce ar lua pentru a crea o cutie de liste cu stil complet ar fi de fapt să le înfășurați în propria lor div și setați preaplinul pentru a derula corespunzător.

O componentă de grup de bază poate fi creată cu marcare similară cu următoarea:

     
  • Brânză
    •  
  • Burger
    •  
  • chiflă
    •  
  • Murături
    •  
  • Roșie
    •
Producția produsă prin eșantion de cod

După cum ați văzut anterior în secțiunea Insigne, puteți adăuga insigne în liste și alte obiecte și, dacă le adăugați la un grup de liste, ele se aliniază perfect:

     
  • 4Brânză
    •  
  • 2Burger
    •  
  • 1chiflă
    •  
  • Murături
    •  
  • 2Roșie
    •
Ieșire din eșantionul de cod

Cel mai obsedat dintre voi se poate gândi: "Bine, grupurile de listă arată bine, dar ele sunt totuși doar