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

Оформление

Придайте на вашите формуляри някаква структура – ​​от вградени през хоризонтални до персонализирани реализации на мрежата – с нашите опции за оформление на формуляри.

На тази страница

Форми

Всяка група от полета на формуляр трябва да се намира в <form>елемент. Bootstrap не предоставя стил по подразбиране за <form>елемента, но има някои мощни функции на браузъра, които се предоставят по подразбиране.

  • Нови за формулярите на браузъра? Помислете за преглед на документите на формуляра на MDN за общ преглед и пълен списък на наличните атрибути.
  • <button>е в рамките на по <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. Те ще разделят наличната ширина поравно между тях. Можете също така да изберете подмножество от вашите колони, които да заемат повече или по-малко място, докато останалите .cols поравно разделят останалите, със специфични класове колони като .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>