Guvernul Republicii Moldova Guvernul Republicii Moldova

Formulare si tabele

Exemple și ghiduri de utilizare pentru stiluri de control de formulare, opțiuni de dispunere și componente personalizate pentru crearea unei varietăți mari de forme.

Prezentare generala

Controalele de formă ale Bootstrap se extind pe stilurile noastre de formă reîncărcate cu clase. Utilizați aceste clase pentru a opta pentru afișările personalizate pentru o redare mai consistentă în browsere și dispozitive.

Asigurați-vă că utilizați un atribut de tip adecvat pe toate intrările (de exemplu, e-mail pentru adresa de e-mail sau numărul pentru informații numerice) pentru a profita de controale de intrare mai noi, cum ar fi verificarea prin e-mail, selectarea numărului și multe altele.

Iată un exemplu rapid pentru a demonstra stilurile de formă ale Bootstrap. Citiți documentația privind clasele solicitate, aspectul formularului și multe altele.

We'll never share your email with anyone else. 

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <input type="checkbox" class="form-check-input" id="exampleCheck1"/>
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Mărimi

Setați înălțimi folosind clase precum .form-control-lg și .form-control-sm. 




<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

Readonly cu aspect de text simply

Dacă doriți să aveți <input readonly> elemente în formularul dvs. în stil simplu, folosiți clasa .form-control-plaintext pentru a elimina stilul de câmp al formularului implicit și pentru a păstra marja și umplutura corectă. 


<form>
<div class="form-group">
  <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
    <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
  </div>
</div>
<div class="form-group">
  <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
  </div>
</div>
</form>

Checkbox-uri si radio butoane

Checkbox-urile și radiourile implicite sunt îmbunătățite odată cu ajutorul .form-check, o singură clasă pentru ambele tipuri de intrare care îmbunătățește aspectul și comportamentul elementelor HTML. Casetele de selectare sunt pentru a selecta una sau mai multe opțiuni dintr-o listă, în timp ce radiourile sunt pentru a selecta o opțiune dintre multe.

Casetele de selectare și radiourile dezactivate sunt acceptate, dar pentru a furniza un cursor nepermis la trecerea <label> părinte, va trebui să adăugați atributul dezactivat la intrarea .form-check-input. Atributul dezactivat va aplica o culoare mai deschisă pentru a ajuta la indicarea stării intrării. 


<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>



<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Dropdown butoane

Butoane de tip dropdown pentru afișarea listelor de link-uri și multe altele cu pluginul "dropstrap Bootstrap".

Exemple

Înfășurați butonul în .dropdown sau un alt element care declară pozition:relative;. Dropdown-urile pot fi declanșate din elemente <a> sau <button> pentru a vă potrivi mai bine nevoilor potențiale.

Buton unic

Orice element cu clasa .btn poate fi transformat într-un dropdown cu unele modificări de markup. Iată cum le puteți pune să funcționeze cu oricare dintre elementele :

1. Element <button>
Action Another action Something else here 

<div class="dropdown">
    <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-target="#ddButton01" id="dropdownMenuButton" data-toggle="collapse" aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>
    <div class="dropdown-menu" id="ddButton01" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>
2. Element <a>
Action Another action Something else here 

<div class="dropdown show">
    <a class="btn btn-default btn-lg dropdown-toggle" href="#" data-target="#ddButton02" role="button" id="dropdownMenuLink" data-toggle="collapse" aria-haspopup="true" aria-expanded="false">
        Dropdown link
    </a>
    <div class="dropdown-menu" id="ddbutton02" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

Buton comutator (switch)

Un comutator are markup-ul unei căsuțe de selectare .custom-control, dar folosește clasa .custom-switch pentru a face un comutator de comutare. Comutatoarele acceptă, de asemenea, atributul disabled. 


<!-- Default switch -->
<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitches">
    <label class="custom-control-label" for="customSwitches">Switch</label>
</div>

Tabele

Exemple

Folosind marcajul de bază al tabelelor, iată cum arată tabelele bazate pe tabele în Bootstrap. Toate stilurile de tabel sunt moștenite în Bootstrap 4, ceea ce înseamnă că orice tabelă cuibărită va fi stilată în același mod ca și părintele.

# Email Status Last Handle
1 ion.popescu@example.com Available Otto
2 marco.chan@example.com Not available Thornton
3 gigi.becali@example.com Non active the Bird 

<table class="table">
    <thead>
        <tr>
            <th scope="col">...</th>
            <th scope="col">...</th>
            <th scope="col">...</th>
            <th scope="col">...</th>
            <th scope="col">...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">...</th>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <th scope="row">...</th>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <th scope="row">...</th>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
</table>