Formulare, webreference

Formatul formularelor este unul din punctele forte ale Bootstrap. Cadrul nu numai că ajută la aranjarea elementelor de formă în ordinea dorită, dar oferă, de asemenea, o schimbare în aspectul elementelor și interacțiunea lor cu utilizatorul.

Să aruncăm o privire asupra unui formular eșantion pentru a vă conecta la site și, în exemplul său, vom analiza modul în care Boostrap funcționează pentru formulare. Exemplul 1 arată crearea unui formular de bază în timp ce se adaugă clase suplimentare.

Exemplul 1. Formularul de înscriere pe site

Forma pare a fi plictisitoare (Figura 1), deoarece orice proiect nu este încă inclus.

Formulare, webreference

Fig. 1. Tipul sursei

Mai întâi, adăugați formularul de control de clasă în câmpul de text și câmpul de parolă. aceasta va schimba stilul câmpurilor de text. Apoi, trebuie să grupați antetul și câmpul în spatele acestuia, astfel încât distanța dintre ele să fie mai mică decât de obicei. adăuga

cu clasă de grup-form. În plus, modificați caseta de selectare cu textul, adăugându-le înăuntru
cu o clasă de casete de selectare și setați un alt tip de buton. Exemplul 2 prezintă modificările din formular.

Exemplul 2. Aplicarea clasei

Ca rezultat, forma pare diferită (figura 2).

Formulare, webreference

Fig. 2. Tipul formei

Formă unică

Pentru a face forma mai compactă, la element

este suficient să adăugați o clasă în formă. Elementele formularului vor fi apoi trase într-o singură linie (Figura 3). De asemenea, din cod este necesară eliminarea
și .

Formulare, webreference

Fig. 3. Formă dintr-o singură linie

Exemplul 3 arată crearea acestui formular.

Exemplul 3. Forma dintr-o singură linie

Când dimensiunea ferestrei scade, formularul nu va mai fi o singură linie și va lua forma originală prezentată în Fig. 2.

Formă orizontală

Acest tip de formă se găsește adesea pe site-uri, când câmpul și eticheta se află pe o linie (Figura 4).

Formulare, webreference

Fig. 4. Forma orizontală

Pentru a crea o formă de acest tip, trebuie să faceți câteva lucruri:

  • la adăugați forma de clasă-orizontală;
  • la
  • încheiați
  • utilizați o rețea modulară.

Ne-am ocupat deja de o grilă modulară cu 12 coloane, aplicăm aceste abilități pentru a controla designul de formă. Eticheta va ocupa două coloane, iar lățimea câmpului în sine - restul zece coloane. În loc să adăugați un supliment

adăugați clasa col-sm-2 direct la