Siirry pääsisältöön Siirry dokumenttien navigointiin
Check
in English

Layout

Anna lomakkeillesi rakennetta – upotetusta vaakasuoraan ja mukautettuihin ruudukkototeutuksiin – lomakeasetteluvaihtoehtojemme avulla.

Tällä sivulla

Lomakkeet

Jokaisen lomakekenttien ryhmän tulee sijaita <form>elementissä. Bootstrap ei tarjoa elementille oletustyyliä <form>, mutta oletuksena on joitain tehokkaita selainominaisuuksia.

  • Uusi selaimen lomakkeiden käyttäjä? Harkitse MDN-lomakedokumenttien tarkastelua saadaksesi yleiskatsauksen ja täydellisen luettelon käytettävissä olevista määritteistä.
  • <button>s <form>oletusarvon sisällä type="submit", joten pyri olemaan täsmällinen ja sisällytä aina type.

Koska Bootstrap koskee display: blockja width: 100%lähes kaikkia lomakeohjausobjektejamme, lomakkeet pinotaan oletusarvoisesti pystysuunnassa. Lisäluokilla voidaan muuttaa tätä asettelua lomakkeen mukaan.

Apuohjelmat

Marginaaliapuohjelmat ovat helpoin tapa lisätä lomakkeisiin rakennetta. Ne tarjoavat tarrojen, ohjausobjektien, valinnaisen lomaketekstin ja lomakkeen vahvistusviestien perusryhmittelyn. Suosittelemme pysymään margin-bottomapuohjelmissa ja käyttämään yhtä suuntaa koko lomakkeessa johdonmukaisuuden vuoksi.

Voit vapaasti rakentaa lomakkeesi haluamallasi tavalla <fieldset>s:llä, <div>s:llä tai melkein millä tahansa muulla elementillä.

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>

Lomake ruudukko

Monimutkaisempia lomakkeita voidaan rakentaa ruudukkoluokillamme. Käytä näitä lomakeasetteluissa, jotka vaativat useita sarakkeita, vaihtelevia leveyksiä ja muita kohdistusvaihtoehtoja. Edellyttää, että $enable-grid-classesSass-muuttuja on käytössä (oletusarvoisesti käytössä).

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>

Vesikourut

Lisäämällä kourujen modifiointiluokkia voit hallita kourujen leveyttä sekä sisä- että lohkosuunnassa. Edellyttää myös, että $enable-grid-classesSass-muuttuja on käytössä (oletusarvoisesti päällä).

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>

Ruudukkojärjestelmällä voidaan luoda myös monimutkaisempia asetteluja.

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>

Vaakasuora muoto

Luo vaakasuuntaisia ​​lomakkeita ruudukon avulla lisäämällä .rowluokka lomakeryhmiin ja käyttämällä .col-*-*luokkia tarrojen ja säätimien leveyden määrittämiseen. Muista lisätä .col-form-labelmyös <label>s-kirjaimiin, jotta ne ovat pystysuunnassa keskitettyinä niihin liittyvien lomakesäätimien kanssa.

Joskus saatat joutua käyttämään marginaali- tai täyteapuohjelmia luodaksesi tarvitsemasi täydellisen kohdistuksen. Olemme esimerkiksi poistaneet padding-toppinotuista radiotulojen etiketistä tekstin kohdistamiseksi paremmin.

Radiot
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>

Vaakasuuntainen etiketin koko

Varmista, että käytät tai .col-form-label-sms- tai s-merkkiäsi noudattaaksesi ja kokoa oikein ..col-form-label-lg<label><legend>.form-control-lg.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>

Sarakkeen mitoitus

Kuten edellisissä esimerkeissä näkyy, ruudukkojärjestelmämme avulla voit sijoittaa minkä tahansa määrän .cols:tä .row. Ne jakavat käytettävissä olevan leveyden tasaisesti keskenään. Voit myös valita osan sarakkeistasi viemään enemmän tai vähemmän tilaa, kun taas loput .cols jakavat loput tasaisesti tietyillä sarakeluokilla, kuten .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>

Automaattinen koon määritys

Alla olevassa esimerkissä flexbox-apuohjelma keskittää sisällön pystysuoraan ja muuttaa .colmuotoon .col-autoniin, että sarakkeet vievät vain niin paljon tilaa kuin tarvitaan. Toisin sanoen sarake kokoaa itsensä sisällön perusteella.

@
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>

Voit sitten miksata sen uudelleen kokokohtaisilla sarakeluokilla.

@
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>

Sisäiset lomakkeet

Luo .row-cols-*luokkien avulla reagoivia vaakasuuntaisia ​​asetteluja. Lisäämällä kourujen modifiointiluokkia saamme kourut vaaka- ja pystysuunnassa. Kapeissa mobiilinäkymäporteissa .col-12auttaa pinoamaan lomakeohjaimet ja paljon muuta. Tasaa lomakeelementit .align-items-centerkeskelle, mikä tekee .form-checkkohdistuksen oikein.

@
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>