in English

fisehon'ny

Omeo rafitra sasany ny endrikao — manomboka amin'ny andalana mankany amin'ny marindrano mankany amin'ny fampiharana ny tsipika mahazatra—miaraka amin'ireo safidy fandrafetana endrika.

Amin'ity pejy ity

teny

Tokony hipetraka amin'ny <form>singa iray ny vondron'ny saha rehetra. Ny Bootstrap dia tsy manome styling default ho an'ny <form>singa, fa misy endri-tsarimihetsika mahery vaika nomen'ny default.

Vaovao amin'ny endrika navigateur? Diniho ny famerenana ny antontan-taratasin'ny MDN ho an'ny topimaso sy lisitra feno amin'ny toetra misy.
<button>s ao anaty <form>default amin'ny type="submit", koa miezaha manokana ary ampidiro foana ny type.

Koa satria mihatra ny Bootstrap display: blockary width: 100%saika amin'ny fanaraha-maso ny endrika rehetra, dia mitsangana mitsangana ny endrika. Ny kilasy fanampiny dia azo ampiasaina hanovana an'io lamina io amin'ny endrika isan-karazany.

Asa vaventy

Ny fampiasa amin'ny sisiny no fomba mora indrindra hanampiana rafitra sasany amin'ny endrika. Izy ireo dia manome vondrona fototra amin'ny etikety, fanaraha-maso, lahatsoratra amin'ny endrika tsy voatery, ary hafatra fanamarinana endrika. Manoro hevitra izahay ny hifikitra amin'ny margin-bottomfitaovana ampiasaina, ary mampiasa torolalana tokana manerana ny endrika mba tsy miovaova.

Aza misalasala manangana ny endrikao araka izay tianao, miaraka amin'ny <fieldset>s, <div>s, na saika singa hafa.

Etikety ohatra

Etikety hafa

html

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example label</label>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another label</label>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>

Form grid

Ny endrika sarotra kokoa dia azo amboarina amin'ny alàlan'ny kilasin'ny grid. Ampiasao ireo ho an'ny famolavolana endrika izay mitaky tsanganana maro, sakany isan-karazany ary safidy fampifanarahana fanampiny. Mitaky ny $enable-grid-classesfari-piadidiana Sass mba ho alefa (efa mandeha amin'ny alàlan'ny default).

html

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

tatatra

Amin'ny fampidirana kilasy modifier tatatra , azonao atao ny mifehy ny sakan'ny tatatra ao anatiny ary koa ny inline toy ny lalana sakana. Mitaky koa ny $enable-grid-classesfari-pahaizan'ny Sass ho alefa (efa mandeha ho azy).

html

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

Azo amboarina miaraka amin'ny rafitra grid ihany koa ny fandrafetana sarotra kokoa.

html

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

endrika marindrano

Mamorona endrika marindrano miaraka amin'ny grid amin'ny alàlan'ny fampidirana ny .rowkilasy hamorona vondrona ary ampiasao ireo .col-*-*kilasy mba hamaritana ny sakan'ny marika sy ny fanaraha-maso. Ataovy azo antoka ny manampy .col-form-labelny <label>s anao koa mba hiorenan'izy ireo mitsangana miaraka amin'ny fanaraha-maso ny endrika mifandray aminy.

Indraindray, mety mila mampiasa margin na fitaovana padding ianao mba hamoronana ny fampifanarahana tonga lafatra ilainao. Ohatra, nesorinay ny padding-topmari-pamantarana fampidiran-dresaka amin'ny onjam-peo mba hampifanaraka tsara ny tsipika fototra.

html

<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Famaritana ny mari-pamantarana endrika marindrano

Aza hadino ny mampiasa .col-form-label-smna .col-form-label-lgamin'ny <label>s na ny anao <legend>mba hanaraka tsara ny haben'ny .form-control-lgsy .form-control-sm.

mailaka

html

<div class="row mb-3">
  <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
  </div>
</div>
<div class="row mb-3">
  <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
  </div>
</div>
<div class="row">
  <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
  </div>
</div>

Fametrahana tsanganana

Araka ny aseho amin'ny ohatra teo aloha, ny rafitra grid dia ahafahanao mametraka isa maromaro .colao anaty .row. Hozarainy mitovy amin'izy ireo ny sakany misy. Azonao atao ihany koa ny misafidy ny ampahany amin'ny tsangananao mba haka toerana bebe kokoa na latsaka, fa ny ambiny kosa .coldia mizara ny ambiny, miaraka amin'ny kilasy tsanganana manokana toy ny .col-sm-7.

html

<div class="row g-3">
  <div class="col-sm-7">
    <input type="text" class="form-control" placeholder="City" aria-label="City">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="State" aria-label="State">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
  </div>
</div>

Auto-sizing

Ny ohatra eto ambany dia mampiasa fampiasa flexbox mba hampifantohana mitsangana ny atiny sy hanova .colazy .col-automba tsy haka toerana betsaka araka izay ilaina ihany ny tsangananao. Raha lazaina amin'ny teny hafa, ny haben'ny tsanganana dia miankina amin'ny atiny.

html

<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Name</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Preference</label>
    <select class="form-select" id="autoSizingSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck">
      <label class="form-check-label" for="autoSizingCheck">
        Remember me
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Azonao atao ny mampifangaro izany indray miaraka amin'ny kilasy tsanganana voafaritra habe.

html

<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Name</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Preference</label>
    <select class="form-select" id="specificSizeSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
      <label class="form-check-label" for="autoSizingCheck2">
        Remember me
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Endrika an-tsoratra

Ampiasao ireo .row-cols-*kilasy mba hamoronana fisehon'ny marindrano mamaly. Amin'ny fampidirana kilasy modifier tatatra , dia hanana tatatra mitsivalana sy mitsangana isika. Amin'ny toerana fijerena finday tery, ny .col-12fanampiana amin'ny fametrahana ny fanaraha-maso ny endrika sy ny maro hafa. Mampifanitsy amin'ny .align-items-centerafovoany ireo singa endrika, manao ny .form-checkfampifanarahana tsara.

html

<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>