फॉर्म नियंत्रण शैली, लेआउट विकल्प, आ विस्तृत विविधता कें फॉर्म बनावा कें लेल कस्टम घटक कें लेल उदाहरण आ उपयोग दिशा निर्देश.
अवलोकन
बूटस्ट्रैप के फॉर्म कंट्रोल क्लास के साथ हमर रिबूट फॉर्म स्टाइल पर विस्तार करैत अछि. ब्राउज़र आरू डिवाइसऽ म॑ अधिक सुसंगत रेंडरिंग लेली ओकरऽ अनुकूलित प्रदर्शनऽ म॑ विकल्प चुनै लेली ई वर्गऽ के उपयोग करऽ ।
ईमेल सत्यापन, संख्या चयन, आ बेसि जैना नव इनपुट नियंत्रणक कें लाभ उठावय कें लेल typeसबटा इनपुटक पर (जैना, emailईमेल पता कें लेल या संख्यात्मक जानकारी कें लेल) एकटा उचित विशेषता कें उपयोग करनाय सुनिश्चित करूं .number
बूटस्ट्रैप के फॉर्म स्टाइल के प्रदर्शन करय लेल एकटा त्वरित उदाहरण एतय देल गेल अछि. आवश्यक कक्षाक, फॉर्म लेआउट, आओर बहुत किछु पर दस्तावेजीकरणक लेल पढ़ैत रहू.
फॉर्म नियंत्रण
पाठ्य रूप नियंत्रण-जैसे <input>s, <select>s, आरू <textarea>s- .form-controlवर्ग के साथ स्टाइल करलऽ गेलऽ छै । सामान्य रूप, फोकस स्टेट, साइजिंग, आओर बहुत किछु के लेल शैली शामिल अछि.
आगू शैली s के लेल हमर कस्टम फॉर्म के अन्वेषण अवश्य करू ।<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>
पूर्वनिर्धारित (ढेर) 1।
डिफ़ॉल्ट रूप सं, कोनों संख्या मे चेकबॉक्स आ रेडियो जे तत्काल भाई-बहिन छै, लंबवत ढेर कैल जेतय आ उचित रूप सं .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समूहक कें रूप मे क्लास कें जोड़य आ .col-*-*अपनय लेबल आरू नियंत्रण कें चौड़ाई निर्दिष्ट करय कें लेल क्लास कें उपयोग करयत ग्रिड कें साथ क्षैतिज रूप बनावा . .col-form-labelअपनऽ s म॑ भी जोड़ना सुनिश्चित करऽ <label>ताकि वू अपनऽ संबद्ध फॉर्म नियंत्रण के साथ लंबवत केंद्रित होय ।
कखनो काल, अहां कें शायद मार्जिन या पैडिंग उपयोगिता कें उपयोग करय कें जरूरत होयत छै ताकि अहां कें जरूरत कें ओ सही संरेखण बना सकय. उदाहरण के लेल, हम padding-topअपन ढेर रेडियो इनपुट लेबल पर हटा देलौं अछि पाठ बेसलाइन के बेहतर संरेखित करय लेल.
क्षैतिज रूप लेबल आकार
कें आकार कें सही ढंग सं पालन करय कें लेल या अपन s या .col-form-label-sms कें उपयोग करनाय सुनिश्चित करूं ..col-form-label-lg<label><legend>.form-control-lg.form-control-sm
कॉलम साइजिंग
जैना की पिछला उदाहरणक मे दिखायल गेल छै, हमर ग्रिड सिस्टम अहां कें कोनों संख्या मे .cols कें a .rowया .form-row. उपलब्ध चौड़ाई के बराबर के बीच में बांट देत। अहां अपन कॉलम के एकटा उपसमूह सेहो चुनि सकय छी जे कम-बेसी जगह लेबय, जखन कि शेष .cols बाकी के समान रूप सं विभाजित करैत अछि, विशिष्ट कॉलम क्लास के संग जेना .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अन्य लेबलिंग विधियक कें प्रतिस्थापन कें रूप मे कें उपयोग कें सलाह नहि देल गेल छै.
सहायता पाठ
फॉर्म मे ब्लॉक-स्तरीय मदद पाठ कें उपयोग करयत बनायल जा सकय छै (पहिने v3 मे .form-textजानल जाय छै). .help-blockइनलाइन मदद पाठ कें कोनों इनलाइन एचटीएमएल तत्व आ उपयोगिता वर्गक कें उपयोग करयत लचीला ढंग सं लागू कैल जा सकय छै जेना .text-muted.
फॉर्म नियंत्रण के साथ मदद पाठ को जोड़ना |
सहायता पाठ कें स्पष्ट रूप सं फॉर्म नियंत्रण सं जुड़ल होबाक चाही जे इ aria-describedbyविशेषता कें उपयोग करय सं संबंधित छै. इ सुनिश्चित करतय की सहायक प्रौद्योगिकी-जैना स्क्रीन रीडर-जखन उपयोगकर्ता ध्यान केंद्रित करतय या नियंत्रण मे प्रवेश करतय तखन इ मदद पाठ कें घोषणा करतय.
इनपुट के नीचा मदद पाठ के स्टाइल कएल जा सकैत अछि .form-text. इ वर्ग मे display: blockउपरोक्त इनपुट सं आसान स्पेसिंग कें लेल किच्छू टॉप मार्जिन शामिल छै आ जोड़य छै.
अहां कें पासवर्ड 8-20 अक्षर लंबा होबाक चाही, अक्षर आ नंबर होबाक चाही, आ स्पेस, विशेष अक्षर, या इमोजी नहि होबाक चाही.
इनलाइन पाठ कोनों विशिष्ट इनलाइन एचटीएमएल तत्व (चाहे ओ <small>, <span>, या किछु आओर) कें उपयोग कयर सकय छै जइ मे उपयोगिता वर्ग सं बेसि किछु नहि छै.
विकलांग फॉर्म
disabledउपयोगकर्ताक कें बातचीत कें रोकय कें लेल आ ओकरा हल्का प्रतीत करय कें लेल कोनों इनपुट पर बूलियन विशेषता जोड़ू .
भीतरक सभ नियंत्रण केँ अक्षम करबाक disabledलेल विशेषता केँ a मे जोड़ू .<fieldset>
लंगर के साथ चेतावनी
ब्राउज़र a के अंदर सब देशी फॉर्म नियंत्रण ( <input>, <select>, आरू तत्व) क॑ अक्षम मान॑ छै, जेकरा स॑ कीबोर्ड आरू माउस दूनू क॑ ओकरा प॑ बातचीत नै करलऽ जाय छै ।<button><fieldset disabled>
मुदा, जँ अहाँक फॉर्म मे कस्टम बटन सन तत्व सेहो शामिल अछि जेना <a ... class="btn btn-*">, एहि सभ केँ मात्र pointer-events: none. जेना कि बटन कें लेल अक्षम स्थिति कें बारे मे खंड मे नोट कैल गेल छै (आ विशेष रूप सं एंकर तत्वक कें लेल उप-खंड मे), इ CSS गुण एखन तइक मानकीकृत नहि छै आ इंटरनेट एक्सप्लोरर 10 मे पूर्ण रूप सं समर्थित नहि छै.एंकर-आधारित नियंत्रण सेहो एखनहु होयत कीबोर्ड के उपयोग स फोकस करय योग्य आ ऑपरेबल। tabindex="-1"अहां कें इ नियंत्रणक कें फोकस प्राप्त करय सं रोकय कें लेल आ aria-disabled="disabled"सहायक प्रौद्योगिकी कें ओकर स्थिति कें संकेत देवय कें लेल जोड़ क मैन्युअल रूप सं संशोधित करनाय होयत .
क्रॉस-ब्राउजर संगतता
जखन कि बूटस्ट्रैप ई शैली सभ ब्राउज़र मे लागू करत, इंटरनेट एक्सप्लोरर 11 आओर नीचाँ disabledएकटा पर विशेषता केँ पूर्ण रूप सँ समर्थन नहि करैत अछि <fieldset>. एहि ब्राउज़र मे फील्डसेट केँ अक्षम करबाक लेल कस्टम जावास्क्रिप्ट क उपयोग करू.
मान्यता देब
HTML5 फॉर्म सत्यापन कें साथ अपन उपयोगकर्ताक कें मूल्यवान, कार्यवाही योग्य प्रतिक्रिया प्रदान करूं– हमर सबटा समर्थित ब्राउज़र मे उपलब्ध छै . ब्राउज़र डिफ़ॉल्ट सत्यापन प्रतिक्रिया सं चुनू, या हमर अंतर्निहित वर्ग आ स्टार्टर जावास्क्रिप्ट कें साथ कस्टम संदेश लागू करू.
हम जानय छी की वर्तमान मे ग्राहक-पक्ष कस्टम सत्यापन शैली आ टूलटिप सुलभ नहि छै, कियाकि इ सहायक प्रौद्योगिकी कें संपर्क मे नहि छै. जखन कि हम कोनों समाधान पर काज करय छी, हम या त सर्वर-साइड विकल्प या डिफ़ॉल्ट ब्राउज़र सत्यापन विधि कें उपयोग करय कें सिफारिश करब.
इनपुट समूह सत्यापन
इनपुट समूहक कें सत्यापन शैलीक कें साथ दिक्कत होयत छै, दुर्भाग्यवश. हमर सिफारिश अछि जे प्रतिक्रिया संदेश के भाई-बहिन तत्व के रूप में राखल जाय .input-groupजे अछि .is-{valid|invalid}. इनपुट समूहक कें भीतर प्रतिक्रिया संदेश रखनाय border-radius. ई समाधान देखू .
एचटीएमएल फॉर्म सत्यापन CSS कें दू छद्म-वर्गक कें माध्यम सं लागू कैल जायत छै, :invalidआ :valid. ई <input>, <select>, आ <textarea>तत्व पर लागू होइत अछि |
:invalidबूटस्ट्रैप माता-पिता वर्ग कें लेल आओर :validशैली कें दायरा बनायत छै .was-validated, आमतौर पर लागू कैल जायत छै <form>. अन्यथा, बिना मान के कोनो आवश्यक क्षेत्र पृष्ठ लोड पर अमान्य के रूप मे देखाबैत अछि. अइ तरह, अहां इ चुन सकय छी की ओकरा कहिया सक्रिय करनाय छै (आमतौर पर फॉर्म जमा करय कें प्रयास कें बाद)।
फॉर्म कें उपस्थिति कें रीसेट करय कें लेल (उदाहरण कें लेल, AJAX कें उपयोग करयत डायनामिक फॉर्म सबमिशन कें मामला मे), सबमिशन कें बाद फेर .was-validatedसं वर्ग कें हटाउ.<form>
एकटा फॉलबैक के रूप मे, .is-invalidआओर सर्वर साइड सत्यापन.is-valid क लेल छद्म-वर्ग क बजाय वर्ग क उपयोग कएल जा सकैत अछि . हुनका सब के अभिभावक वर्ग के आवश्यकता नहिं छनि ..was-validated
<label>CSS केना काम करै छै, एकरा म॑ बाधा के कारण, हम (वर्तमान म॑) कस्टम जावास्क्रिप्ट के मदद के बिना DOM म॑ एक फॉर्म कंट्रोल स॑ पहल॑ आबै वाला एक प॑ स्टाइल लागू नै करी सकै छियै ।
सब आधुनिक ब्राउज़र बाधा सत्यापन एपीआई कें समर्थन करयत छै , फॉर्म नियंत्रण कें मान्यता देवय कें लेल जावास्क्रिप्ट विधियक कें एकटा श्रृंखला.
प्रतिक्रिया संदेश ब्राउज़र डिफ़ॉल्ट (प्रत्येक ब्राउज़र कें लेल अलग, आ सीएसएस कें माध्यम सं अनस्टाइल करय योग्य) या अतिरिक्त एचटीएमएल आ सीएसएस कें साथ हमर कस्टम प्रतिक्रिया शैली कें उपयोग करय सकय छै.
setCustomValidityअहां जावास्क्रिप्ट मे कें साथ कस्टम वैधता संदेश प्रदान कयर सकय छी .
कस्टम बूटस्ट्रैप फॉर्म सत्यापन संदेशक कें लेल, अहां novalidateकें अपन <form>. इ ब्राउज़र डिफ़ॉल्ट फीडबैक टूलटिप्स कें अक्षम करयत छै, मुदा तइयो जावास्क्रिप्ट मे फॉर्म सत्यापन एपीआई कें पहुंच प्रदान करयत छै. नीचा देल गेल फॉर्म जमा करबाक प्रयास करू; हमर जावास्क्रिप्ट सबमिट बटन के इंटरसेप्ट करत आ अहाँ के प्रतिक्रिया रिले करत. जमा करय के कोशिश करय के समय, अहां देखब जे अहां के फॉर्म नियंत्रण पर लागू :invalidआओर शैली लागू होएत.:valid
कस्टम प्रतिक्रिया शैली कस्टम रंग, सीमा, फोकस शैली, आ पृष्ठभूमि आइकन लागू करय छै जे बेहतर ढंग सं प्रतिक्रिया संप्रेषित करय छै. s क लेल पृष्ठभूमि आइकन <select>केवल , क संग उपलब्ध अछि .custom-select, आओर नहि .form-control.
ब्राउज़र पूर्वनिर्धारित अछि
कस्टम सत्यापन प्रतिक्रिया संदेश या फॉर्म व्यवहार बदलय कें लेल जावास्क्रिप्ट लिखय मे रुचि नहि छै? सब नीक, अहाँ ब्राउज़र डिफ़ॉल्ट के उपयोग क सकैत छी. नीचा देल गेल फॉर्म जमा करबाक प्रयास करू। अपन ब्राउजर आओर ओएस के हिसाब सं अहां के फीडबैक के कनि अलग स्टाइल देखय लेल मिलत.
जखन कि ई प्रतिक्रिया शैली क॑ CSS स॑ स्टाइल नै करलऽ जाब॑ सकै छै, लेकिन आप अभी भी जावास्क्रिप्ट के माध्यम स॑ प्रतिक्रिया पाठ क॑ अनुकूलित करी सकै छियै ।
सर्वर साइड
हम क्लाइंट-साइड सत्यापन कें उपयोग करय कें अनुशंसा करय छी, मुदा अहां कें सर्वर-साइड सत्यापन कें आवश्यकता कें स्थिति मे, अहां आ कें साथ अमान्य आ वैध फॉर्म फील्ड कें संकेत कयर सकय .is-invalidछी .is-valid. ध्यान राखू जे .invalid-feedbackएहि वर्ग सभक संग सेहो समर्थित अछि.
अमान्य क्षेत्रक कें लेल, सुनिश्चित करूं कि अमान्य प्रतिक्रिया/त्रुटि संदेश कें उपयोग करयत संबंधित फॉर्म क्षेत्र सं जुड़ल छै aria-describedby. इ विशेषता एक सं बेसि idसंदर्भित करय कें अनुमति देयत छै, अइ स्थिति मे जे क्षेत्र पहिने सं अतिरिक्त फॉर्म पाठ कें ओर इशारा करय छै.
समर्थित तत्व
निम्नलिखित फॉर्म नियंत्रण आ घटकक कें लेल सत्यापन शैली उपलब्ध छै:
<input>स आ <textarea>स के साथ.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मिक्सिन कए सेहो संशोधित केने एहि मान कए अनुकूलित करबाक अनुशंसा नहि करैत छी ।
इनपुट समूह सत्यापन कार्यकलाप
border-radiusहम चयनकर्ता सीमाक कें कारण सत्यापन कें साथ इनपुट समूहक कें टूटल कें हल करय मे असमर्थ छी , अइ कें लेल मैनुअल ओवरराइड कें आवश्यकता छै. जखन अहाँ कोनो मानक इनपुट समूह क उपयोग कए रहल छी आओर डिफ़ॉल्ट सीमा त्रिज्या मान कए अनुकूलित नहि कए रहल छी, .rounded-rightतखन टूटल क संग तत्व मे जोड़ू border-radius.
@ .
कृपया एकटा प्रयोक्ता नाम चुनू।
जखन अहां कोनों छोट या पैघ इनपुट समूह कें उपयोग करय रहल छी या डिफ़ॉल्ट border-radiusमान कें अनुकूलित करय रहल छी, तखन बस्टेड कें साथ तत्व मे कस्टम CSS जोड़ूं border-radius.
@ .
कृपया एकटा प्रयोक्ता नाम चुनू।
कस्टम फार्म
आरू भी अधिक अनुकूलन आरू क्रॉस ब्राउज़र स्थिरता के लेलऽ, ब्राउज़र डिफ़ॉल्ट क॑ बदलै लेली हमरऽ पूर्ण रूप स॑ कस्टम फॉर्म तत्वऽ के उपयोग करलऽ जाय । इ शब्दार्थ आ सुलभ मार्कअप कें ऊपर बनल छै, अइ कें लेल इ कोनों डिफ़ॉल्ट फॉर्म नियंत्रण कें लेल ठोस प्रतिस्थापन छै.
चेकबॉक्स आ रेडियो
प्रत्येक चेकबॉक्स आरू रेडियो <input>आरू पेयरिंग क॑ हमरऽ कस्टम कंट्रोल बनाबै लेली <label>एक म॑ लपेटलऽ गेलऽ छै । <div>संरचनात्मक रूप सं, ई ओही दृष्टिकोण अछि जेना हमर डिफ़ॉल्ट .form-check.
हम अपन सब राज्य के लेल भाई-बहिन चयनकर्ता ( ~) के उपयोग करैत छी-जैना —अपन कस्टम फॉर्म संकेतक के सही ढंग स स्टाइल करय लेल. क्लास के साथ जोड़ला पर हम प्रत्येक आइटम के लेल टेक्स्ट के 's स्टेट के आधार पर सेहो स्टाइल क सकैत छी |<input>:checked.custom-control-label<input>
हम डिफ़ॉल्ट <input>के साथ छिपाबैत छी opacityआओर के उपयोग करैत .custom-control-labelछी ओकर जगह पर एकटा नव कस्टम फॉर्म इंडिकेटर बनेबाक लेल ::beforeआओर के संग ::after. दुर्भाग्यवश हम सिर्फ स कस्टम एकटा नहि बना सकैत छी <input>कारण CSS's contentओहि तत्व पर काज नहि करैत अछि |
चेक कएल गेल अवस्था मे, हम Open Iconic सँ base64 एम्बेडेड SVG आइकन क उपयोग करैत छी | ई हमरा सब क॑ ब्राउज़र आरू डिवाइसऽ म॑ स्टाइलिंग आरू पोजीशनिंग लेली सबसे अच्छा नियंत्रण प्रदान करै छै ।
चेकबॉक्स
कस्टम चेकबॉक्स जावास्क्रिप्ट कें माध्यम सं मैन्युअल रूप सं सेट करय पर छद्म वर्ग कें उपयोग सेहो कयर सकय छै :indeterminate(एकरा निर्दिष्ट करय कें लेल कोनों उपलब्ध एचटीएमएल विशेषता नहि छै) ।
यदि अहाँ jQuery क उपयोग कए रहल छी, त' एहि तरहक किछु पर्याप्त हेबाक चाही:
रेडियो के
इनलाइन
अयोग्य बनेनाइ
कस्टम चेकबॉक्स आ रेडियो कें सेहो अक्षम कैल जा सकय छै. disabledमे बूलियन विशेषता जोड़ू <input>आओर कस्टम संकेतक आओर लेबल विवरण स्वचालित रूप सं स्टाइल कएल जाएत.
स्विच करैत अछि
एकटा स्विच मे कस्टम चेकबॉक्स कें मार्कअप होयत छै मुदा .custom-switchटॉगल स्विच कें रेंडर करय कें लेल क्लास कें उपयोग करयत छै. स्विच disabledविशेषता क समर्थन सेहो करैत अछि.
मेनू चुनू
कस्टम <select>मेनू कें केवल एकटा कस्टम वर्ग कें जरूरत छै, .custom-selectकस्टम शैली कें ट्रिगर करय कें लेल. <select>कस्टम शैली 's प्रारंभिक रूप तक सीमित छै आरू <option>ब्राउज़र सीमा के कारण s क॑ संशोधित नै करी सकै छै.
आप हमरऽ समान आकार के टेक्स्ट इनपुट स॑ मेल खाबै लेली छोटऽ आरू बड़ऽ कस्टम चयन म॑ स॑ भी चुनी सकै छियै ।
विशेषता multipleसेहो समर्थित अछि:
जेना sizeविशेषता अछि : १.
श्रेणी
के साथ कस्टम <input type="range">नियंत्रण बनाएँ .custom-range| ट्रैक (बैकग्राउंड) आरू अंगूठा (मान) दूनू क॑ ब्राउज़र भर म॑ एक जैसनऽ दिखाबै लेली स्टाइल करलऽ गेलऽ छै । जेना कि केवल आईई आरू फायरफॉक्स प्रगति क॑ दृष्टिगत रूप स॑ संकेत करै के साधन के रूप म॑ अंगूठा केरऽ बायां या दायां तरफ स॑ अपनऽ ट्रैक क॑ “भराबै” के समर्थन करै छै, हम्मं॑ वर्तमान म॑ एकरऽ समर्थन नै करै छियै ।
minरेंज इनपुट क्रमशः आरू max— 0आरू , के लेलऽ निहित मान 100छै. minअहां आओर maxविशेषता क उपयोग करय वाला क लेल नव मान निर्दिष्ट क सकय छी .
डिफ़ॉल्ट रूप स, रेंज इनपुट पूर्णांक मान क लेल “स्नैप” करैत अछि | एकरा बदलबाक लेल, अहाँ एकटा stepमान निर्दिष्ट कए सकैत छी. नीचा देल गेल उदाहरण मे, हम step="0.5".
फाइल ब्राउज़र
कस्टम फाइल इनपुट क॑ एनिमेट करै लेली अनुशंसित प्लगइन: bs-custom-file-input , वू छै जेकरऽ उपयोग हम्मं॑ वर्तमान म॑ यहाँ अपनऽ डॉक्स म॑ करी रहलऽ छियै ।
फाइल इनपुट गुच्छा केरऽ सबसें gnarly छै आरू अतिरिक्त जावास्क्रिप्ट केरऽ आवश्यकता छै अगर आप ओकरा कार्यात्मक फाइल चुनू... आरू चयनित फाइल नाम पाठ के साथ हुक करना चाहै छियै .
हम डिफ़ॉल्ट फाइल <input>के माध्यम स नुकाबैत छी opacityआ एकर बदला मे स्टाइल करैत छी <label>. बटन जनरेट कएल गेल अछि आ ::after. अंत में, हम आसपास के सामग्री के लेल उचित अंतराल के लेल एक widthआ heightपर घोषित करैत छी |<input>
SCSS के साथ स्ट्रिंग्स के अनुवाद या अनुकूलित करब
छद्म :lang()-वर्ग के प्रयोग “ब्राउज” पाठ के अन्य भाषा में अनुवाद के अनुमति के लेल करलऽ जाय छै । $custom-file-textप्रासंगिक भाषा टैग आरू स्थानीयकृत स्ट्रिंग्स के साथ Sass चर म॑ प्रविष्टियऽ क॑ ओवरराइड करऽ या जोड़ऽ । अंग्रेजी तार के सेहो ओहिना अनुकूलित कएल जा सकैत अछि । उदाहरण के लेल, एतय देखू जे कोना कोनो व्यक्ति स्पेनिश अनुवाद जोड़ि सकैत अछि (स्पेनिश के भाषा कोड अछि es):
lang(es)स्पेनिश अनुवादक लेल कस्टम फाइल इनपुट पर एतय क्रिया मे अछि:
सही पाठ देखाबय लेल अहां के अपन दस्तावेज (या ओकर उपवृक्ष) के भाषा सही सेट करय पड़त. एकरा तत्व पर विशेषता या HTTP हेडर कें उपयोग करयत अन्य विधियक कें साथ कैल जा सकय छैlang .<html>Content-Language
एचटीएमएल के साथ स्ट्रिंग के अनुवाद या अनुकूलित करब
बूटस्ट्रैप एचटीएमएल म॑ “ब्राउज” पाठ क॑ data-browseएट्रिब्यूट के साथ अनुवाद करै के तरीका भी प्रदान करै छै जेकरा कस्टम इनपुट लेबल म॑ जोड़लऽ जाब॑ सकै छै (डच म॑ उदाहरण):