Зохион байгуулалт
Манай маягтын байршлын сонголтуудын тусламжтайгаар өөрийн маягтуудыг доторлогооноос эхлээд хэвтээ, тусгай сүлжээний хэрэгжүүлэлт хүртэл тодорхой бүтэцтэй болго.
Маягтууд
Маягтын талбарын бүлэг бүр <form>
элемент дотор байх ёстой. Bootstrap нь уг <form>
элементийн өгөгдмөл загварчлалыг өгдөггүй боловч анхдагчаар хангагдсан хөтөчийн хүчирхэг функцууд байдаг.
- Хөтөч маягтыг шинээр ашиглаж байна уу? Боломжтой шинж чанаруудын тойм болон бүрэн жагсаалтыг авахын тулд MDN маягтын баримт бичгүүдийг шалгаж үзээрэй .
<button>
s нь<form>
өгөгдмөл -ийн дотор байгааtype="submit"
тул тодорхой байхыг хичээж, үргэлжtype
.disabled
Та форм дээрх атрибут бүхий маягтын элемент бүрийг идэвхгүй болгож болно<form>
.
Bootstrap нь манай бараг бүх маягтын удирдлагад хэрэгждэг display: block
тул width: 100%
маягтууд нь анхдагчаар босоо байдлаар стек болно. Энэ байрлалыг хэлбэр тус бүрээр нь өөрчлөхийн тулд нэмэлт ангиудыг ашиглаж болно.
Хэрэглээ
Margin хэрэгслүүд нь маягтанд зарим бүтэц нэмэх хамгийн хялбар арга юм. Эдгээр нь шошго, хяналт, нэмэлт хэлбэрийн текст, маягтын баталгаажуулалтын мессежийн үндсэн бүлэглэлийг хангадаг. Тохиромжтой байлгахын тулд бид хэрэгслүүдийг дагаж мөрдөхийг зөвлөж байна 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>
Маягтын сүлжээ
Манай тор ангиудыг ашиглан илүү төвөгтэй хэлбэрүүдийг барьж болно. Эдгээрийг олон багана, янз бүрийн өргөн, нэмэлт зэрэгцүүлэх сонголтуудыг шаарддаг маягтын байршилд ашиглаарай. Sass хувьсагчийг идэвхжүүлэхийг шаарддаг$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
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
ашиглан сүлжээгээр хэвтээ маягтуудыг үүсгээрэй . Өөрийн s-г мөн холбогдох маягтын удирдлагатай нь босоо байдлаар төвлөрүүлэхээ .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>
s эсвэл s- г ашиглахаа мартуузай .<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
дотор ямар ч тооны s -г байрлуулах боломжийг олгодог .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>
Автомат хэмжээ
Доорх жишээнд агуулгыг босоо байдлаар голлуулахын тулд 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>
Inline маягтууд
.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>