फॉर्म कंट्रोल स्टाइल, लेआउट विकल्प, आ बिसाल किसिम के फॉर्म बनावे खातिर कस्टम कंपोनेंट सभ खातिर उदाहरण आ इस्तेमाल के गाइडलाइन।
अवलोकन कइल जाव
बूटस्ट्रैप के फॉर्म कंट्रोल क्लास के साथ हमनी के रिबूट फॉर्म स्टाइल पर विस्तार करेला। ब्राउजर आ डिवाइस सभ में अउरी सुसंगत रेंडरिंग खातिर इनहन के कस्टमाइज्ड डिस्प्ले सभ में ऑप्ट करे खातिर एह क्लास सभ के इस्तेमाल करीं।
ईमेल सत्यापन, नंबर चयन आ अउरी कई गो नया इनपुट नियंत्रण सभ के फायदा उठावे खातिर typeसभ इनपुट सभ पर (जइसे कि emailईमेल पता खातिर या संख्यात्मक जानकारी खातिर) कौनों उपयुक्त बिसेसता के इस्तेमाल जरूर करीं ।number
बूटस्ट्रैप के फॉर्म स्टाइल के देखावे खातिर एगो त्वरित उदाहरण दिहल जा रहल बा। जरूरी कक्षा सभ पर दस्तावेजीकरण, फार्म लेआउट, आ अउरी बहुत कुछ खातिर पढ़त रहीं।
फार्म कंट्रोल करेला
पाठ रूप नियंत्रण-जइसे कि <input>s, <select>s, आ s- वर्ग <textarea>के साथ स्टाइल कइल जाला । .form-controlसामान्य रूप, फोकस स्टेट, साइजिंग, आ अउरी बहुत कुछ खातिर स्टाइल सभ के सामिल कइल गइल बा।
आगे शैली एस के लिए हमनी के कस्टम फॉर्म के खोज जरूर करीं ।<select>
फाइल इनपुट खातिर, खातिर के स्वैप .form-controlकरीं .form-control-file।
साइजिंग के बा
.form-control-lgआ जइसन क्लास के इस्तेमाल से ऊंचाई सेट करीं .form-control-sm.
खाली पढ़े खातिर बा
readonlyइनपुट के मान में संशोधन के रोके खातिर कवनो इनपुट पर बूलियन विशेषता जोड़ल जाला। खाली पढ़े खातिर इनपुट हल्का लउके ला (बिल्कुल अक्षम इनपुट नियर), बाकी मानक कर्सर के बरकरार रखे ला।
खाली पढ़े खातिर सादा पाठ बा
अगर रउआँ <input readonly>अपना फॉर्म में तत्व सभ के सादा पाठ के रूप में स्टाइल कइल चाहत बानी, .form-control-plaintextडिफ़ॉल्ट फॉर्म फील्ड स्टाइलिंग के हटावे खातिर आ सही मार्जिन आ पैडिंग के संरक्षित करे खातिर क्लास के इस्तेमाल करीं।
रेंज इनपुट के बा
के उपयोग करके क्षैतिज रूप से स्क्रॉल करे लायक रेंज इनपुट सेट करीं .form-control-range।
चेकबॉक्स आ रेडियो के बारे में बतावल गइल बा
डिफ़ॉल्ट चेकबॉक्स आ रेडियो के मदद से सुधारल जाला .form-check, दुनो इनपुट प्रकार खातिर एगो एकल क्लास जवन ओह लोग के एचटीएमएल तत्वन के लेआउट आ व्यवहार में सुधार करेला . चेकबॉक्स कौनों लिस्ट में एक या कई गो विकल्प चुने खातिर होला जबकि रेडियो कई में से एक विकल्प चुने खातिर होला।
अक्षम चेकबॉक्स आ रेडियो के समर्थन कइल गइल बा. disabledएट्रिब्यूट हल्का रंग लागू करी जे इनपुट के स्थिति के बतावे में मदद करी ।
चेकबॉक्स आ रेडियो बटन एचटीएमएल आधारित फॉर्म सत्यापन के सपोर्ट करे लें आ संक्षिप्त, सुलभ लेबल उपलब्ध करावे लें। अइसे, हमनी <input>के s आ s एगो के भीतर एगो <label>के विपरीत भाई-बहिन के तत्व हवें । ई तनी अधिका वर्बोज बा काहे कि रउरा आ के संबंधित करे खातिर आ विशेषता निर्दिष्ट करे के पड़ी .<input><label>idfor<input><label>
डिफ़ॉल्ट (ढेर हो गइल) .
डिफ़ॉल्ट रूप से, कवनो संख्या में चेकबॉक्स आ रेडियो जवन तत्काल भाई-बहिन के होखे, ऊर्ध्वाधर ढेर होखी आ उचित रूप से .form-check.
इनलाइन के बा
.form-check-inlineकवनो में जोड़ के एकही क्षैतिज पंक्ति पर चेकबॉक्स भा रेडियो के समूह करीं .form-check.
बिना लेबल के बा
.position-staticओह भीतर इनपुट में जोड़ीं .form-checkजवना में कवनो लेबल टेक्स्ट ना होखे. याद रखीं कि अबहियों सहायक तकनीक सभ खातिर कौनों ना कौनों रूप में लेबल उपलब्ध करावल जाय (उदाहरण खातिर, इस्तेमाल कइल aria-label)।
खाका
चूँकि बूटस्ट्रैप लागू होला display: blockआ width: 100%हमनी के लगभग सभ फॉर्म कंट्रोल पर, फॉर्म डिफ़ॉल्ट रूप से लंबवत ढेर हो जाई। प्रति-फॉर्म आधार पर एह लेआउट में बदलाव करे खातिर अतिरिक्त क्लास सभ के इस्तेमाल कइल जा सके ला।
समूह बनावे के बा
.form-groupफार्म में कुछ संरचना जोड़े के सबसे आसान तरीका क्लास ह । ई एगो लचीला क्लास उपलब्ध करावे ला जे लेबल, नियंत्रण, वैकल्पिक हेल्प टेक्स्ट, आ फॉर्म वैलिडेशन मैसेजिंग के सही समूहीकरण के प्रोत्साहित करे ला। डिफ़ॉल्ट रूप से ई खाली लागू होला margin-bottom, बाकी जरूरत के हिसाब से ई अतिरिक्त शैली सभ .form-inlineके उठावे ला। एकर प्रयोग <fieldset>s, <div>s, भा लगभग कवनो अउरी तत्व के साथे करीं।
फार्म ग्रिड के बा
हमनी के ग्रिड क्लास के इस्तेमाल से अउरी जटिल फॉर्म बनावल जा सकेला। इनहन के इस्तेमाल फार्म लेआउट सभ खातिर करीं जेह में कई गो कॉलम, बिबिध चौड़ाई, आ अतिरिक्त संरेखण विकल्प सभ के जरूरत होखे।
फार्म पंक्ति के बा
रउआँ , .rowखातिर भी स्वैप कर सकत बानी .form-row, हमनी के मानक ग्रिड पंक्ति के एगो भिन्नता जे टाइट आ अउरी कॉम्पैक्ट लेआउट खातिर डिफ़ॉल्ट कॉलम गटर सभ के ओवरराइड करे ला।
ग्रिड सिस्टम के साथ अउरी जटिल लेआउट भी बनावल जा सके ला।
क्षैतिज रूप के बा
.rowसमूह के रूप में क्लास जोड़ के आ .col-*-*अपना लेबल आ नियंत्रण सभ के चौड़ाई निर्दिष्ट करे खातिर क्लास सभ के इस्तेमाल क के ग्रिड के साथ क्षैतिज रूप बनाईं । .col-form-labelअपना s में भी जोड़ल जरूर करीं <label>ताकि ऊ लोग अपना संबद्ध फॉर्म नियंत्रण के साथ लंबवत केंद्रित होखे।
कई बेर, रउआँ के शायद मार्जिन भा पैडिंग उपयोगिता सभ के इस्तेमाल करे के जरूरत पड़े ला ताकि रउआँ के जरूरत के ऊ सही संरेखण बनावल जा सके। उदाहरण खातिर, हमनी के padding-topअपना ढेर रेडियो इनपुट लेबल पर हटा दिहले बानी जा ताकि पाठ बेसलाइन के बेहतर तरीका से संरेखित कइल जा सके।
क्षैतिज रूप लेबल के आकार देवे के बा
के आकार के सही तरीका से पालन करे खातिर या अपना s या s .col-form-label-smके .col-form-label-lgइस्तेमाल <label>जरूर करीं आ .<legend>.form-control-lg.form-control-sm
कॉलम के साइजिंग के बारे में बतावल गइल बा
जइसन कि पिछला उदाहरणन में देखावल गइल बा, हमनी के ग्रिड सिस्टम रउआ के कवनो संख्या में s के एगो या .colके भीतर रखे के अनुमति देला । उ लोग उपलब्ध चौड़ाई के अपना बीच बराबर बांट दिहे। आप कम-बेसी जगह लेवे खातिर अपना कॉलम सभ के एगो सबसेट भी चुन सकत बानी, जबकि बाकी s बाकी के बराबर बिभाजित क देला, बिसेस कॉलम क्लास सभ के साथ जइसे कि ..row.form-row.col.col-7
ऑटो-साइजिंग के बा
नीचे दिहल उदाहरण में सामग्री के लंबवत केंद्रित करे खातिर फ्लेक्सबॉक्स यूटिलिटी के इस्तेमाल कइल गइल बा आ एह में बदलाव .colकइल गइल .col-autoबा कि राउर कॉलम खाली जरूरत के हिसाब से जगह ले लेव. दोसरा तरह से कहल जाव त कॉलम सामग्री के आधार पर खुद के आकार देला.
एकरा बाद रउआँ ओह के एक बेर फिर से साइज-विशिष्ट कॉलम क्लास सभ के साथ रिमिक्स क सकत बानी।
.form-inlineएकही क्षैतिज पंक्ति पर लेबल, फॉर्म कंट्रोल, आ बटन सभ के एगो श्रृंखला देखावे खातिर क्लास के इस्तेमाल करीं । इनलाइन फॉर्म सभ के भीतर फॉर्म कंट्रोल सभ में इनहन के डिफ़ॉल्ट स्टेट से कुछ अंतर होला।
नियंत्रण बा display: flex, कवनो भी एचटीएमएल सफेद स्पेस के संकुचित क के स्पेसिंग आ फ्लेक्सबॉक्स उपयोगिता के साथ संरेखण नियंत्रण प्रदान करे के अनुमति देला।
नियंत्रण आ इनपुट समूह width: autoबूटस्ट्रैप डिफ़ॉल्ट के ओवरराइड करे खातिर प्राप्त करेला width: 100%.
कंट्रोल खाली ओह व्यूपोर्ट सभ में इनलाइन लउके लें जे कम से कम 576px चौड़ाई वाला होखे लें ताकि मोबाइल डिवाइस सभ पर संकरी व्यूपोर्ट सभ के हिसाब दिहल जा सके।
रउआँ के स्पेसिंग उपयोगिता सभ के साथ अलग-अलग फॉर्म नियंत्रण सभ के चौड़ाई आ संरेखण के मैन्युअल रूप से संबोधित करे के जरूरत पड़ सके ला (जइसे कि नीचे देखावल गइल बा)। अंत में, <label>हर फॉर्म कंट्रोल के संगे हमेशा एगो जरूर शामिल करीं, भले ही आपके एकरा के गैर-स्क्रीनरीडर विजिटर से छिपावे के जरूरत होखे .sr-only।
कस्टम फॉर्म कंट्रोल आ सिलेक्ट के भी समर्थन कइल जाला।
छिपल लेबल के विकल्प
स्क्रीन रीडर जइसन सहायक तकनीक के रउरा फार्म में परेशानी होखी अगर रउरा हर इनपुट खातिर लेबल ना डालब. .sr-onlyएह इनलाइन फॉर्म सभ खातिर, रउआँ क्लास के इस्तेमाल से लेबल सभ के छिपा सकत बानी । सहायक टेक्नालॉजी सभ खातिर लेबल उपलब्ध करावे के अउरी वैकल्पिक तरीका बाड़ें, जइसे कि aria-label, aria-labelledbyया titleएट्रिब्यूट। अगर एह में से कौनों भी मौजूद ना होखे तब सहायक टेक्नालॉजी सभ एह placeholderबिसेसता के इस्तेमाल के सहारा ले सके लीं, अगर मौजूद होखे, बाकी धियान दीं कि placeholderअन्य लेबलिंग तरीका सभ के जगह के रूप में इस्तेमाल करे के सलाह ना दिहल जाला।
मदद पाठ के बारे में बतावल गइल बा
फॉर्म सभ में ब्लॉक-स्तर के मदद टेक्स्ट के इस्तेमाल से बनावल जा सके ला .form-text(पहिले .help-blockv3 में के रूप में जानल जाला)। इनलाइन मदद पाठ के कवनो भी इनलाइन एचटीएमएल तत्व आ उपयोगिता वर्ग जइसे कि .text-muted.
फॉर्म नियंत्रण के साथ मदद पाठ के जोड़ल
मदद पाठ के स्पष्ट रूप से ओह फॉर्म नियंत्रण से जुड़ल होखे के चाहीं जवन ई aria-describedbyविशेषता के इस्तेमाल से संबंधित बा। एह से ई सुनिश्चित होखी कि सहायक टेक्नोलॉजी सभ-जइसे कि स्क्रीन रीडर-जब यूजर फोकस करीहें या कंट्रोल में प्रवेश करीहें तब एह मदद टेक्स्ट के घोषणा करीहें।
इनपुट के नीचे मदद पाठ के साथ स्टाइल कइल जा सकेला .form-text। एह क्लास में display: blockऊपर दिहल इनपुट सभ से आसान स्पेसिंग खातिर कुछ टॉप मार्जिन शामिल बा आ जोड़ल गइल बा।
राउर पासवर्ड 8-20 अक्षर के होखे के चाहीं, अक्षर आ नंबर होखे के चाहीं, आ स्पेस, खास अक्षर, भा इमोजी ना होखे के चाहीं.
इनलाइन टेक्स्ट कौनों भी बिसेस इनलाइन एचटीएमएल तत्व (चाहे ऊ <small>, <span>, या कुछ अउरी) के इस्तेमाल क सके ला जेह में यूटिलिटी क्लास से ढेर कुछ ना होखे।
विकलांग लोग के फार्म बा
कौनों इनपुट पर बूलियन एट्रिब्यूट जोड़ल disabledजाय ताकि यूजर इंटरैक्शन के रोकल जा सके आ एकरा के हल्का लउके।
भीतर के सभ नियंत्रण के अक्षम करे खातिर disabledविशेषता के a में जोड़ीं ।<fieldset>
लंगर के साथे चेतावनी दिहल जाव
डिफ़ॉल्ट रूप से, ब्राउजर सभ a के अंदर के सगरी नेटिव फॉर्म कंट्रोल ( <input>, <select>आ तत्व) सभ के अक्षम मान लीहें, एह से कीबोर्ड आ माउस दुनों के इनहन पर इंटरैक्शन ना हो पाई। हालाँकि, अगर राउर रूप में तत्व भी शामिल बा, एह सभ के खाली , के शैली दिहल जाई । जइसे कि बटन सभ खातिर अक्षम स्थिति के बारे में खंड में नोट कइल गइल बा (आ खासतौर पर एंकर तत्व सभ खातिर उप-खंड में), ई CSS गुण अबहिन ले मानकीकरण नइखे भइल आ इंटरनेट एक्सप्लोरर 10 में पूरा तरीका से सपोर्ट नइखे कइल गइल, आ कीबोर्ड प्रयोगकर्ता लोग के होखे से ना रोकी एह लिंकन के फोकस भा सक्रिय करे में सक्षम बा. त सुरक्षित रहे खातिर अइसन लिंक के अक्षम करे खातिर कस्टम जावास्क्रिप्ट के इस्तेमाल करीं.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none
क्रॉस-ब्राउजर के संगतता बा
जबकि बूटस्ट्रैप सभ ब्राउजर में एह स्टाइल सभ के लागू करी, इंटरनेट एक्सप्लोरर 11 आ नीचे के disabledएगो पर एट्रिब्यूट के पूरा तरीका से सपोर्ट ना करे ला <fieldset>। एह ब्राउजर सभ में फील्डसेट के अक्षम करे खातिर कस्टम जावास्क्रिप्ट के इस्तेमाल करीं।
मान्यता दिहल गइल बा
HTML5 फॉर्म सत्यापन के साथ अपना उपयोगकर्ता लोग के मूल्यवान, कार्रवाई करे लायक प्रतिक्रिया प्रदान करीं– हमनी के सभ समर्थित ब्राउजर में उपलब्ध बा . ब्राउजर डिफ़ॉल्ट सत्यापन प्रतिक्रिया से चुनीं, या हमनी के बिल्ट-इन क्लास आ स्टार्टर जावास्क्रिप्ट के साथ कस्टम संदेश लागू करीं।
हमनी के वर्तमान में कस्टम वैलिडेशन स्टाइल के इस्तेमाल करे के सलाह देत बानी जा, काहें से कि नेटिव ब्राउजर डिफ़ॉल्ट वैलिडेशन संदेश सभ ब्राउजर सभ में लगातार सहायक टेक्नोलॉजी सभ के सामना ना करे लें (सबसे खास रूप से, डेस्कटॉप आ मोबाइल पर क्रोम)।
कइसे काम करेला
इहाँ बतावल गइल बा कि बूटस्ट्रैप के साथ फॉर्म वैलिडेशन कइसे काम करे ला:
एचटीएमएल फॉर्म सत्यापन CSS के दू गो छद्म-वर्ग के माध्यम से लागू कइल जाला, :invalidआ :valid. ई <input>, <select>, आ <textarea>तत्वन पर लागू होला।
बूटस्ट्रैप :invalidआ :validशैली सभ के पैरेंट .was-validatedक्लास के दायरा देला, आमतौर पर <form>. ना त बिना मान के कौनों भी जरूरी फील्ड पन्ना लोड पर अमान्य के रूप में देखावल जाई। एह तरीका से, रउआँ ई चुन सकत बानी कि कब इनहन के सक्रिय कइल जाय (आमतौर पर फार्म जमा करे के कोसिस कइला के बाद)।
फार्म के रूप के रीसेट करे खातिर (उदाहरण खातिर, AJAX के इस्तेमाल से डायनामिक फॉर्म सबमिशन के मामला में), सबमिशन के बाद फिर .was-validatedसे क्लास के हटाईं।<form>
फॉलबैक के रूप में, .is-invalidआ सर्वर साइड सत्यापन.is-valid खातिर छद्म-वर्ग के जगह क्लास सभ के इस्तेमाल कइल जा सके ला । ओह लोग के अभिभावक वर्ग के जरूरत नइखे ..was-validated
<label>CSS के काम करे के तरीका में बाधा के कारण, हमनी के (वर्तमान में) कस्टम जावास्क्रिप्ट के मदद के बिना DOM में एगो फॉर्म कंट्रोल से पहिले आवे वाला एगो पर स्टाइल लागू नइखीं कर सकत ।
सभ आधुनिक ब्राउजर सभ बाधा सत्यापन एपीआई के सपोर्ट करे लें , ई फॉर्म नियंत्रण सभ के मान्यता देवे खातिर जावास्क्रिप्ट तरीका सभ के एगो श्रृंखला हवे।
फीडबैक संदेश सभ में ब्राउजर डिफ़ॉल्ट (हर ब्राउजर खातिर अलग-अलग, आ CSS के माध्यम से अनस्टाइल करे लायक) या हमनी के कस्टम फीडबैक स्टाइल सभ के इस्तेमाल हो सके ला जेह में अतिरिक्त HTML आ CSS होखे।
रउआँ setCustomValidityजावास्क्रिप्ट में के साथ कस्टम वैधता संदेश दे सकत बानी।
एकरा के ध्यान में राखत, हमनी के कस्टम फॉर्म वैलिडेशन स्टाइल, वैकल्पिक सर्वर साइड क्लास, आ ब्राउजर डिफ़ॉल्ट खातिर निम्नलिखित डेमो पर विचार करीं।
कस्टम स्टाइल के बा
कस्टम बूटस्ट्रैप फॉर्म सत्यापन संदेश खातिर, रउआँ के novalidateबूलियन विशेषता के अपना <form>. ई ब्राउजर के डिफ़ॉल्ट फीडबैक टूलटिप सभ के अक्षम क देला, बाकी फिर भी जावास्क्रिप्ट में फॉर्म वैलिडेशन एपीआई सभ के पहुँच उपलब्ध करावे ला। नीचे दिहल फार्म जमा करे के कोशिश करीं; हमनी के जावास्क्रिप्ट सबमिट बटन के इंटरसेप्ट करी आ रउरा के प्रतिक्रिया रिले करी. सबमिट करे के कोशिश करत घरी रउरा देखब कि रउरा फार्म कंट्रोल पर :invalidआ स्टाइल लागू हो गइल बा.:valid
कस्टम फीडबैक स्टाइल कस्टम रंग, सीमा, फोकस स्टाइल, आ बैकग्राउंड आइकन लागू करे लें जेह से कि फीडबैक के बेहतर तरीका से संप्रेषित कइल जा सके। s खातिर बैकग्राउंड आइकन <select>खाली , के साथ उपलब्ध बा .custom-select, आ ना .form-control.
ब्राउजर डिफ़ॉल्ट हो जाला
कस्टम सत्यापन प्रतिक्रिया संदेश में रुचि नइखे भा फॉर्म व्यवहार बदले खातिर जावास्क्रिप्ट लिखे में रुचि नइखे? सब अच्छा, रउआ ब्राउज़र के डिफ़ॉल्ट के इस्तेमाल कर सकेनी। नीचे दिहल फार्म जमा करे के कोशिश करीं. अपना ब्राउजर अवुरी ओएस के आधार प आपके फीडबैक के तनिका अलग स्टाइल देखाई दिही।
हालाँकि, ई फीडबैक स्टाइल सभ के सीएसएस के साथ स्टाइल ना कइल जा सके ला, फिर भी आप जावास्क्रिप्ट के माध्यम से फीडबैक टेक्स्ट के अनुकूलित क सकत बानी।
सर्वर साइड के बा
हमनी के क्लाइंट-साइड सत्यापन के इस्तेमाल करे के सलाह देत बानी जा, लेकिन अगर रउआँ के सर्वर-साइड सत्यापन के जरूरत होखे, त रउआँ आ के साथ अमान्य आ वैध फॉर्म फील्ड के संकेत कर सकत .is-invalidबानी .is-valid। ध्यान दीं कि .invalid-feedbackएह क्लास सभ के साथ भी सपोर्ट कइल जाला।
समर्थित तत्वन के बा
निम्नलिखित फॉर्म नियंत्रण आ घटक सभ खातिर मान्यता शैली उपलब्ध बा:
<input>s आ <textarea>s के साथ ( इनपुट समूह में .form-controlएक तक के साथे).form-control
<select>s के साथे .form-controlबा.custom-select
.form-checkएस के बा
.custom-checkboxस आ .custom-radioस के बा
.custom-file
टूलटिप के बारे में बतावल गइल बा
अगर राउर फॉर्म लेआउट एकर अनुमति देत बा, त रउआँ क्लास सभ के .{valid|invalid}-feedbackक्लास सभ खातिर स्वैप क सकत बानी .{valid|invalid}-tooltipताकि स्टाइल कइल टूलटिप में सत्यापन प्रतिक्रिया देखावल जा सके। position: relativeटूलटिप पोजीशनिंग खातिर एकरा पर कवनो अभिभावक के साथ जरूर राखीं . नीचे दिहल उदाहरण में, हमनी के कॉलम क्लास सभ में ई पहिले से बा, बाकी आपके प्रोजेक्ट के वैकल्पिक सेटअप के जरूरत पड़ सके ला।
अनुकूलित कइल जा रहल बा
$form-validation-statesमान्यता राज्य सभ के नक्शा के साथ सास के माध्यम से अनुकूलित कइल जा सके ला । हमनी के फाइल में स्थित _variables.scss, ई Sass मैप डिफ़ॉल्ट valid/ invalidसत्यापन राज्य जनरेट करे खातिर लूप ओवर कइल गइल बा। हर राज्य के रंग आ आइकन के अनुकूलित करे खातिर एगो नेस्टेड मैप शामिल बा। जबकि कौनों अउरी राज्य ब्राउजर द्वारा सपोर्ट ना कइल जाला, कस्टम स्टाइल के इस्तेमाल करे वाला लोग आसानी से अउरी जटिल फॉर्म फीडबैक जोड़ सके ला।
form-validation-stateकृपया ध्यान दीं कि हमनी के बिना मिक्सिन के भी संशोधित कइले एह मान सभ के अनुकूलित करे के सलाह नइखीं देत ।
कस्टम फार्म के बा
अउरी अधिका कस्टमाइजेशन आ क्रॉस ब्राउजर स्थिरता खातिर, ब्राउजर डिफ़ॉल्ट के बदले खातिर हमनी के पूरा तरीका से कस्टम फॉर्म तत्वन के इस्तेमाल करीं. ई सिमेंटिक आ एक्सेसबल मार्कअप के ऊपर बनावल गइल बाड़ें, एह से ई कौनों भी डिफ़ॉल्ट फॉर्म कंट्रोल खातिर ठोस रिप्लेसमेंट बाड़ें।
चेकबॉक्स आ रेडियो के बारे में बतावल गइल बा
हर चेकबॉक्स आ रेडियो <input>आ <label>पेयरिंग के एगो में लपेट के <div>हमनी के कस्टम कंट्रोल बनावे के बा. संरचनात्मक रूप से ई उहे तरीका बा जवन हमनी के डिफ़ॉल्ट .form-checkबा .
हमनी के अपना सभ राज्य खातिर भाई-बहिन चयनकर्ता ( ~) के इस्तेमाल करेनी जा—जइसे कि —अपना कस्टम फॉर्म इंडिकेटर के सही तरीका से स्टाइल करे खातिर। जब क्लास के साथे जोड़ल जाला त हमनी के हर आइटम खातिर टेक्स्ट के 's स्टेट के आधार पर भी स्टाइल कर सकेनी जा ।<input>:checked.custom-control-label<input>
हमनी के डिफ़ॉल्ट <input>के साथ छिपावेनी जा आ ओकरा जगह पर एगो नया कस्टम फॉर्म इंडिकेटर बनावे खातिर opacityके इस्तेमाल करेनी जा आ . दुर्भाग्य से हमनी के बस से कस्टम एक नइखीं बना सकत काहे कि CSS's ओह तत्व पर काम ना करेला..custom-control-label::before::after<input>content
चेक कइल गइल राज्यन में, हमनी के Open Iconic से base64 एम्बेडेड SVG आइकन के इस्तेमाल करेनी जा । एह से हमनी के ब्राउजर आ डिवाइस सभ में स्टाइलिंग आ पोजीशनिंग खातिर बेहतरीन नियंत्रण मिले ला।
चेकबॉक्स के बा
कस्टम चेकबॉक्स सभ भी :indeterminateछद्म क्लास के इस्तेमाल क सके लें जब जावास्क्रिप्ट के माध्यम से मैन्युअल रूप से सेट कइल गइल होखे (एकरा के निर्दिष्ट करे खातिर कौनों HTML एट्रिब्यूट उपलब्ध नइखे)।
अगर रउआँ jQuery के इस्तेमाल कर रहल बानी, त कुछ अइसन काफी होखे के चाहीं:
रेडियो के बारे में बतावल गइल बा
इनलाइन के बा
विकलांग
कस्टम चेकबॉक्स आ रेडियो के भी अक्षम कइल जा सकेला। disabledमें बूलियन विशेषता जोड़ल जाला <input>आ कस्टम इंडिकेटर आ लेबल बिबरन स्वचालित रूप से स्टाइल हो जाई।
स्विच हो जाला
स्विच में कस्टम चेकबॉक्स के मार्कअप होला बाकी .custom-switchटॉगल स्विच रेंडर करे खातिर क्लास के इस्तेमाल होला। स्विच भी disabledएट्रिब्यूट के सपोर्ट करेला।
मेनू के चयन करीं
कस्टम <select>मेनू सभ में खाली एगो कस्टम क्लास के जरूरत होला, .custom-selectकस्टम स्टाइल सभ के ट्रिगर करे खातिर। कस्टम स्टाइल 's के सुरुआती रूप तक सीमित बा आ ब्राउजर के सीमा के कारण s के <select>संशोधित ना कर सके ला ।<option>
रउआँ हमनी के समान आकार के टेक्स्ट इनपुट से मेल खाए खातिर छोट आ बड़ कस्टम चयन में से भी चुन सकत बानी।
multipleएट्रिब्यूट के भी समर्थन कइल जाला :
जइसे कि sizeविशेषता बा:
रेंज
के साथ कस्टम <input type="range">नियंत्रण बनाईं .custom-range। ट्रैक (बैकग्राउंड) आ थंब (वैल्यू) दुनों के स्टाइल अइसन बा कि ब्राउजर सभ में एकही लउके। चूंकि खाली आईई आ फायरफॉक्स अपना ट्रैक के अंगूठा के बाईं भा दाईं ओर से “भरल” के समर्थन करेला जवन कि प्रगति के दृष्टिगत रूप से बतावे के साधन का रूप में बा, एहसे हमनी का एह घरी एकर समर्थन नइखीं करत.
रेंज इनपुट सभ में क्रम से minआ max— 0आ , खातिर निहित मान होला। आ विशेषता सभ 100के इस्तेमाल करे वाला लोग खातिर आप नया मान निर्दिष्ट क सकत बानी ।minmax
डिफ़ॉल्ट रूप से, रेंज इनपुट पूर्णांक मान के “स्नैप” करेला। एकरा के बदले खातिर रउआँ एगो stepमान निर्दिष्ट क सकत बानी। नीचे दिहल उदाहरण में, हमनी के step="0.5".
फाइल ब्राउजर के बा
कस्टम फाइल इनपुट के एनिमेट करे खातिर अनुशंसित प्लगइन: bs-custom-file-input , उहे बा जवना के हमनी के वर्तमान में इहाँ अपना डॉक्स में इस्तेमाल कर रहल बानी जा।
फाइल इनपुट गुच्छा में सबसे gnarly होला आ अगर रउआँ ओह लोग के फंक्शनल Choose file... आ चुनल फाइल नाँव टेक्स्ट के साथ हुकअप कइल चाहत बानी त एकरा खातिर अतिरिक्त जावास्क्रिप्ट के जरूरत होला ।
हमनी के डिफ़ॉल्ट फाइल <input>के माध्यम से छिपावेनी जा opacityआ एकरा बजाय स्टाइल करेनी जा <label>. बटन के जनरेट कइल जाला आ ::after. अंत में, हमनी के आसपास के सामग्री खातिर उचित अंतराल खातिर एगो widthआ heightपर घोषित करेनी जा ।<input>
SCSS के साथ स्ट्रिंग के अनुवाद भा अनुकूलित कइल
:lang()छद्म वर्ग के इस्तेमाल एह खातिर कइल जाला कि “ब्राउज” पाठ के दोसरा भाषा में अनुवाद कइल जा सके. संबंधित भाषा टैग आ स्थानीयकृत स्ट्रिंग $custom-file-textसभ के साथ Sass चर में प्रविष्टि सभ के ओवरराइड करीं या जोड़ीं । अंग्रेजी तार के ओही तरह से अनुकूलित कइल जा सकेला. उदाहरण खातिर, इहाँ बतावल गइल बा कि कइसे केहू स्पेनिश अनुवाद जोड़ सके ला (स्पेनिश के भाषा कोड बा ):es
lang(es)स्पेनिश अनुवाद खातिर कस्टम फाइल इनपुट पर इहाँ एक्शन में बा:
एचटीएमएल के साथ स्ट्रिंग के अनुवाद भा अनुकूलित कइल
बूटस्ट्रैप एचटीएमएल में “ब्राउज” टेक्स्ट के data-browseएट्रिब्यूट के साथ अनुवाद करे के तरीका भी उपलब्ध करावे ला जेकरा के कस्टम इनपुट लेबल में जोड़ल जा सके ला (उदाहरण डच में):