नक्शा
अपन फॉर्म कें किछु संरचना दिअ-इनलाइन सं ल क क्षैतिज सं ल क कस्टम ग्रिड कार्यान्वयन-हमर फॉर्म लेआउट विकल्पक कें साथ.
रूप
रूप क्षेत्रक प्रत्येक समूह एकटा <form>
तत्व मे निवास करबाक चाही। बूटस्ट्रैप तत्व कें लेल कोनों डिफ़ॉल्ट स्टाइलिंग नहि प्रदान करयत छै <form>
, मुदा किछ शक्तिशाली ब्राउज़र सुविधा छै जे डिफ़ॉल्ट रूप सं उपलब्ध करायल गेल छै.
- ब्राउज़र फॉर्म मे नव? उपलब्ध विशेषताक कें अवलोकन आ पूरा सूची कें लेल एमडीएन फॉर्म डॉक्स कें समीक्षा करय पर विचार करूं .
<button>
<form>
s एकटा डिफ़ॉल्ट के भीतरtype="submit"
, अतः विशिष्ट बनबाक प्रयास करू आ सदिखन एकटा शामिल करूtype
.
चूँकि बूटस्ट्रैप लागू होय छै 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>
फॉर्म ग्रिड
हमर ग्रिड क्लास कें उपयोग करयत बेसि जटिल फॉर्म बनायल जा सकय छै. फॉर्म लेआउट कें लेल एकर उपयोग करूं जइ मे अनेक कॉलम, विविध चौड़ाई, आ अतिरिक्त संरेखण विकल्पक कें आवश्यकता होयत छै. 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>
गटर
By adding gutter modifier classes , आप गटर चौड़ाई पर नियंत्रण रख सकते हैं के साथ-साथ इनलाइन के रूप में ब्लॉक दिशा. साथ ही $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>
क्षैतिज रूप लेबल आकार
कें आकार कें सही ढंग सं पालन करय कें लेल या अपन s या .col-form-label-sm
s कें उपयोग करनाय सुनिश्चित करूं ..col-form-label-lg
<label>
<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
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>
ऑटो-साइजिंग
नीचा देल गेल उदाहरण सामग्री कें लंबवत केंद्रित करय कें लेल एकटा फ्लेक्सबॉक्स उपयोगिता कें उपयोग करय छै आ बदलय .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-check
सही ढंग स॑ संरेखित करलऽ जाय छै ।
<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>