tag) nu au nici o schimbare în regulile CSS sau de bază între v2 și v3 din cadru. 

Ultimile câteva etichete rămase în categoria tipografică includ , folosit pentru a crea o mostră de cod inline. Din nou, acest lucru nu s-a schimbat în nici un fel, utilizându-se în continuare pentru eșantioanele de cod care se potrivesc cu textul obișnuit al corpului. 

Pentru eșantioanele de cod (sau orice text simplu) care trebuie să rămână formatat conform indicațiilor și caracterelor, trebuie să utilizați în continuare

etichetă; din nou stilul de aici nu s-a schimbat de la v2, iar aspectul folosind această etichetă ar trebui să se comporte așa cum era de așteptat. 
Elementul tipografic final este adăugarea unui element nou numit . 
Scopul acestei etichete noi este de a afișa textul într-un mod care indică faptul că utilizatorul ar trebui să introducă informațiile într-un anumit mod, în general prin tastarea acestuia. 
De exemplu: 
Deschideți un prompt de comandă tastând cmd în casetă și făcând click pe butonul "Run", când se deschide tipul myprogram și apăsați enter, moment în care ar trebui să ruleze aplicația
Ceea ce, atunci când este redat într-un document HTML, ar trebui să arate cam așa: 
Modificați lista 
În general, elementele de listă obișnuite sunt formate din 
, 
, și 
elementele nu s-au schimbat; aspectul este încă așa cum a fost în BS2, fără a fi necesare clase suplimentare. Rețineți, de asemenea, că Lista-unstyled, Lista-inlineimpreuna cu dl-orizontalăclasele pentru listele de definiții rămân, de asemenea, neschimbate în BS3 și au același comportament ca și în BS2. 
Există însă unele modificări ale elementelor din listă, însă, deoarece acestea se întâmplă cu clasele de specialiști utilizate pentru a crea meniuri și liste de navigare, vom acoperi aceste aspecte atunci când abordăm modificările elementelor de navigație în următorul tutorial din seria. 
Schimbări de tabel 
Tabelele sunt încă în stil, așa cum au fost în BS2, prin crearea unui standard 
aranjament, apoi adăugând a masaclasă la marcaj. Ca și în BS2, tabelele ar trebui construite întotdeauna folosind întreaga gamă de , , și Elementele HTML, după cum arată următorul exemplu: 
 
 
 
Col A
 
Col B
 
Col C
 
 
 
 
 
Val A
 
Val B
 
Val C
 
 
 
Val A
 
Val B
 
Val C
 
 
 

Acest marcaj vă va oferi următoarele: 

Ca și în cazul BS2, clasele pentru a adăuga stilurile opționale la un tabel-tabel cu dungi, masă marginita, de masă Hover, și table-condensat-funcționează exact la fel ca în BS2; aceste clase suplimentare sunt adăugate ca clase secundare la clasa de tabele principale pe elementul de tabel propriu-zis. 

Acest cod, de exemplu, vă va oferi un tabel care are o margine exterioară și culori alternante pe fiecare rând de tabel. 
Un lucru trebuie remarcat, totuși, este faptul că tabla de tabelă utilizează acum : Nth-copil pseudo selector, ceea ce înseamnă că acesta nu va mai funcționa în IE8 sau mai devreme fără o poli-umplere sau altă soluție pentru a ajuta. 
Restul clasei de tabel pentru colorarea rândurilor de tabelă s-au modificat ușor. În primul rând se numește o nouă clasă activ. Înainte de BS3, activclasa nu a fost disponibilă pentru toate elementele, ci în principal doar pentru navigație și elemente de buton. Din BS3 poate fi acum aplicată la 
element pentru a arăta rândul ca un rând evidențiat, care, în mod implicit, este gri deschis. 
Clasele contextuale rămase, ca în cazul BS2, sunt proiectate să evidențieze rândurile tabelului pentru a arăta diferite condiții și sunt aceleași, cu excepția unei mici modificări. 
Numele clasei care reprezintă o acțiune periculoasă sau negativă a fost redenumit Pericol. În BS2 clasa roșie a fost numită eroare. În afară de aceasta, clasele sunt aplicate în același mod la 
element după cum arată următorul cod: 
 
 
 
Clasă
 
