fisehon'ny
Omeo rafitra sasany ny endrikao — manomboka amin'ny andalana mankany amin'ny marindrano mankany amin'ny fampiharana ny tsipika mahazatra—miaraka amin'ireo safidy fandrafetana endrika.
teny
Tokony hipetraka amin'ny <form>
singa iray ny vondron'ny saha rehetra. Ny Bootstrap dia tsy manome styling default ho an'ny <form>
singa, fa misy endri-tsarimihetsika mahery vaika nomen'ny default.
- Vaovao amin'ny endrika navigateur? Diniho ny famerenana ny antontan-taratasin'ny MDN ho an'ny topimaso sy lisitra feno amin'ny toetra misy.
<button>
s ao anaty<form>
default amin'nytype="submit"
, koa miezaha manokana ary ampidiro foana nytype
.- Azonao atao ny manafoana ny singa endrika rehetra ao anatin'ny endrika iray misy ny
disabled
toetra ao amin'ny<form>
.
Koa satria mihatra ny Bootstrap display: block
ary width: 100%
saika amin'ny fanaraha-maso ny endrika rehetra, dia mitsangana mitsangana ny endrika. Ny kilasy fanampiny dia azo ampiasaina hanovana an'io lamina io amin'ny endrika isan-karazany.
Asa vaventy
Ny fampiasa amin'ny sisiny no fomba mora indrindra hanampiana rafitra sasany amin'ny endrika. Izy ireo dia manome vondrona fototra amin'ny etikety, fanaraha-maso, lahatsoratra amin'ny endrika tsy voatery, ary hafatra fanamarinana endrika. Manoro hevitra izahay ny hifikitra amin'ny margin-bottom
fitaovana ampiasaina, ary mampiasa torolalana tokana manerana ny endrika mba tsy miovaova.
Aza misalasala manangana ny endrikao araka izay tianao, miaraka amin'ny <fieldset>
s, <div>
s, na saika singa hafa.
<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>
Form grid
Ny endrika sarotra kokoa dia azo amboarina amin'ny alàlan'ny kilasin'ny grid. Ampiasao ireo ho an'ny famolavolana endrika izay mitaky tsanganana maro, sakany isan-karazany ary safidy fampifanarahana fanampiny. Mitaky ny $enable-grid-classes
fari-piadidiana Sass mba ho alefa (efa mandeha amin'ny alàlan'ny default).
<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>
tatatra
Amin'ny fampidirana kilasy modifier tatatra , azonao atao ny mifehy ny sakan'ny tatatra ao anatiny ary koa ny inline toy ny lalana sakana. Mitaky koa ny $enable-grid-classes
fari-pahaizan'ny Sass ho alefa (efa mandeha ho azy).
<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>
Azo amboarina miaraka amin'ny rafitra grid ihany koa ny fandrafetana sarotra kokoa.
<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>
endrika marindrano
Mamorona endrika marindrano miaraka amin'ny grid amin'ny alàlan'ny fampidirana ny .row
kilasy hamorona vondrona ary ampiasao ireo .col-*-*
kilasy mba hamaritana ny sakan'ny marika sy ny fanaraha-maso. Ataovy azo antoka ny manampy .col-form-label
ny <label>
s anao koa mba hiorenan'izy ireo mitsangana miaraka amin'ny fanaraha-maso ny endrika mifandray aminy.
Indraindray, mety mila mampiasa margin na fitaovana padding ianao mba hamoronana ny fampifanarahana tonga lafatra ilainao. Ohatra, nesorinay ny padding-top
mari-pamantarana fampidiran-dresaka amin'ny onjam-peo mba hampifanaraka tsara ny tsipika fototra.
<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>
Famaritana ny mari-pamantarana endrika marindrano
Aza hadino ny mampiasa .col-form-label-sm
na .col-form-label-lg
amin'ny <label>
s na ny anao <legend>
mba hanaraka tsara ny haben'ny .form-control-lg
sy .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>
Fametrahana tsanganana
Araka ny aseho amin'ny ohatra teo aloha, ny rafitra grid dia ahafahanao mametraka isa maromaro .col
ao anaty .row
. Hozarainy mitovy amin'izy ireo ny sakany misy. Azonao atao ihany koa ny misafidy ny ampahany amin'ny tsangananao mba haka toerana bebe kokoa na latsaka, fa ny ambiny kosa .col
dia mizara ny ambiny, miaraka amin'ny kilasy tsanganana manokana toy ny .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>
Auto-sizing
Ny ohatra eto ambany dia mampiasa fampiasa flexbox mba hampifantohana mitsangana ny atiny sy hanova .col
azy .col-auto
mba tsy haka toerana betsaka araka izay ilaina ihany ny tsangananao. Raha lazaina amin'ny teny hafa, ny haben'ny tsanganana dia miankina amin'ny atiny.
<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>
Azonao atao ny mampifangaro izany indray miaraka amin'ny kilasy tsanganana voafaritra habe.
<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>
Endrika an-tsoratra
Ampiasao ireo .row-cols-*
kilasy mba hamoronana fisehon'ny marindrano mamaly. Amin'ny fampidirana kilasy modifier tatatra , dia hanana tatatra mitsivalana sy mitsangana isika. Amin'ny toerana fijerena finday tery, ny .col-12
fanampiana amin'ny fametrahana ny fanaraha-maso ny endrika sy ny maro hafa. Mampifanitsy amin'ny .align-items-center
afovoany ireo singa endrika, manao ny .form-checkbox
fampifanarahana tsara.
<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>