ڕیزبەست
هەندێک پێکهاتە بدە بە فۆڕمەکانت- لە ناو هێڵەوە تا ئاسۆیی تا جێبەجێکردنی تۆڕی تایبەت- لەگەڵ هەڵبژاردەکانی نەخشەی فۆڕمەکانمان.
فۆڕمەکان
هەموو گروپێک لە بواری فۆرمەکان دەبێت لە توخمێکدا نیشتەجێ بن <form>
. Bootstrap هیچ ستایلێکی پێشوەختە بۆ <form>
توخمەکە دابین ناکات، بەڵام هەندێک تایبەتمەندی بەهێزی وێبگەڕ هەیە کە بە شێوەی پێشوەختە دابین کراوە.
- تازە لە فۆڕمی وێبگەڕەکان؟ بیر لە پێداچوونەوە بە دۆکیومێنتەکانی فۆڕمی MDN بکەرەوە بۆ تێڕوانینێکی گشتی و لیستی تەواوی تایبەتمەندییە بەردەستەکان.
<button>
s لەناو<form>
پێشوەختەدا بۆtype="submit"
, بۆیە هەوڵبدە تایبەت بیت و هەمیشە atype
.- دەتوانیت هەموو توخمێکی فۆڕم لەناو فۆڕمێکدا بە
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
بۆ s ـەکەت <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 یان <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 لەناو a .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
یارمەتی کۆکردنەوەی کۆنتڕۆڵەکانی فۆڕم و زۆر شتی تر دەدات. The .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>