Col B
 
Col C
 
 
 
 
 
Activ
 
Val B
 
Val C
 
 
 
Succes
 
Val B
 
Val C
 
 
 
Info
 
Val B
 
Val C
 
 
 
Avertizare
 
Val B
 
Val C
 
 
 
Pericol
 
Val B
 
Val C
 
 
 

Când este redat, ar trebui să arate ceva de genul: 

Există două adăugări noi la clasele folosite pentru a suporta tabelele. În primul rând, există o nouă clasă responsabilă care ia în considerare dimensiunea sistemului dvs. de rețea și oferă fie bare de derulare verticale, fie o masă realigned pentru a se potrivi cu diferite afișaje de dimensiune. În al doilea rând, există abilitatea de a utiliza clasele de rânduri colorate menționate mai sus pe celule individuale, mai degrabă decât doar pe întregul rând, ca în cazul BS2. 

Pentru a utiliza clasele de colorare la nivel de celulă, trebuie doar să adăugați clasele individuale sau elemente, după cum urmează: 

 
 
 
Clasă
 
Col B
 
Col C
 
 
 
 
 
Val A
 
Val B
 
Val C
 
 
 

Acest cod trebuie să aibă ca rezultat următoarele: 

Adunarea finală a mesei finale este o clasă numită de masă receptiv, pe care îl puteți folosi aplicând la

element care împachetează întregul după cum urmează: 

Col A	Col B	Col C
Val A	Val B	Val C

Atunci când această clasă nouă este utilizată pe un ecran mai mare de 768 de pixeli (adică orice afișaj care utilizează o altă clasă de dimensionare decât * -Xs- *), atunci afișarea tabelului se va comporta ca o tabelă normală pentru bootstrap. Cu toate acestea, dacă tabelul este afișat pe un dispozitiv care vizează un dispozitiv * -Xs- *clasa și este mai mică de 768 de pixeli, containerul va fi modificat astfel încât să fie disponibilă o defilare verticală, permițând mutarea întregii mese la stânga și la dreapta fără a afecta restul paginii. 

Ieșire din eșantion de cod pe un dispozitiv cu o lățime mai mare de 768 de pixeliIeșire din eșantionul de cod pe un dispozitiv cu o lățime mai mică de 768 de pixeli

Modificări de formă 

Ca și în cazul BS2, toate elementele de formă normale au, în mod implicit, un nivel minim de marcare care le oferă un stil de bază. Acest lucru înseamnă că simpla marcare a unei etichete de formular și a controalelor asociate va conferi formularului dvs. aspectul implicit Bootstrap. 

Luați următorul exemplu: 

 
 Adresa de email  
 
 Parola  
 
 Introducerea fișierului  
Exemplu de text de ajutor la nivel de bloc aici.
 
 
   Verifica-ma  
 A depune 

Dacă facem acest exemplu într-un browser, vom vedea că vom obține o ieșire destul de bună fără adăugarea de clase suplimentare, după cum puteți vedea în următoarea imagine: 

Notă: Deoarece exemplul anterior a fost scris, a existat o actualizare minoră a codului BS3. Dacă încercați exemplul așa cum este scris aici, ieșirea probabil nu va arăta așa cum era de așteptat. Schimbarea făcută în BS3 pare să însemne că doar marcarea unui formular fără clase BS3 nu va avea efectul de a conferi formei un aspect consistent. Am lăsat exemplul aici, deoarece este de acord cu informațiile care sunt încă prezente pe site-ul de documentare și, ca atare, pare a fi sfatul oficial al autorilor de cadre.

Așa cum am menționat în secțiunea de migrație, clasele și componentele din jurul formularelor HTML au fost unele dintre cele mai mari victime când vine vorba de schimbarea numelui de clasă, dar acesta este pentru un motiv bun. 

Înainte de BS3, multe dintre clasele folosite pentru formulare erau foarte înguste - erau clase individuale pentru mai multe scopuri individuale, mai degrabă decât o singură clasă care acoperea multe baze. De exemplu, au existat clase separate pentru a face față alinierilor casetelor de selectare și butoanelor radio și au existat clase separate pentru a manipula casetele de introducere și zonele de text în raport cu alinierea rândului. 

