Layout

Muab koj cov ntaub ntawv ib co qauv-los ntawm inline mus rau kab rov tav mus rau kev cai daim phiaj siv-nrog peb daim ntawv layout xaiv.

Ntawm nplooj ntawv no

Cov ntawv

Txhua pawg ntawm daim teb yuav tsum nyob hauv ib lub <form>caij. Bootstrap muab tsis muaj styling default rau lub <form>caij, tab sis muaj qee qhov browser muaj zog uas tau muab los ntawm lub neej ntawd.

Tshiab rau cov ntaub ntawv browser? Xav txog kev tshuaj xyuas daim ntawv MDN daim foos rau kev saib xyuas thiab ua tiav cov npe ntawm cov yam ntxwv muaj.
<button>s nyob rau hauv lub <form>neej ntawd rau type="submit", yog li siv zog ua kom meej thiab ib txwm suav nrog a type.

Txij li thaum Bootstrap siv display: blockthiab width: 100%yuav luag tag nrho peb daim ntawv tswj hwm, cov ntaub ntawv yuav los ntawm lub neej ntawd pawg vertically. Cov chav kawm ntxiv tuaj yeem siv los hloov qhov kev teeb tsa no ntawm ib daim ntawv.

Cov khoom siv

Margin utilities yog qhov yooj yim tshaj los ntxiv qee cov qauv rau cov ntawv. Lawv muab cov pab pawg hauv paus ntawm cov ntawv sau, kev tswj hwm, xaiv cov ntawv sau, thiab daim ntawv validation messaging. Peb pom zoo kom ua raws li kev margin-bottomsiv hluav taws xob, thiab siv ib qho kev taw qhia thoob plaws hauv daim ntawv kom sib xws.

Xav tias dawb los tsim koj cov ntaub ntawv txawm li cas los xij koj nyiam, nrog <fieldset>s, <div>s, lossis ze li lwm yam.

Piv txwv daim ntawv lo

Lwm daim ntawv lo

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>

Daim phiaj

Ntau cov ntaub ntawv nyuaj tuaj yeem tsim tau siv peb cov chav kawm kab sib chaws. Siv cov no rau daim ntawv layouts uas yuav tsum tau muaj ntau kab, varied widths, thiab ntxiv alignment xaiv. Yuav tsum tau $enable-grid-classesSass hloov pauv kom qhib tau (ntawm lub neej ntawd).

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>

Gutters

Los ntawm kev ntxiv gutter modifier chav kawm , koj tuaj yeem muaj kev tswj xyuas qhov dav ntawm gutter hauv ib yam li inline raws li thaiv kev taw qhia. Kuj tseem xav kom $enable-grid-classesSass hloov pauv kom qhib tau (ntawm lub neej ntawd).

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>

Ntau qhov layouts tseem tuaj yeem tsim nrog cov kab sib chaws.

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>

Kab rov tav daim ntawv

Tsim cov ntawv kab rov tav nrog daim phiaj los ntawm kev ntxiv cov .rowchav kawm los tsim cov pab pawg thiab siv cov .col-*-*chav kawm los qhia qhov dav ntawm koj cov ntawv sau thiab kev tswj hwm. Nco ntsoov ntxiv .col-form-labelrau koj <label>li thiab yog li lawv nyob nraum vertically centered nrog lawv daim ntawv tswj hwm.

Qee lub sij hawm, tej zaum koj yuav tau siv cov paj los yog cov khoom siv padding los tsim kom muaj kev sib haum xeeb uas koj xav tau. Piv txwv li, peb tau tshem tawm padding-topntawm peb cov ntawv xov tooj cua sib xyaw ua ke kom zoo dua cov kab ntawv hauv qab.

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>

Kab rov tav daim ntawv lo sizing

Nco ntsoov siv .col-form-label-smlossis .col-form-label-lgrau koj tus <label>s lossis <legend>s kom raug ua raws li qhov loj me .form-control-lgthiab .form-control-sm.

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>

Kem qhov loj me

Raws li pom nyob rau hauv cov piv txwv yav dhau los, peb daim phiaj system tso cai rau koj tso ib tug xov tooj ntawm .cols nyob rau hauv ib tug .row. Lawv yuav faib qhov dav dav sib npaug ntawm lawv. Koj tseem tuaj yeem xaiv ib pawg ntawm koj cov kab kom siv ntau dua lossis tsawg dua qhov chaw, thaum qhov seem .cols sib npaug sib faib tus so, nrog cov chav kawm tshwj xeeb xws li .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

Cov piv txwv hauv qab no siv cov khoom siv flexbox rau vertically nruab nrab ntawm cov ntsiab lus thiab hloov pauv .colkom .col-autokoj cov kab tsuas siv tau ntau qhov chaw raws li xav tau. Muab lwm txoj hauv kev, kem loj nws tus kheej raws li cov ntsiab lus.

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>

Tom qab ntawd koj tuaj yeem remix qhov ntawd ib zaug ntxiv nrog cov chav kawm tshwj xeeb ntawm kab.

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>

Cov ntawv hauv kab

Siv cov .row-cols-*chav kawm los tsim cov lus teb kab rov tav layouts. Los ntawm kev ntxiv gutter modifier chav kawm , peb yuav muaj gutters nyob rau hauv kab rov tav thiab ntsug. Ntawm nqaim mobile viewports, .col-12pab pawg pawg tswj hwm thiab ntau dua. Lub .align-items-centeraligns cov ntsiab lus mus rau nruab nrab, ua kom cov .form-checkdlhos kom zoo.

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>