Introducere în layout-ul formularului Bootstrap

HTML și CSS sunt limbile de bază pentru proiectarea formularului de site-uri web. Toate șabloanele de bază realizate prin HTML, dar trebuie să proiectăm și să creăm un fișier CSS unic, apoi necesar. Această metodă este complicată datorită referințelor de clasă și id. Pentru a depăși toate problemele din fișierele HTML și CSS vine bootstrap. Bootstrap este o tehnică avansată de design web. Pentru validare și formatul necesar al formularului, bootstrap are o clasă proprie pentru textarea, intrarea și alte controale precum controlul formularului, grupul de intrare, etc. Folosind aspectul bootstrap-ului putem decide formatul formularului. Putem realiza cu ușurință formate de formă verticală, orizontală și inline folosind bootstrap.

Tipuri de aspect al formularului Bootstrap

Aspectul formularului Bootstrap face un tip de formă diferit. face proiectare și validare fără fișiere CSS și JavaScript. Datorită aspectului formei, reduceți mai multe codări și complicații. Bootstrap are o clasă proprie pentru a depăși toate CSS și coduri JavaScript complexe.

Bootstrap are trei tipuri de aspect de formă.

  • Forma verticală
  • Forma orizontală
  • Forma in linie

Să vedem în detaliu aceste trei tipuri:

1. Forma verticală

În format vertical, eticheta și elementele textuale sunt verticale și fiecare grup de forme este vertical. Forma verticală este formularul implicit în bootstrap. Nu există o regulă suplimentară pentru formatul vertical al formularului.

2. Forma orizontală

În modul de formare orizontală, eticheta și elementele textuale sunt orizontale, dar fiecare grup de formă este vertical . Adăugați două clase principale pentru forma orizontală.

Adăugați clasa în elementul formular.

Adăugați clasa în elementele etichetelor.

3. Formular in linie

În formă de linie, eticheta și elementele sunt aliniate și aliniate la stânga. Viewport are cel puțin 768px lățime. Adăugați o clasă pentru formularul inline.

Adăugați clasa la elementele de formă.

Aspectul formularului Bootstrap are o clasă implicită pentru convenția de formular menționată mai jos:

  • .form-group: Această clasă folosită pentru distanțarea formelor și legarea etichetei. Este flexibil pentru legarea,,, mesaje de validare a formularului și mai mult pentru formulare.
  • . form-control: Această clasă se folosește pentru toate elementele textuale și spațiul pentru formă, etc. Este utilizată pentru toate stilurile precum dimensiunea, focalizarea.
  • .form-control-lg și .form-control-sm sunt utilizate pentru dimensiunea elementelor de intrare, respectiv mici și mici.

Element și clasă acceptate

Unele elemente și clase acceptate pentru validarea formularului Bootstrap fără JavaScript. Face ușor și depășește mult codarea de validare din partea serverului.

1) .form-control-file: Această clasă este utilizată pentru a adăuga un fișier precum pdf, Docx, etc., în loc să folosească controlul de formă al clasei, în datele de fișier din această clasă se folosește.

Exemplu:

2) Cititor: Acesta este un atribut boolean folosit pentru elementele de intrare. În acest atribut, utilizatorul nu poate modifica valoarea și nu poate dezactiva cursorul pentru a scrie.

Exemplu:

3) .form-control-plaintext: această clasă funcționează la fel ca la citire, dar vine cu marjă și umplutură corectă.

Exemplu:

Exemplu de dispunere a formularului Bootstrap

Exemplele date sunt prezentate mai jos:

1. Exemplu de formă verticală (Forma implicită)


Name:

Email:

  • Forma verticală este simplă și implicită în bootstrap.
  • Exemplul de mai sus are două câmpuri de intrare și un buton de conectare vertical cu eticheta.
  • Folosind doar forma de grup de clasă și clasa de control de formă, forma verticală creată.
  • Puteți modifica dimensiunea elementelor de intrare fără ajustarea dimensiunii fișierului CSS. Utilizatorul are nevoie doar de o clasă care este .form-control-lg și .form-control-sm pentru dimensiuni mari și respectiv.

2. Exemplu de formă orizontală

class=”form-horizontal”>
Name:


Email:


  • Folosind forma de orizontală, utilizatorul creează o formă orizontală. Eticheta și elementul de intrare sunt în linie, dar grupa de formă a clasei este verticală. Clasa „control-label col-sm-2” și = „col-sm-10” utilizate pentru coloana divizată. Alocare cu două coloane Pentru etichetă și Zece coloane se alocă pentru elemente de intrare.
  • Clasa ”col-sm-offset-2 col-sm-10” folosit pentru butonul Login. Offset utilizat pentru spațiu, col-sm-offset-2 a folosit spații cu două coloane din stânga într-o formă.
  • Consultați exemplul de formă orizontală și ieșirea sa pentru a înțelege aspectul. Numele său și textul de intrare sunt într-o linie, apoi e-mailul și elementele sunt într-o altă linie.
  • Pe ecranul mare și mediu, forma arată aspectul orizontal, dar pe ecranul mic (767px și mai jos), forma pare verticală.
  • Forma orizontală este complicată folosind metoda tradițională, dar aspectul bootstrap-ului ajută la utilizarea ușoară folosind controlul clasei și etichetelor.

3. Exemplu de formă Inline

class=”form-inline”>
Name:

Email:
placeholder=”Enter email”>
 class=”form-inline”>
Name:

Email:
placeholder=”Enter email”>

  • În formă inline, toate etichetele și elementele sunt într-un rând. Toate grupurile de forme sunt într-un singur rând. Formularul de clasă în linie este implicit pentru acest aspect. Utilizatorul a plasat această clasă în. Forma de linie folosită mai mult pentru butoanele radio, butoanele de verificare și așa mai departe.
  • Acest formular funcționează în cea mai mare parte la cel puțin 576px viewport după care apare ca un formular implicit. În etichetă se folosește doar sr-class. Această clasă este un cititor de ecran, folosit pentru a ascunde eticheta și arată singurul element.
  • Dacă elementul de intrare în formularul inline, utilizatorul trebuie să vină cu un marcator de loc într-un element de intrare pentru a recunoaște elementul.

Concluzie - Bootstrap from Layout

Pentru a înțelege tehnologia Bootstrap, utilizatorul trebuie să știe despre HTML, CSS și JavaScript. Forma bootstrap este cea mai simplă modalitate de a lucra formularul format standard. Are clase proprii pentru a elimina codarea și nu este necesar CSS și fișierul diferit JavaScript. Utilizând formularul Bootstrap, utilizatorul primește viteza de codare și de a evita designul și stilul de codare a blocurilor. Bootstrap este un cadru pentru designul web final, care este ușor și auto-implementat.

Articole recomandate

Acesta este un ghid pentru aspectul formularului Bootstrap. Aici discutăm introducerea în Layout Form Form Bootstrap împreună cu tipurile și exemplele. Puteți parcurge și alte articole sugerate pentru a afla mai multe -

  1. Tipografia cizmei
  2. Dispunerea cizmei
  3. Sistem grilă Bootstrap
  4. Componente pentru bootstrap

Categorie:

Dezvoltare de software