În BS3, multe din aceste clase au fost șterse și sunt acum toate rulate sub un număr mai mic de clase și elemente. 

Luând exemplul nostru anterior și adăugând marcaje recomandate după cum se arată în documentația BS3 ne oferă următoarele: 

 
 Adresa de email  
 
 Parola  
 
 Introducerea fișierului  
Exemplu de text de ajutor la nivel de bloc aici.
 
 
   Verifica-ma  
 A depune 

Extern, dacă dați acest cod, nu veți vedea nici o diferență pentru rezultatul generat pentru eșantionul 18. Însă, în mod normal, Bootstrap poate acum să găsească și să lucreze cu elementele individuale mult mai ușor decât se putea anterior. 

În BS2 nu a existat nicio cerință de a grupa controalele decât dacă ați vrut să lucrați cu clasele de validare automată. Încă nu există o cerință absolută de a le utiliza, dar acest lucru permite BS să redimensioneze și să repoziționeze lucrurile corect atunci când utilizează grila sa (printre multe altele). Veți observa, de asemenea, că fiecare control are acum doar un singur sub formă de controlclasa atribuită acesteia, mai degrabă decât multe altele care vizează diferite aspecte. 

Rețineți, de asemenea, că eticheta formularului are un a rolalocat. Acest lucru, în afară de faptul că este o practică bună în toată lumea, este acum impus de BS3 pentru a ajuta la rolurile și standardele arii care să conducă la utilizarea aplicațiilor web de către persoanele cu handicap. 

În cele din urmă, dacă te uiți la

etichetați cu a help-bloc, veți observa că acesta este, de asemenea, folosit acum pentru text în formă integrală în toate cazurile, în timp ce în BS2 am avut o serie de clase diferite, cum ar fi Formularul-info. 

Din păcate, există încă o zonă în sprijinul pentru formularele care lipsesc - controlul încărcării fișierelor. La fel ca BS2, acest lucru se datorează faptului că securitatea în toate culturile curente de browsere restricționează capacitatea de a modela comenzile de intrare a fișierelor pentru a se potrivi cu celelalte controale de intrare disponibile. 

Așa cum am menționat în cartea precedentă, totuși, există încă adăugări ale unor terțe părți care acoperă acest domeniu și pentru că acum puteți să vă fabricați propriul sistem de încărcare utilizând clasele HTML5, în mod strict nu aveți nevoie să încărcați fișierul control - puteți să vă fabricați propriul. 

În BS2 au existat o serie de tipuri de forme specifice, cum ar fi Căutare în formă; în conformitate cu BS3 toate acestea au fost laminate în trei tipuri principale de formă. În primul rând, aveți formularul standard; după cum am văzut, aceasta este o formă normală fără adăugarea de clase suplimentare la eticheta de formular. Celelalte două tipuri de forme sunt form-inlineși formă orizontală. 

form-inlineclasa este concepută pentru forme în locuri mici, înălțime limitată, cum ar fi barele de meniu și de navigare. Cu toate acestea, un cuvânt de avertizare: toate elementele de intrare din această clasă și celelalte tipuri de formulare sunt dimensionate în mod implicit în proporție de 100%, deci dacă aveți nevoie de formularul pentru a ocupa doar o mică cantitate de spațiu (în special în barul navformulare), va trebui să introduceți mărimi manuale pe controalele individuale. 

În exemplul din proba codului anterior, adăugând form-inlinesau formă orizontalăla rândul său, ar trebui să vă schimbați aspectul de bază pentru a arăta astfel: 

Formularul produs de eșantionul de cod anterior cu clasa formular inline adăugată la eticheta de formular.

formă orizontală clasa este folosită pentru a crea formulare normale de sus în jos cu controale de intrare care au etichetele asociate în stânga lor, mai degrabă decât deasupra acestora, ca formă implicită. Fiți conștienți, totuși, că pentru ca forma orizontală să funcționeze corect, trebuie să adăugați un mic marcaj suplimentar la formular în general, așa cum se arată în exemplul de cod următor. 

