Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
in English

Išdėstymas

Suteikite savo formoms tam tikrą struktūrą – nuo ​​įterptųjų iki horizontalių iki tinkintų tinklelio diegimų – naudodami mūsų formų išdėstymo parinktis.

Šiame puslapyje

Formos

Kiekviena formos laukų grupė turi būti <form>elemente. „Bootstrap“ nenumato numatytojo <form>elemento stiliaus, tačiau yra keletas galingų naršyklės funkcijų, kurios teikiamos pagal numatytuosius nustatymus.

  • Pirmą kartą naudojate naršyklės formas? Apsvarstykite galimybę peržiūrėti MDN formos dokumentus , kad gautumėte apžvalgą ir visą galimų atributų sąrašą.
  • <button>s <form>numatytosios reikšmės ribose type="submit", todėl stenkitės būti konkretūs ir visada įtraukite type.
  • Galite išjungti kiekvieną formos elementą formoje naudodami disabledatributą <form>.

Kadangi „Bootstrap“ taikomas display: blockir width: 100%beveik visiems mūsų formų valdikliams, formos pagal numatytuosius nustatymus bus kaupiamos vertikaliai. Papildomos klasės gali būti naudojamos šiam išdėstymui keisti pagal formą.

Komunalinės paslaugos

Margin utilities yra lengviausias būdas pridėti tam tikrą formų struktūrą. Jie pateikia pagrindinį etikečių grupavimą, valdiklius, pasirenkamą formos tekstą ir formos patvirtinimo pranešimus. Rekomenduojame laikytis margin-bottomkomunalinių paslaugų ir visoje formoje naudoti vieną kryptį, kad būtų nuoseklus.

Nesivaržykite kurti savo formas taip, kaip norite, naudodami <fieldset>s, <div>s ar beveik bet kurį kitą elementą.

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

Formos tinklelis

Naudojant mūsų tinklelio klases, galima sukurti sudėtingesnes formas. Naudokite juos formų išdėstymams, kuriems reikia kelių stulpelių, įvairaus pločio ir papildomų lygiavimo parinkčių. Reikia, kad $enable-grid-classeskintamasis Sass būtų įjungtas (įjungtas pagal numatytuosius nustatymus).

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

Latakai

Pridėję latakų modifikatorių klases galite valdyti latako plotį, taip pat eilutę ir bloko kryptį. Taip pat reikia, $enable-grid-classeskad būtų įjungtas Sass kintamasis (įjungtas pagal numatytuosius nustatymus).

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

Su tinklelio sistema taip pat galima sukurti sudėtingesnius maketus.

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

Horizontali forma

Kurkite horizontalias formas naudodami tinklelį, įtraukdami .rowklasę prie formų grupių ir naudodami .col-*-*klases nurodydami etikečių ir valdiklių plotį. Būtinai pridėkite .col-form-labelir prie savo <label>s, kad jie būtų vertikaliai centre su susijusiais formos valdikliais.

Kartais jums gali tekti naudoti paraščių arba užpildymo priemones, kad sukurtumėte reikiamą tobulą išlygiavimą. Pavyzdžiui, pašalinome padding-topsukrautų radijo įvesties etiketę, kad geriau suderintume pagrindinę teksto liniją.

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

Horizontalios formos etiketės dydis

Būtinai naudokite .col-form-label-smarba .col-form-label-lgprie savo <label>s arba s, kad teisingai laikytumėte ir <legend>dydį ..form-control-lg.form-control-sm

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

Stulpelių dydžio nustatymas

Kaip parodyta ankstesniuose pavyzdžiuose, mūsų tinklelio sistema leidžia įdėti bet kokį skaičių .cols į .row. Galimą plotį jie paskirstys vienodai. Taip pat galite pasirinkti stulpelių poaibį, kuris užimtų daugiau ar mažiau vietos, o likę .cols vienodai padalins likusias dalis su konkrečiomis stulpelių klasėmis, pvz ., .col-sm-7.

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

Automatinis dydžio nustatymas

Toliau pateiktame pavyzdyje naudojama „flexbox“ priemonė, skirta vertikaliai centruoti turinį ir pakeisti .colį .col-autotaip, kad stulpeliai užimtų tik tiek vietos, kiek reikia. Kitaip tariant, stulpelio dydis nustatomas pagal turinį.

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

Tada galėsite tai dar kartą permaišyti naudodami konkretaus dydžio stulpelių klases.

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

Eilutinės formos

Naudokite .row-cols-*klases, kad sukurtumėte interaktyvius horizontalius maketus. Pridėję latakų modifikatorių klases , turėsime latakus horizontalia ir vertikalia kryptimis. Siaurose mobiliosiose peržiūros srityse .col-12padeda sukrauti formos valdiklius ir daugiau. Formos .align-items-centerelementus sulygiuoja su viduriu, todėl .form-checkboxsulygiavimas yra tinkamas.

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