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

Лаиоут

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

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

Формс

Свака група поља обрасца треба да се налази у <form>елементу. Боотстрап не пружа подразумевани стил за <form>елемент, али постоје неке моћне функције претраживача које су подразумевано обезбеђене.

  • Нови сте у обрасцима претраживача? Размислите о прегледу докумената МДН обрасца за преглед и комплетну листу доступних атрибута.
  • <button>с у оквиру <form>подразумеване вредности за type="submit", зато настојте да будете конкретни и увек укључите а type.

Пошто се Боотстрап примењује display: blockи width: 100%на скоро све наше контроле обрасца, обрасци ће се подразумевано слагати вертикално. Додатне класе се могу користити за варирање овог распореда на основу облика.

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

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

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

хтмл 
<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променљива Сасс буде омогућена (подразумевано укључено).

хтмл 
<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променљива Сасс буде омогућена (подразумевано укључена).

хтмл 
<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>

Сложенији распореди се такође могу креирати помоћу система мреже.

хтмл 
<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>с тако да буду вертикално центрирани са припадајућим контролама обрасца.

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

Радио
хтмл 
<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>с или <legend>с да бисте правилно пратили величину .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>

Димензионисање колоне

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

Ауто-димензионирање

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

@
хтмл 
<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>

Затим можете то још једном ремиксовати са класама колона специфичних за величину.

@
хтмл 
<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правилно поравнање.

@
хтмл 
<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>