Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
in English

Izkārtojums

Izmantojot mūsu veidlapu izkārtojuma opcijas, piešķiriet savām veidlapām kādu struktūru — no iekļautas līdz horizontālai līdz pielāgotai režģa ieviešanai.

Šajā lapā

Veidlapas

Katrai veidlapas lauku grupai ir jāatrodas <form>elementā. Bootstrap nenodrošina <form>elementa noklusējuma stilu, taču ir dažas jaudīgas pārlūkprogrammas funkcijas, kas tiek nodrošinātas pēc noklusējuma.

  • Vai neesat izmantojis pārlūkprogrammas veidlapas? Apsveriet iespēju pārskatīt MDN veidlapas dokumentus , lai iegūtu pārskatu un pilnu pieejamo atribūtu sarakstu.
  • <button><form>Noklusējuma robežās ir type="submit", tāpēc centieties būt precīzs un vienmēr iekļaujiet type.
  • Varat atspējot katru formas elementu veidlapā, izmantojot disabledatribūtu <form>.

Tā kā Bootstrap tiek lietots display: blockun width: 100%gandrīz visām mūsu veidlapu vadīklām, veidlapas pēc noklusējuma tiks krautas vertikāli. Papildu klases var izmantot, lai mainītu šo izkārtojumu atkarībā no veidlapas.

Komunālie pakalpojumi

Margin utilītas ir vienkāršākais veids, kā veidlapām pievienot kādu struktūru. Tie nodrošina pamata iezīmju grupēšanu, vadīklas, izvēles veidlapas tekstu un veidlapas validācijas ziņojumu. Mēs iesakām pieturēties pie margin-bottomkomunālajiem pakalpojumiem un konsekvences nodrošināšanai visā veidlapā izmantot vienu virzienu.

Jūtieties brīvi veidot savas veidlapas, kā vēlaties, izmantojot <fieldset>s, <div>s vai gandrīz jebkuru citu elementu.

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

Veidlapas režģis

Sarežģītākas formas var izveidot, izmantojot mūsu režģa klases. Izmantojiet tos veidlapu izkārtojumiem, kuriem nepieciešamas vairākas kolonnas, dažādi platumi un papildu līdzināšanas opcijas. Nepieciešams, lai $enable-grid-classesSass mainīgais būtu iespējots (ieslēgts pēc noklusējuma).

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

Notekcaurules

Pievienojot noteku modifikatoru klases , varat kontrolēt notekas platumu, kā arī iekšā un bloka virzienā. Nepieciešams arī $enable-grid-classesiespējot Sass mainīgo (ieslēgts pēc noklusējuma).

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

Ar režģa sistēmu var izveidot arī sarežģītākus izkārtojumus.

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

Horizontālā forma

Izveidojiet horizontālas veidlapas ar režģi, pievienojot .rowklasi grupām un izmantojot .col-*-*klases, lai norādītu iezīmju un vadīklu platumu. Noteikti pievienojiet .col-form-labelarī savas <label>s, lai tās būtu vertikāli centrētas ar tām saistītajām veidlapu vadīklām.

Reizēm jums, iespējams, ir jāizmanto piemaļu vai polsterējuma utilītas, lai izveidotu vajadzīgo perfekto līdzinājumu. Piemēram, mēs esam noņēmušipadding-top no mūsu salikto radio ievades etiķetes, lai labāk saskaņotu teksta bāzes līniju.

Radioaparāti 
<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>

Horizontālās formas etiķetes izmēru noteikšana

Noteikti izmantojiet .col-form-label-smvai .col-form-label-lgsavam <label>s vai s, lai pareizi ievērotu un <legend>izmēru ..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>

Kolonnu izmēra noteikšana

Kā parādīts iepriekšējos piemēros, mūsu režģa sistēma ļauj ievietot jebkuru .cols skaitu .row. Viņi sadalīs pieejamo platumu vienādi. Varat arī izvēlēties sleju apakškopu, lai tā aizņemtu vairāk vai mazāk vietas, bet atlikušās .cols vienādi sadala pārējās, izmantojot noteiktas kolonnu klases, piemēram, .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>

Automātiska izmēra noteikšana

Tālāk sniegtajā piemērā tiek izmantota flexbox utilīta, lai vertikāli centrētu saturu un mainītu tā, .collai .col-autokolonnas aizņemtu tikai tik daudz vietas, cik nepieciešams. Citiem vārdiem sakot, kolonnas izmērs tiek noteikts atkarībā no satura.

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

Pēc tam varat to vēlreiz sajaukt ar lieluma kolonnu klasēm.

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

Iekļautās veidlapas

Izmantojiet .row-cols-*klases, lai izveidotu adaptīvus horizontālus izkārtojumus. Pievienojot noteku modifikatoru klases , mēs iegūsim notekas horizontālā un vertikālā virzienā. Šauros mobilo ierīču skata portos .col-12palīdz salikt veidlapas vadīklas un daudz ko citu. Veidlapas .align-items-centerelementus izlīdzina ar vidu, padarot .form-checkboxlīdzināšanu pareizi.

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