Оформление
Придайте на вашите формуляри някаква структура – от вградени през хоризонтални до персонализирани реализации на мрежата – с нашите опции за оформление на формуляри.
Форми
Всяка група от полета на формуляр трябва да се намира в <form>
елемент. Bootstrap не предоставя стил по подразбиране за <form>
елемента, но има някои мощни функции на браузъра, които се предоставят по подразбиране.
- Нови за формулярите на браузъра? Помислете за преглед на документите на формуляра на MDN за общ преглед и пълен списък на наличните атрибути.
<button>
е в рамките на по<form>
подразбиране доtype="submit"
, така че се стремете да бъдете конкретни и винаги включвайтеtype
.- Можете да деактивирате всеки елемент на формуляр във формуляр с
disabled
атрибута на<form>
.
Тъй като Bootstrap се прилага display: block
към width: 100%
почти всички наши контроли за формуляри, формулярите по подразбиране ще се подреждат вертикално. Допълнителни класове могат да се използват за промяна на това оформление на базата на всеки формуляр.
Помощни програми
Помощните програми за полета са най-лесният начин да добавите известна структура към формулярите. Те осигуряват основно групиране на етикети, контроли, незадължителен текст на формуляр и съобщения за валидиране на формуляр. Препоръчваме да се придържате към margin-bottom
помощните програми и да използвате една посока във формуляра за последователност.
Чувствайте се свободни да създавате формулярите си, както искате, с <fieldset>
s, <div>
s или почти всеки друг елемент.
<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 да бъде активирана (включена по подразбиране).
<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 да бъде активирана (включена по подразбиране).
<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>
s, така че да са вертикално центрирани със свързаните с тях контроли на формуляра.
Понякога може да се наложи да използвате помощни програми за маржове или подложки, за да създадете това перфектно подравняване, от което се нуждаете. Например премахнахме 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>
s или <legend>
s, за да следвате правилно размера на .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
s в рамките на .row
. Те ще разделят наличната ширина поравно между тях. Можете също така да изберете подмножество от вашите колони, които да заемат повече или по-малко място, докато останалите .col
s поравно разделят останалите, със специфични класове колони като .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>
Автоматично оразмеряване
Примерът по-долу използва помощна програма flexbox за вертикално центриране на съдържанието и промени .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-checkbox
подравняването правилно.
<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>