Nhazi
Nye fọm gị ụfọdụ nhazi—site na inline ruo kehoraizin ruo na mmejuputa grid omenala—nwere nhọrọ nhazi ụdị anyị.
Ụdị
Otu ọ bụla nke ụdị ubi kwesịrị ibi na <form>
mmewere. Bootstrap na-enye ọnweghị styling ndabara maka <form>
mmewere, mana enwere ụfọdụ atụmatụ nchọgharị siri ike nke enyere na ndabara.
- Ọhụrụ n'ụdị ihe nchọgharị? Tụlee ịlele ụdị akwụkwọ MDN maka nchịkọta na ndepụta zuru ezu nke àgwà dịnụ.
<button>
s n'ime<form>
ndabara natype="submit"
, yabụ na-agbalịsi ike ịkọwapụta ma na-agụnye mgbe niiletype
.- Ị nwere ike gbanyụọ mmewere ụdị ọ bụla n'ime ụdị nwere
disabled
njirimara dị na faịlụ<form>
.
Ebe ọ bụ na Bootstrap na-emetụta display: block
yana width: 100%
ihe fọrọ nke nta ka ọ bụrụ njikwa ụdị anyị niile, ụdị ga-abụ na ndabara tojupụtara na kwụ ọtọ. Enwere ike iji klaasị ndị ọzọ gbanwee okirikiri nhọrọ ukwuu n'ụdị n'ụdị.
Ngwa ọrụ
Ngwa oke ala bụ ụzọ kachasị mfe iji tinye usoro ụfọdụ na ụdị. Ha na-enye nchịkọta nke mkpado, njikwa, ederede ụdị nhọrọ, yana ozi nkwado ụdị. Anyị na-akwado ịrapagidesi ike na margin-bottom
akụrụngwa, na iji otu ntụziaka n'ime ụdị ahụ niile maka ịdịgide.
<fieldset>
Na-enwere onwe gị iji s, <div>
s, ma ọ bụ ihe fọrọ nke nta ka ọ bụrụ ihe ọ bụla ọzọ wuo ụdị gị .
<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>
grid ụdị
Enwere ike ịmepụta ụdị mgbagwoju anya karịa site na iji klas grid anyị. Jiri ndị a maka nhazi ụdị nke chọrọ ọtụtụ ogidi, obosara dị iche iche na nhọrọ nhazi agbakwunyere. Chọrọ ka $enable-grid-classes
emee mgbanwe Sass (na ndabara).
<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>
Ọgba mmiri
Site na ịgbakwụnye klaasị modifier gutter , ị nwere ike ịchịkwa obosara gutter yana inline dị ka ụzọ mgbochi. Ọ chọkwara ka $enable-grid-classes
agbanyere mgbanwe Sass (na ndabara).
<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>
Enwere ike ịmepụta nhazi ndị dị mgbagwoju anya site na usoro grid.
<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>
Ụdị kwụ ọtọ
Mepụta ụdị kwụ ọtọ na grid site na ịgbakwunye .row
klaasị iji mepụta otu yana iji .col-*-*
klaasị kọwaa obosara nke akara na njikwa gị. Jide n'aka na ị ga-agbakwunye .col-form-label
na s gị <label>
ka ha wee dabere n'ụzọ kwụ ọtọ na njikwa ụdị ha jikọtara ya.
Mgbe ụfọdụ, ọ ga-adị mkpa ka ị jiri oke ma ọ bụ padding utilities mepụta nhazi ahụ zuru oke nke ịchọrọ. Dịka ọmụmaatụ, anyị ewepụla akara padding-top
ndenye redio anyị ekpokọtara iji kwado usoro ederede nke ọma.
<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>
Nha akara n'ahịrị kwụ ọtọ
Jide n'aka na ị na-eji .col-form-label-sm
ma ọ bụ .col-form-label-lg
na <label>
s ma ọ bụ <legend>
s gị iji soro nha .form-control-lg
na .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>
Nha kọlụm
Dịka egosiri na ọmụmaatụ ndị gara aga, sistemu grid anyị na-enye gị ohere idowe ọnụọgụ .col
s ọ bụla n'ime faịlụ .row
. Ha ga-ekewa obosara dị otu nha n'etiti ha. Ị nwekwara ike ịhọrọ akụkụ nke kọlụm gị ka ị weghara ohere ma ọ bụ dị ntakịrị, ebe ndị fọdụrụ .col
na-ekewa nke ọzọ, yana klas kọlụm dị ka .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>
Nhazi nha akpaaka
Ọmụmaatụ dị n'okpuru na-eji ike flexbox iji kwụ ọtọ n'etiti ọdịnaya wee gbanwee .col
ka .col-auto
ogidi gị wee were naanị ohere ọ bụla achọrọ. N'ikwu ya n'ụzọ ọzọ, kọlụm nha onwe ya dabere na ọdịnaya.
<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>
Ị nwere ike megharịa nke ahụ ọzọ site na iji klaasị kọlụm akọwapụtara nke ọma.
<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>
Ụdị ntanetị
Jiri .row-cols-*
klaasị mepụta okirikiri nhọrọ ukwuu na-anabata. Site n'ịgbakwụnye klaasị modifier gutter , anyị ga-enwe olulu mmiri n'akụkụ kwụ ọtọ na kwụ ọtọ. N'ọdụ ụgbọ mmiri dị warara, ndị na- .col-12
enyere aka ikpokọta njikwa ụdị na ihe ndị ọzọ. The .align-items-center
aligns ụdị ụdị na n'etiti, na-eme ka .form-checkbox
mmezi nke ọma.
<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>