Notă: În noua lume bravo nouă a HTML 5, este mai important ca oricând să marcați corect elemente de intrare cu o etichetă asociată. Deoarece utilizatorii dezavantajați pot folosi ajutoare pentru a le ajuta să nu le ofere piesele necesare pentru a permite acestor ajutoare să funcționeze corect, vor fi văzute ca un lucru rău, iar companiile care-i părăsesc ar putea fi evitate pentru a face acest lucru. Nu-ți face griji că-BS3 te-ai acoperit. Dacă decideți că nu doriți etichete în formularele dvs., le puteți marca cu o clasă opțională, sr-numai. Adăugarea acestei clase va împiedica vizualizarea etichetei sau a textului de ajutor asociat în documentul dvs., dar va asigura că aceasta este marcată în așa fel încât să fie vizibilă de cititoare de ecran și de alte dispozitive sau programe similare.

 
 Adresa de email 
  
 
 
 Parola 
  
 
 
 Introducerea fișierului 
  
Exemplu de text de ajutor la nivel de bloc aici.
 
 
 
 
 
   Amintește-ți de mine  
 
 
 
 
 conectare 
 
 

Dacă redați codul din acest exemplu în browserul dvs., acesta ar trebui să arate după cum urmează: 

Rezultatul afișat din eșantionul de cod anterior indicând formularul marcat ca orizontal.

După cum puteți vedea din codul din eșantionul 20, marcajul suplimentar nu este într-adevăr mult mai mult și majoritatea există doar pentru a alinia coloanele corect, astfel încât totul să fie frumos. 

Principalele puncte pe care trebuie să le cunoaștem în eșantionul 20 sunt: 

1. Toate controalele de etichete au acum o clasă de control al eticheteiadăugat. Acest lucru nu este necesar pentru celelalte tipuri de formulare, iar BS2 o va ignora. 
2. Orice control de intrare care se va face probabil ca un element la nivel de bloc este acum înfășurat într-un părinte
   pentru a controla lățimea sa folosind sistemul de rețea. 
3. Clasa suplimentară pentru formă orizontalăeste aplicată pe eticheta exterioară. 

Pentru restul clasei și părților asociate din secțiunea formulare din BS3, nimic altceva decât clasele menționate până acum sa schimbat. Cu toate acestea, din punct de vedere al aplicației, controlul de intrare este acum trebuie sa au un tip corect pe ele pentru a fi decorate. Acest lucru înseamnă că trebuie să aveți cel puțin minimum type = "text"pentru BS3 să-și facă magia. 

Se recomandă totuși să utilizați tipurile corecte. Așa cum veți vedea în curând când ajungem la grupurile de validare, având tipul corect va permite ca majoritatea lucrurilor de validare să funcționeze corect fără a face nicio modificare în marcarea dvs.. 

Bifați casetele și butoanele radio, ca în BS2, sunt stivuite în mod implicit. Dacă doriți să le dați pe verticală pe ecran, trebuie să utilizați checkbox-inlineși radio inlineclase după cum urmează: 

   1    2    3  
 
   1    2    3  

Efectuarea de eșantionare 21 în browserul dvs. ar trebui să arate după cum urmează: 

Casutele selectate și cu mai multe selecții sunt marcate cu stiluri standard doar prin utilizarea elementelor așa cum sunt acestea; aceasta nu este o schimbare de la BS2, unde marcajul și stilul acestor elemente sunt identice. 

Un nou stil care a fost introdus în BS3 este stilul de control static. În BS2, de multe ori a trebuit să utilizați un control de formular dezactivat pentru a reprezenta date de formă statică care nu au putut fi modificate. BS3 schimba aceasta prin furnizarea unui a form-control-staticclasă care poate fi aplicată controalelor individuale în locul celor obișnuite sub formă de control, după cum arată următorul cod: 

 
 E-mail 
 
[email protected]
 
 
 
 Parola 
  
 
 

Atunci când este redat în browser, aceasta produce o configurație obișnuită a formularului, controlul static marcat în mod clar ca nefiind editat sau ca un control de intrare, după cum arată următoarea imagine: 

Stilul de control al formularului dezactivat este încă marcat și utilizat în același mod ca și în BS2, pur și simplu prin adăugarea atributului "disabled" la elementul de intrare, după cum urmează: 

Acest lucru va produce aspectul de control clasic dezactivat și umbrit, cum ar fi: 

