Прескокнете до главната содржина Прескокнете до навигацијата со документи
Check
in English

Распоред

Дајте им на вашите формулари одредена структура - од вградени до хоризонтални до приспособени имплементации на мрежа - со нашите опции за распоред на формулари.

На оваа страница

Форми

Секоја група полиња за форма треба да се наоѓа во <form>елемент. Bootstrap не обезбедува стандарден стајлинг за <form>елементот, но има некои моќни функции на прелистувачот кои се стандардно обезбедени.

  • Ново во формуларите на прелистувачот? Размислете за прегледување на документите од формуларот MDN за преглед и комплетна листа на достапни атрибути.
  • <button>s во рамките на <form>стандардно до type="submit", затоа настојувајте да бидете конкретни и секогаш да вклучите type.

Бидејќи Bootstrap се применува display: blockи width: 100%на речиси сите наши контроли за форма, формуларите стандардно ќе се редат вертикално. Дополнителни класи може да се користат за да се менува овој распоред врз основа на секоја форма.

Комунални услуги

Услужните програми за маргина се најлесниот начин да се додаде одредена структура на формуларите. Тие обезбедуваат основно групирање на етикети, контроли, изборен текст на формулари и пораки за валидација на формулари. Препорачуваме да се придржувате до margin-bottomкомуналните услуги и да користите една насока низ формуларот за конзистентност.

Слободно креирајте ги вашите форми како што сакате, со <fieldset>s, <div>s или речиси кој било друг елемент.

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>

Формирајте мрежа

Покомплексни форми може да се изградат со користење на нашите мрежни класи. Користете ги овие за распоред на форми кои бараат повеќе колони, различни ширини и дополнителни опции за порамнување. Бара $enable-grid-classesпроменливата Sass да биде овозможена (стандардно вклучена).

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>

Олуци

Со додавање на класи на модификатори на олукот , можете да имате контрола врз ширината на олукот, како и во линијата и насоката на блокот. Исто така, бара $enable-grid-classesпроменливата Sass да биде овозможена (стандардно вклучена).

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>

Покомплексни распореди може да се креираат и со системот на мрежа.

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>

Хоризонтална форма

Креирајте хоризонтални форми со мрежата со додавање на .rowкласата за да формирате групи и користејќи ги .col-*-*класите за да ја одредите ширината на вашите етикети и контроли. Погрижете се да додадете .col-form-labelи во вашите <label>s, така што тие се вертикално центрирани со нивните поврзани контроли за форма.

Понекогаш, можеби ќе треба да користите алатки за маргина или полнење за да го создадете совршеното усогласување што ви треба. На пример, ја отстранивме padding-topетикетата на нашите наредени радио влезови за подобро да ја усогласиме основната линија на текстот.

Радија
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>

Хоризонтална форма на големината на етикетата

Уверете се дека користите .col-form-label-smили .col-form-label-lgна вашите <label>s или <legend>s за правилно следење на големината на .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>

Димензионирање на колоната

Како што е прикажано во претходните примери, нашиот мрежен систем ви овозможува да поставите кој било број на .cols во .row. Тие ќе ја поделат достапната ширина подеднакво меѓу нив. Можете исто така да изберете подмножество од вашите колони за да заземаат повеќе или помалку простор, додека останатите .colподеднакво го делат остатокот, со специфични класи на колони како .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>

Автоматско димензионирање

Примерот подолу користи алатка flexbox за вертикално центрирање на содржината и менување .colна .col-autoтака што вашите колони заземаат простор само колку што е потребно. На друг начин, колоната сама се мери според содржината.

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

Потоа можете да го ремиксирате тоа уште еднаш со класи на колони специфични за големината.

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

Вградени форми

Користете ги .row-cols-*класите за да креирате одговорни хоризонтални распореди. Со додавање на класи на модификатори на олуци, ќе имаме олуци во хоризонтални и вертикални насоки. На тесните пристаништа за гледање на мобилните, .col-12помага да се сместат контролите на формата и многу повеќе. Ги .align-items-centerпорамнува елементите на формата до средината, правејќи го .form-checkпорамнувањето правилно.

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