Dacă adăugați invalidatribut unui set de câmp care înconjoară un formular, toate controalele din acel grup vor fi dezactivate în același timp, utilizând același stil. Acesta este ceva care nu sa întâmplat în BS2 - în schimb, a trebuit să marchezi fiecare control individual. 

Ultimul lucru pe care vreau să-l menționez în timp ce se referă la subiectele formelor este clasele de validare și concentrare. După cum am menționat anterior, adăugarea tipurilor corecte de intrare în elementele HTML5 vă ajută cu adevărat atunci când este vorba de utilizarea claselor de validare. De ce este asta? 

Pe lângă faptul că aveți nume și stiluri de clasă dedicate pentru utilizare, clasele de validare creează, de asemenea, noile pseudo-elemente HTML5, cum ar fi se concentreze:, eroare:, si altii. 

Aceasta înseamnă că dacă marcați o casetă de text ca type = "email", și apoi nu puneți o adresă de e-mail în ea atunci când trimiteți, browser-ul ar trebui să evidențieze în mod automat câmpul roșu pentru tine. 

Dacă nu, sau dacă aveți altă cale de a face validarea dvs., puteți folosi pur și simplu a-succes, are de avertizare, și are eroareclase pe grupurile dvs. de formular după cum arată următorul cod: 

 
 Etichetă pentru grupul de formulare care are succes  
Un text de ajutor la nivel de bloc de succes aici.
 
 
 Etichetă pentru grupul de formule care are avertisment  
Avertisment la nivel de bloc text de ajutor aici.
 
 
 Etichetă pentru grupul de formulare care are eroare  
Eroare la nivel de ajutor la nivel de bloc text aici.
 
 

Dacă redați acest cod în browserul dvs., ar trebui să vedeți ceva asemănător: 

Trebuie menționat faptul că am adăugat clasele în grupurile de formate pentru a produce un afișaj static; totuși, ar trebui să încercați doar să marcați formularul cu tipurile de intrare corecte. 

Am descoperit că suportul browser-ului pentru pseudo-clase este încă puțin fragmentar, chiar dacă nu există nicio mențiune în documentul BS3, așa că recomand să folosiți și numele de clasă atunci când manipulați elementele folosind JavaScript. 

Rețineți, de asemenea, că eticheta și textul de ajutor de la nivelul blocului au culoarea corectă a grupului, astfel încât să nu aveți nevoie să adăugați culori sau stiluri la acestea separat grupului de control al formularului. Amintiți-vă că form-grupsecțiunile pot utiliza, de asemenea, tot ceea ce am menționat până acum pentru a dezactiva, a umple și a redimensiona elementele de formă, după cum este necesar, pe bază de grup. 

Ultimul lucru pe care trebuie să-l menționăm pentru grupurile de validare este că puteți furniza, de asemenea, pictograme opționale de feedback direct în controalele formularului pentru a vă ajuta cu statul. 

Faceți acest lucru furnizând un element de span imediat după elementul de intrare cu care ar trebui să fie utilizat. Acest element de tip span are clasele obișnuite de pictograme aplicate acestuia (pe care o vom vedea în tutorialul următor), împreună cu o clasă de Formularul-control-feedback-. Acest trebuie sa să fie plasat după controlul de intrare și înainte de orice alt marcaj din grupul de intrare, datorită modului în care comanda este repoziționată pentru ao face să apară în comanda. Odată ce adăugați intervalul, trebuie să adăugați și o clasă de are feedbackîn lista de clase de grupuri alături de cealaltă a-xxxxxclase utilizate pentru a arăta starea de validare. 

Dacă extindem eșantionul de cod anterior pentru a face acest lucru în cont și pentru a adăuga pictograme de feedback, ar trebui să arate astfel: 

 
 Etichetă pentru grupul de formulare care are succes   
Un text de ajutor la nivel de bloc de succes aici.
 
 
 Etichetă pentru grupul de formule care are avertisment   
Avertisment la nivel de bloc text de ajutor aici.
 
 
 Etichetă pentru grupul de formulare care are eroare   
Eroare la nivel de ajutor la nivel de bloc text aici.
 
 

Odată ce re-render cu aceste modificări, ar trebui să vedeți următoarele: 

Acest tutorial reprezintă un capitol din Bootstrap 3 Succinctly, o carte electronică gratuită de la echipa de la Syncfusion.

Web design