वैश्विक सीएसएस सेटिंग्स, विस्तार योग्य वर्गक कें साथ शैली आ संवर्धित मौलिक एचटीएमएल तत्वक, आ एकटा उन्नत ग्रिड प्रणाली.
अवलोकन
बूटस्ट्रैप केरऽ बुनियादी ढाँचा केरऽ प्रमुख टुकड़ा प॑ लोडाउन प्राप्त करऽ, जेकरा म॑ बेहतर, तेज, मजबूत वेब विकास केरऽ हमरऽ दृष्टिकोण शामिल छै ।
एचटीएमएल 5 डॉक्टटाइप
बूटस्ट्रैप कुछ एचटीएमएल तत्व आरू सीएसएस गुणक कें उपयोग करय छै जेकरा एचटीएमएल 5 डॉकटाइप कें उपयोग करय कें आवश्यकता होयत छै. अपन सब प्रोजेक्ट के शुरुआत में एकरा शामिल करू।
मोबाइल पहिने
बूटस्ट्रैप 2 के साथ, हम फ्रेमवर्क के प्रमुख पहलु के लेल वैकल्पिक मोबाइल फ्रेंडली स्टाइल जोड़लौं। बूटस्ट्रैप 3 के साथ हम प्रोजेक्ट के शुरू स मोबाइल फ्रेंडली बनेबाक लेल फेर स लिखने छी। वैकल्पिक मोबाइल स्टाइल पर जोड़य के बजाय, ई ठीक कोर में बेक क देल गेल अछि. असल में बूटस्ट्रैप पहिने मोबाइल अछि . मोबाइल फर्स्ट स्टाइल अलग-अलग फाइल मे नहि बल्कि पूरा लाइब्रेरी मे भेट सकैत अछि ।
ग्रिड सिस्टम कें उपयोग पंक्तियक आ कॉलम कें एकटा श्रृंखला कें माध्यम सं पृष्ठ लेआउट बनावा कें लेल कैल जायत छै जे अहां कें सामग्री कें रखयत छै. बूटस्ट्रैप ग्रिड सिस्टम कोना काज करैत अछि से देखू:
सही संरेखण आ पैडिंग कें लेल पंक्तियक कें एकटा .container(नियत-चौड़ाई) या (पूर्ण-चौड़ाई) कें भीतर रखनाय आवश्यक छै ..container-fluid
स्तंभक क्षैतिज समूह बनेबाक लेल पंक्तिक प्रयोग करू।
सामग्री स्तंभक भीतर राखल जेबाक चाही, आ मात्र स्तंभ पंक्तिक तत्काल संतान भ' सकैत अछि.
पूर्व परिभाषित ग्रिड वर्ग जैना .rowआ .col-xs-4जल्दी सं ग्रिड लेआउट बनावा कें लेल उपलब्ध छै. कम मिक्सिन कें उपयोग बेसि शब्दार्थ लेआउट कें लेल सेहो कैल जा सकय छै.
स्तंभ गटर (स्तंभ सामग्री के बीच अंतराल) के माध्यम स बनाबैत अछि padding. कि पैडिंग s पर नकारात्मक मार्जिन के माध्यम स पहिल आ अंतिम कॉलम के लेल पंक्ति में ऑफसेट अछि .row|
नकारात्मक मार्जिन एहि लेल अछि जे नीचा देल गेल उदाहरण आउटडेंट अछि । ई ऐन्हऽ छै कि ग्रिड कॉलम के भीतर सामग्री गैर-ग्रिड सामग्री के साथ लाइन अप करलऽ जाय ।
ग्रिड कॉलम कें निर्माण बारह उपलब्ध कॉलम कें संख्या निर्दिष्ट करयत कैल जायत छै जइ सं अहां स्पैन करय चाहय छी. जेना, तीन बराबर कॉलम तीन के प्रयोग करत .col-xs-4.
यदि एकटा पंक्ति कें भीतर 12 सं बेसि स्तंभक कें राखल गेल छै, त अतिरिक्त स्तंभक कें प्रत्येक समूह, एकटा इकाई कें रूप मे, एकटा नव रेखा पर लपेटतय.
ग्रिड वर्गक ओय उपकरणक पर लागू होयत छै जइ मे स्क्र ीन चौड़ाई ब्रेकपॉइंट आकारक सं बेसि या बराबर होयत छै, आ छोट उपकरणक कें लक्षित ग्रिड वर्गक कें ओवरराइड करयत छै. अतः, जेना कोनो .col-md-*तत्व पर कोनो भी वर्ग लागू करला सँ न केवल मध्यम उपकरण पर ओकर स्टाइलिंग प्रभावित होयत बल्कि पैघ उपकरण पर सेहो प्रभावित होयत जँ कोनो .col-lg-*वर्ग उपस्थित नहि होयत |
अपन कोड पर इ सिद्धांतक कें लागू करय कें लेल उदाहरणक कें देखूं.
मीडिया के क्वेरीज
हम अपनऽ ग्रिड सिस्टम म॑ कुंजी ब्रेकपॉइंट बनाबै लेली अपनऽ Less फाइलऽ म॑ निम्नलिखित मीडिया क्वेरी के उपयोग करय छै ।
हम बीच-बीच मे इ मीडिया क्वेरी कें विस्तार करयत छै आ एकटा कें शामिल करयत max-widthछै सीएसएस कें डिवाइस कें संकीर्ण सेट कें लेल सीमित करय कें लेल.
ग्रिड विकल्प
देखू जे बूटस्ट्रैप ग्रिड सिस्टम कें पहलू एकटा सुलभ तालिका कें साथ कईटा डिवाइसक मे कोना काज करयत छै.
अतिरिक्त छोट उपकरण फोन (<768px)
छोट उपकरण टैबलेट (≥768px)
मध्यम उपकरण डेस्कटॉप (≥992px)
पैघ उपकरण डेस्कटॉप (≥1200px)
ग्रिड व्यवहार
हर समय क्षैतिज
शुरू करबाक लेल ढह गेल, ब्रेकपॉइंट स ऊपर क्षैतिज
कंटेनर चौड़ाई
कोनो नै (ऑटो) २.
750px के
970px के अछि
1170px के अछि
वर्ग उपसर्ग
.col-xs-
.col-sm-
.col-md-
.col-lg-
# स्तंभ के
12
स्तंभ चौड़ाई
ऑटो
~62px
~81px
~97px
गटर चौड़ाई
30px (कोनो कॉलम के प्रत्येक कात 15px)
घोंसला योग्य
हँ
ऑफसेट के
हँ
स्तंभ क्रमबद्ध करब
हँ
उदाहरण : ढेर-से-क्षैतिज
ग्रिड क्लास कें एकटा सेट कें उपयोग करयत .col-md-*, अहां एकटा बेसिक ग्रिड सिस्टम बना सकय छी जे डेस्कटॉप (मध्यम) डिवाइस पर क्षैतिज बनय सं पहिले मोबाइल डिवाइस आ टैबलेट डिवाइस (अतिरिक्त छोट सं छोट रेंज) पर ढेर भ क शुरू भ जायत छै. कोनो मे ग्रिड कॉलम राखू .row.
नहि चाहैत छी जे अहाँक कॉलम बस छोट-छोट डिवाइस मे ढेर भ' जाय? .col-xs-*.col-md-*अपन कॉलम मे जोड़ क अतिरिक्त छोट आ मध्यम डिवाइस ग्रिड क्लास क उपयोग करू . ई सब कोना काज करैत अछि एकर नीक विचार लेल नीचा देल गेल उदाहरण देखू।
.कोल-एक्सएस-12 .कोल-एमडी-8
.कोल-एक्सएस-6 .कोल-एमडी-4
.कोल-एक्सएस-6 .कोल-एमडी-4
.कोल-एक्सएस-6 .कोल-एमडी-4
.कोल-एक्सएस-6 .कोल-एमडी-4
.कोल-एक्सएस-6
.कोल-एक्सएस-6
जेना : मोबाइल, टैबलेट, डेस्कटॉप
.col-sm-*टैबलेट क्लास के साथ आरू अधिक गतिशील आरू शक्तिशाली लेआउट बनाबै के द्वारा पिछला उदाहरण के आधार पर निर्माण करलऽ जाय ।
.कोल-एक्सएस-12 .कोल-एसएम-6 .कोल-एमडी-8
.कोल-एक्सएस-6 .कोल-एमडी-4
.कोल-एक्सएस-6 .कोल-एसएम-4
.कोल-एक्सएस-6 .कोल-एसएम-4
.कोल-एक्सएस-6 .कोल-एसएम-4
जेना : स्तंभ लपेटब
यदि एकटा पंक्ति कें भीतर 12 सं बेसि स्तंभक कें राखल गेल छै, त अतिरिक्त स्तंभक कें प्रत्येक समूह, एकटा इकाई कें रूप मे, एकटा नव रेखा पर लपेटतय.
.कोल-एक्सएस-9
.col-xs-4
चूँकि 9 + 4 = 13 > 12, ई 4-स्तंभ-व्यापी दिव एक सटल इकाई के रूप मे एकटा नव रेखा पर लपेटि जाइत अछि |
.col-xs-6
बादक कॉलम नव पंक्तिक संग जारी अछि.
प्रतिक्रियाशील कॉलम रीसेट
उपलब्ध ग्रिड केरऽ चारो स्तर के साथ आपने क॑ ऐन्हऽ मुद्दा म॑ दौड़ना तय छै, जेकरा म॑, कुछ खास ब्रेकपॉइंट प॑, आपकऽ कॉलम बिल्कुल सही साफ नै होय छै, कैन्हेंकि एक दोसरऽ स॑ लम्बा छै । ओकरा ठीक करबाक लेल, a .clearfixआओर हमर उत्तरदायी उपयोगिता वर्गक संयोजनक उपयोग करू .
.col-xs-6 .col-sm-3
अपन व्यूपोर्ट क आकार बदलू अथवा एकटा उदाहरण क लेल अपन फोन पर देखू.
.कोल-एक्सएस-6 .कोल-एसएम-3
.कोल-एक्सएस-6 .कोल-एसएम-3
.कोल-एक्सएस-6 .कोल-एसएम-3
प्रतिक्रियाशील ब्रेकपॉइंट पर कॉलम क्लियरिंग कें अलावा, अहां कें ऑफसेट, पुश, या पुल कें रीसेट करय कें आवश्यकता भ सकय छै . ग्रिड उदाहरण मे एकरा क्रिया मे देखू .
गटर निकालि लिअ
एकटा पंक्ति स गटर निकालू आ इ .row-no-guttersक्लास क संग कॉलम अछि।
.कोल-एक्सएस-12 .कोल-एमडी-8
.कोल-एक्सएस-6 .कोल-एमडी-4
.कोल-एक्सएस-6 .कोल-एमडी-4
.कोल-एक्सएस-6 .कोल-एमडी-4
.कोल-एक्सएस-6 .कोल-एमडी-4
.कोल-एक्सएस-6
.कोल-एक्सएस-6
कॉलम ऑफसेट करब
.col-md-offset-*क्लास क उपयोग कए कॉलम कए दाहिना दिस ल जाउ । ई वर्ग कोनो कॉलम के बामा हाशिया के कॉलम द्वारा बढ़ाबैत अछि *| जेना, चारि कॉलम पर .col-md-offset-4चलैत अछि।.col-md-4
डिफ़ॉल्ट ग्रिड के साथ अपन सामग्री के नेस्ट करय लेल, कोनो मौजूदा कॉलम के भीतर कॉलम के एकटा नव .rowआओर सेट जोड़ू . नेस्टेड पंक्तियक मे कॉलम कें एकटा सेट शामिल होबाक चाही जे 12 या ओय सं कम कें जोड़य छै (एय कें आवश्यकता नहि छै की अहां सबटा 12 उपलब्ध कॉलम कें उपयोग करय)।.col-sm-*.col-sm-*
स्तर 1: .col-sm-9
स्तर 2: .col-xs-8 .col-sm-6
स्तर 2: .col-xs-4 .col-sm-6
स्तंभ क्रमबद्ध करब
आसानी स हमर अंतर्निहित ग्रिड कॉलम क क्रम बदलू .col-md-push-*आ .col-md-pull-*संशोधक वर्ग क संग।
चर स्तंभक कें संख्या, गटर चौड़ाई, आ मीडिया क्वेरी बिंदु कें निर्धारित करयत छै जइ पर फ्लोटिंग कॉलम कें शुरू करनाय छै. हम इनका उपयोग उपरोक्त दस्तावेजबद्ध पूर्व-निर्धारित ग्रिड वर्गों कको उत्पन्न करनके कके सलए, साथ ही साथ नीचे सूचीबद्ध कस्टम मिक्सिन कके सलए उपयोग करकते हहै |
मिक्सिन
मिक्सिन कें उपयोग ग्रिड चर कें साथ मिलकय अलग-अलग ग्रिड कॉलम कें लेल शब्दार्थ सीएसएस उत्पन्न करय कें लेल करल जाय छै.
उदाहरण प्रयोग
आप चर क॑ अपनऽ कस्टम मान म॑ संशोधित करी सकै छियै, या बस मिक्सिन क॑ ओकरऽ डिफ़ॉल्ट मान के साथ उपयोग करी सकै छियै । बीच मे अंतराल के साथ दू-स्तंभ लेआउट बनाबै लेली डिफ़ॉल्ट सेटिंग्स के उपयोग करै के उदाहरण यहाँ देलऽ गेलऽ छै ।
टाइपोग्राफी
शीर्षक
सब एचटीएमएल हेडिंग, <h1>के माध्यम स <h6>, उपलब्ध अछि। .h1through .h6classes भी उपलब्ध छै, के लेलऽ जब॑ आप कोनो हेडिंग केरऽ फॉन्ट स्टाइलिंग स॑ मेल खाबै ल॑ चाहै छियै लेकिन तभियो चाहै छियै कि आपकऽ टेक्स्ट क॑ इनलाइन प्रदर्शित करलऽ जाय ।
ज1। बूटस्ट्रैप हेडिंग
अर्धबोल्ड 36px
ज2। बूटस्ट्रैप हेडिंग
अर्धबोल्ड 30px
ज3। बूटस्ट्रैप हेडिंग
अर्धबोल्ड 24px
ज ४। बूटस्ट्रैप हेडिंग
अर्धबोल्ड 18px
ज5। बूटस्ट्रैप हेडिंग
अर्धबोल्ड 14px
ज6। बूटस्ट्रैप हेडिंग
अर्धबोल्ड 12px
<small>जेनेरिक टैग या .smallक्लास के साथ कोनो भी हेडिंग में हल्का, माध्यमिक पाठ बनाउ |
ज1। बूटस्ट्रैप शीर्षक माध्यमिक पाठ
ज2। बूटस्ट्रैप शीर्षक माध्यमिक पाठ
ज3। बूटस्ट्रैप शीर्षक माध्यमिक पाठ
ज ४। बूटस्ट्रैप शीर्षक माध्यमिक पाठ
ज5। बूटस्ट्रैप शीर्षक माध्यमिक पाठ
ज6। बूटस्ट्रैप शीर्षक माध्यमिक पाठ
शरीर प्रतिलिपि
बूटस्ट्रैप क वैश्विक डिफ़ॉल्ट 14pxfont-size अछि , जकर एकटा 1.428 अछि । ई आ सब पैराग्राफ पर लागू होइत अछि | एकरऽ अलावा, (पैराग्राफ) क॑ अपनऽ गणना करलऽ गेलऽ रेखा-ऊँचाई (डिफ़ॉल्ट रूप स॑ 10px) आधा केरऽ निचला मार्जिन प्राप्त होय छै ।line-height<body><p>
मुद्रण पैमाना चर मे दू टा कम चर पर आधारित अछि .less : @font-size-baseआ @line-height-base. पहिल बेस फॉन्ट-साइज पूरा मे प्रयोग कएल गेल अछि आ दोसर बेस लाइन-हाइट । हम अपनऽ सब प्रकार आरू बहुत कुछ केरऽ मार्जिन, पैडिंग, आरू लाइन-हाइट्स बनाबै लेली वू चर आरू कुछ सरल गणित के उपयोग करै छियै । हुनका अनुकूलित करू आ बूटस्ट्रैप अनुकूलित भ' जाइत अछि.
इनलाइन पाठ तत्व
चिह्नित पाठ
दोसर संदर्भ म॑ ओकरऽ प्रासंगिकता के कारण पाठ केरऽ रन क॑ हाइलाइट करै लेली <mark>टैग के प्रयोग करलऽ जाय ।
अहाँ मार्क टैग के प्रयोग क सकैत छीमुख्य आकर्षणमूल ग्रन्थ.
मेटाएल गेल पाठ
पाठ के ब्लॉक के संकेत करय के लेल जे हटा देल गेल अछि <del>टैग के प्रयोग करू.
पाठ केरऽ ई पंक्ति के मतलब छै कि ओकरा हटाय देलऽ गेलऽ पाठ के रूप म॑ मानलऽ जाय ।
पाठ के माध्यम से प्रहार
पाठ कें ब्लॉक कें संकेत करय कें लेल जे आब प्रासंगिक नहि छै <s>टैग कें उपयोग करूं.
पाठक एहि पाँतिकेँ आब सटीक नहि मानल जाय।
पाठ सम्मिलित
दस्तावेज मे जोड़ कें संकेत करय कें लेल <ins>टैग कें उपयोग करूं.
पाठ केरऽ ई पंक्ति के उद्देश्य दस्तावेज म॑ जोड़ के रूप म॑ मानलऽ जाय ।
रेखांकित पाठ
पाठ के रेखांकित करबाक लेल <u>टैग के प्रयोग करू।
पाठक ई पाँति रेखांकित रूपेँ रेंडर करत
हल्का शैली के साथ एचटीएमएल के डिफ़ॉल्ट जोर टैग के उपयोग करू.
छोट पाठ
इनलाइन या पाठ कें ब्लॉक कें डी-एम्फेज करय कें लेल, <small>टैग कें उपयोग पाठ कें मूल कें 85% आकार पर सेट करय कें लेल करूं. font-sizeहेडिंग तत्व नेस्टेड के लेल अपन प्राप्त करैत अछि<small> अछि |
अहाँ वैकल्पिक रूप .smallसँ कोनो <small>.
पाठ के ई पाँति के मतलब छै कि एकरा फाइन प्रिंट के रूप में मानलऽ जाय ।
साहसी
भारी फॉन्ट-वेट वाला पाठ के स्निपेट पर जोर देबय के लेल.
<b>प्रयोग करबा लेल आ <i>HTML5 मे बेझिझक महसूस करू । <b>शब्द या वाक्यांश के बिना अतिरिक्त महत्व के उजागर करय के मतलब छै जखन <i>कि बेसीतर आवाज, तकनीकी शब्द आदि के लेल छै.
संरेखण वर्ग
पाठ संरेखण वर्गों के साथ घटकों के लिए पाठ को आसानी से पुनः संरेखित करें |
वाम संरेखित पाठ।
केंद्र संरेखित पाठ।
सही संरेखित पाठ।
औचित्यपूर्ण पाठ।
कोनो लपेट पाठ नहि।
परिवर्तन वर्ग
पाठ कैपिटलाइजेशन वर्गों के साथ घटकों में पाठ को परिवर्तित करें |
लघु पाठ।
बड़का अक्षर वाला पाठ।
कैपिटल लिखित पाठ।
संक्षिप्त नाम
<abbr>होवर पर विस्तारित संस्करण क॑ दिखाबै लेली संक्षिप्त आरू संक्षिप्त नाम लेली एचटीएमएल केरऽ तत्व केरऽ शैलीबद्ध कार्यान्वयन । विशेषता वाला संक्षिप्त नामक titleकें पास हल्का बिंदीदार निचला सीमा आ होवर पर एकटा मदद कर्सर होयत छै, जे होवर पर आ सहायक प्रौद्योगिकी कें उपयोगकर्ताक कें लेल अतिरिक्त संदर्भ प्रदान करयत छै.
मूल संक्षिप्त नाम
विशेषता शब्दक संक्षिप्त रूप अछि attr .
आरंभवाद
.initialismकनि छोट फॉन्ट-साइज लेल संक्षिप्त रूप मे जोड़ू ।
एचटीएमएल कटा रोटी के बाद सबस नीक चीज अछि।
पता
निकटतम पूर्वज या सम्पूर्ण कार्य निकाय के लिये सम्पर्क जानकारी प्रस्तुत करे | सभ पाँतिकेँ सँ समाप्त कए प्रारूपणकेँ संरक्षित करू <br>।
ट्विटर, इंक 1355 मार्केट स्ट्रीट, सुइट 900 सैन फ्रांसिस्को, सीए 94103 पी: (123) 456-7890
पूरा नाम [email protected]
ब्लॉककोट्स
अपन दस्तावेज के भीतर दोसर स्रोत सं सामग्री के ब्लॉक के उद्धरण देबय लेल.
पूर्वनिर्धारित ब्लॉककोट
उद्धरण के रूप मे <blockquote>कोनो एचटीएमएल के चारू कात लपेटू । सीधा उद्धरण के लेल, हम एकटा <p>.
लोरेम इप्सम डोलोर बैठे अमेत, consectetur adipiscing अभिजात वर्ग | पूर्णांक posuere erat एक ante।
ब्लॉककोट विकल्प
एकटा मानक पर सरल भिन्नताक लेल शैली आ सामग्री परिवर्तन <blockquote>.
कोनो स्रोत के नामकरण
<footer>स्रोतक पहचान करबाक लेल एकटा जोड़ू । स्रोत कार्य के नाम में लपेटें <cite>|
लोरेम इप्सम डोलोर बैठे अमेत, consectetur adipiscing अभिजात वर्ग | पूर्णांक posuere erat एक ante।
वैकल्पिक प्रदर्शन
.blockquote-reverseसही-संरेखित सामग्रीक संग ब्लॉककोट क लेल जोड़ू .
लोरेम इप्सम डोलोर बैठे अमेत, consectetur adipiscing अभिजात वर्ग | पूर्णांक posuere erat एक ante।
सूची बनाइए
अक्रमित
एहन वस्तुक सूची जाहि मे क्रम स्पष्ट रूप सँ कोनो मायने नहि रखैत अछि ।
लोरेम इप्सम डोलोर बैठा अमेत
Consectetur एडिपिसिंग अभिजात वर्ग
पूर्णांक molestie lorem पर massa
प्रीटियम निस्ल एलिकेट में फैसिलिसिस
नुल्ला वोलुतपत अलिक्वाम वेलित
फेसेलस इअकुलिस नेक्वे
पुरुष सोडलेस अल्ट्रिसीस
वेस्टिबुलम लाओरीत पोर्टिटोर सेम
Ac tristique लिबेरो volutpat पर
फौसिबस पोर्टा लेकस फ्रिंगिला वेल
एनियन बैस अमेत एरात नुंक
एगेट पोर्टिटोर लोरेम
आदेश देल गेल
वस्तुक सूची जाहि मे क्रम स्पष्ट रूप सँ मायने रखैत अछि ।
लोरेम इप्सम डोलोर बैठा अमेत
Consectetur एडिपिसिंग अभिजात वर्ग
पूर्णांक molestie lorem पर massa
प्रीटियम निस्ल एलिकेट में फैसिलिसिस
नुल्ला वोलुतपत अलिक्वाम वेलित
फौसिबस पोर्टा लेकस फ्रिंगिला वेल
एनियन बैस अमेत एरात नुंक
एगेट पोर्टिटोर लोरेम
अनस्टाइल
सूची आइटम पर डिफ़ॉल्ट list-styleआ बामा मार्जिन हटाउ (केवल तत्काल बच्चा)। इ केवल तत्काल बच्चा सूची आइटम पर लागू होयत छै , मतलब अहां कें कोनों नेस्टेड सूची कें लेल सेहो क्लास जोड़य कें आवश्यकता होयत.
लोरेम इप्सम डोलोर बैठा अमेत
Consectetur एडिपिसिंग अभिजात वर्ग
पूर्णांक molestie lorem पर massa
प्रीटियम निस्ल एलिकेट में फैसिलिसिस
नुल्ला वोलुतपत अलिक्वाम वेलित
फेसेलस इअकुलिस नेक्वे
पुरुष सोडलेस अल्ट्रिसीस
वेस्टिबुलम लाओरीत पोर्टिटोर सेम
Ac tristique लिबेरो volutpat पर
फौसिबस पोर्टा लेकस फ्रिंगिला वेल
एनियन बैस अमेत एरात नुंक
एगेट पोर्टिटोर लोरेम
इनलाइन
सब सूची आइटम के एक लाइन पर राखू display: inline-block;आ किछु हल्का पैडिंग के संग।
लोरेम इप्सम
फेसेलस इअकुलिस
नुल्ला वोलुतपत
वर्णन
शब्दक सूची ओकर संबद्ध वर्णनक संग।
विवरण सूची
शब्द परिभाषित करबाक लेल एकटा विवरण सूची एकदम सही अछि ।
यूइसमोद
वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस euismod semper eget lacinia odio सेम nec अभिजात वर्ग |
डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।
मलेसुआदा पोर्टा
एटियाम पोर्टा सेम मलेसुआडा मैग्ना मोलिस यूइसमोड।
क्षैतिज वर्णन
लाइन मे शब्द आ वर्णन <dl>कात-कात बनाउ। डिफ़ॉल्ट <dl>s जकाँ ढेर भ' क' शुरू होइत अछि, मुदा जखन नवबार विस्तारित होइत अछि, तखन ई सभ करू.
विवरण सूची
शब्द परिभाषित करबाक लेल एकटा विवरण सूची एकदम सही अछि ।
यूइसमोद
वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस euismod semper eget lacinia odio सेम nec अभिजात वर्ग |
डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।
क्षैतिज विवरण सूची ओहि शब्द केँ काटि देत जे बहुत लम्बा अछि जे बामा कॉलम मे फिट नहि भ' सकैत अछि text-overflow. संकीर्ण व्यूपोर्ट मे, ओ डिफ़ॉल्ट स्टैक कएल गेल लेआउट मे बदलत.
संहिता
इनलाइन
कोड के इनलाइन स्निपेट के साथ लपेटें <code>|
जेना,
<section>इनलाइन के रूप मे लपेटल जेबाक चाही.
उपयोगकर्ता इनपुट
<kbd>इनपुट कें संकेत करय कें लेल कें उपयोग करूं जे आम तौर पर कीबोर्ड कें माध्यम सं दर्ज कैल जायत छै.
ई पाठ क॑ कंप्यूटर प्रोग्राम स॑ नमूना आउटपुट के रूप म॑ मानलऽ जाय के मतलब छै ।
तालिकाएँ
मूल उदाहरण
.tableबेसिक स्टाइलिंग के लेल-लाइट पैडिंग आ केवल क्षैतिज डिवाइडर- कोनो मे बेस क्लास जोड़ू <table>. ई सुपर रिडंडेंट लगै सकै छै, लेकिन कैलेंडर आरू डेट पिकर जैसनऽ अन्य प्लगइन लेली टेबल केरऽ व्यापक उपयोग क॑ देखत॑ हुअ॑ हम्मं॑ अपनऽ कस्टम टेबल स्टाइल क॑ अलग करै के विकल्प चुनल॑ छियै ।
वैकल्पिक तालिका कैप्शन।
# 2019।
पहिल नाम
उपनाम
उपयोगकर्ता नाम
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी
चिड़ै के
@ ट्विटर पर
धारीदार पंक्तियाँ
.table-stripedके भीतर कोनो तालिका पंक्ति मे ज़ेबरा-स्ट्राइपिंग जोड़बाक लेल प्रयोग करू <tbody>.
क्रॉस-ब्राउजर संगतता
धारीदार टेबल क॑ :nth-childCSS चयनकर्ता के माध्यम स॑ स्टाइल करलऽ जाय छै, जे इंटरनेट एक्सप्लोरर 8 म॑ उपलब्ध नै छै ।
# 2019।
पहिल नाम
उपनाम
उपयोगकर्ता नाम
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी
चिड़ै के
@ ट्विटर पर
सीमाबद्ध टेबल
.table-borderedतालिका आ कोष्ठकक सभ कात सीमाक लेल जोड़ू ।
# 2019।
पहिल नाम
उपनाम
उपयोगकर्ता नाम
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी
चिड़ै के
@ ट्विटर पर
पंक्तियां मंडराइत
.table-hoverएकटा के भीतर तालिका पंक्ति पर एकटा होवर स्थिति सक्षम करबाक लेल जोड़ू <tbody>.
# 2019।
पहिल नाम
उपनाम
उपयोगकर्ता नाम
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी
चिड़ै के
@ ट्विटर पर
संघनित तालिका
.table-condensedसेल पैडिंग कें आधा मे काट क टेबल कें बेसि कॉम्पैक्ट बनावा कें लेल जोड़ूं .
# 2019।
पहिल नाम
उपनाम
उपयोगकर्ता नाम
१
मार्क
ओटो
@ mdo
२
याकूब
थॉर्नटन
@मोट
३
लैरी द बर्ड
@ ट्विटर पर
सन्दर्भ कक्षाएँ
तालिका पंक्तियों या व्यक्तिगत कोशिकाओं को रंगने के लिये संदर्भ वर्गों का प्रयोग करें |
वर्ग
वर्णन
.active
कोनो विशेष पंक्ति अथवा कोष्ठक पर होवर रंग लागू करैत अछि
.success
सफल या सकारात्मक कार्य कें संकेत करयत छै
.info
तटस्थ सूचनात्मक परिवर्तन या क्रिया कें संकेत करयत छै
.warning
एकटा चेतावनी कें संकेत करएयत छै जेकरा पर ध्यान देवय कें आवश्यकता भ सकएयत छै
.danger
खतरनाक या संभावित नकारात्मक क्रिया कें संकेत करएयत छै
# 2019।
स्तंभ शीर्षक
स्तंभ शीर्षक
स्तंभ शीर्षक
१
स्तम्भ सामग्री
स्तम्भ सामग्री
स्तम्भ सामग्री
२
स्तम्भ सामग्री
स्तम्भ सामग्री
स्तम्भ सामग्री
३
स्तम्भ सामग्री
स्तम्भ सामग्री
स्तम्भ सामग्री
४
स्तम्भ सामग्री
स्तम्भ सामग्री
स्तम्भ सामग्री
५
स्तम्भ सामग्री
स्तम्भ सामग्री
स्तम्भ सामग्री
6
स्तम्भ सामग्री
स्तम्भ सामग्री
स्तम्भ सामग्री
7
स्तम्भ सामग्री
स्तम्भ सामग्री
स्तम्भ सामग्री
8
स्तम्भ सामग्री
स्तम्भ सामग्री
स्तम्भ सामग्री
9
स्तम्भ सामग्री
स्तम्भ सामग्री
स्तम्भ सामग्री
सहायक प्रौद्योगिकी के अर्थ संप्रेषित करब
तालिका पंक्ति या व्यक्तिगत कोशिका मे अर्थ जोड़य कें लेल रंग कें उपयोग केवल एकटा दृश्य संकेत प्रदान करयत छै, जे सहायक प्रौद्योगिकी कें उपयोगकर्ताक कें – जेना स्क्रीन रीडर – कें संप्रेषित नहि कैल जेतय. सुनिश्चित करूं कि रंग सं संकेत कैल गेल जानकारी या त सामग्री सं स्वयं स्पष्ट छै (संबंधित तालिका पंक्ति/कोशिका मे दृश्यमान पाठ), या वैकल्पिक साधन कें माध्यम सं शामिल कैल गेल छै, जेना कि .sr-onlyवर्ग कें साथ छिपल अतिरिक्त पाठ.
प्रतिक्रियाशील तालिकाएँ
.tableकोनों भी इन लपेट क॑ रिस्पांसिव टेबल .table-responsiveबनाबै छै ताकि ओकरा छोटऽ डिवाइसऽ प॑ (768px स॑ कम) क्षैतिज रूप स॑ स्क्रॉल करलऽ जाय सक॑ । 768px चौड़ाई स पैघ कोनो चीज पर देखबा काल एहि टेबल मे कोनो अंतर नहि देखब।
ऊर्ध्वाधर कतरन/छटना
प्रतिक्रियाशील तालिकाक कें उपयोग करय छै overflow-y: hidden, जे कोनों सामग्री कें क्लिप करय छै जे तालिका कें निचला या ऊपरी किनारे सं आगू बढ़य छै. विशेष रूप सं, इ ड्रॉपडाउन मेनू आ अन्य थर्ड पार्टी विजेट कें क्लिप ऑफ कयर सकय छै.
फायरफॉक्स आ फील्डसेट
फायरफॉक्स म॑ कुछ अजीब फील्डसेट स्टाइलिंग शामिल widthछै जे प्रतिक्रियाशील तालिका म॑ हस्तक्षेप करै छै । एकरा बिना फायरफॉक्स-विशिष्ट हैक के ओवरराइड नहि कएल जा सकैत अछि जे हम बूटस्ट्रैप मे नहि दैत छी:
व्यक्तिगत रूप नियंत्रण स्वचालित रूप स किछु वैश्विक स्टाइलिंग प्राप्त करैत अछि । सब पाठ्य <input>, <textarea>, आओर <select>तत्व क संग डिफ़ॉल्ट रूप स .form-controlसेट कएल गेल अछि. इष्टतम अंतराल कें लेल width: 100%;लेबल आ नियंत्रण कें अंदर लपेटूं ..form-group
बाम-संरेखित आओर इनलाइन-ब्लॉक नियंत्रणक लेल अपन फॉर्म मे जोड़ू .form-inline(जे एकटा ) होएब जरूरी नहि अछि . ई केवल व्यूपोर्ट क��� भीतर के फॉर्म पर लागू होयत छै जे कम सं कम 768px चौड़ाई वाला होयत छै.<form>
कस्टम चौड़ाई क आवश्यकता भ सकैत अछि
बूटस्ट्रैप मे इनपुट आओर चयन width: 100%;डिफ़ॉल्ट रूप स लागू भ गेल अछि. इनलाइन फॉर्म के भीतर, हम ओकरा रीसेट करय छी width: auto;ताकि कई नियंत्रण एकहि लाइन पर निवास क सकय. अपन लेआउट के आधार पर, अतिरिक्त कस्टम चौड़ाई के आवश्यकता भ सकैत अछि.
हमेशा लेबल जोड़ू
अगर अहां हर इनपुट के लेल लेबल नहि लगाबय छी त स्क्रीन रीडर के अहां के फॉर्म सं परेशानी होएत. .sr-onlyइ इनलाइन फॉर्मक कें लेल, अहां क्लास कें उपयोग करयत लेबल कें नुका सकय छी . सहायक प्रौद्योगिकी कें लेल लेबल उपलब्ध करावा कें आगू वैकल्पिक तरीका छै, जेना aria-label, aria-labelledbyया titleविशेषता. यदि इ मे सं कोनों मौजूद नहि छै, त स्क्रीन रीडर placeholderविशेषता कें उपयोग कें सहारा ल सकय छै, यदि मौजूद छै, मुदा ध्यान दिअ जे placeholderअन्य लेबलिंग विधियक कें प्रतिस्थापन कें रूप मे कें उपयोग कें सलाह नहि देल गेल छै.
क्षैतिज रूप
बूटस्ट्रैप कें पूर्व परिभाषित ग्रिड वर्गक कें उपयोग करूं फॉर्म मे जोड़ क फॉर्म नियंत्रणक कें लेबल आ समूहक कें क्षैतिज लेआउट मे संरेखित करय कें .form-horizontalलेल (जेकरा एकटा होना जरूरी नहि छै <form>) । ऐना करला सँ .form-groups केँ ग्रिड पंक्तिक रूप मे व्यवहार करबाक लेल बदलि जाइत अछि, तेँ .row.
समर्थित नियंत्रण
एकटा उदाहरण फॉर्म लेआउट मे समर्थित मानक फॉर्म नियंत्रणक कें उदाहरण.
इनपुट
सबसे आम रूप नियंत्रण, पाठ-आधारित इनपुट क्षेत्र। सब HTML5 प्रकार क लेल समर्थन शामिल अछि: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, आओर color.
टाइप घोषणा आवश्यक
इनपुट तखनहि पूर्ण रूप सँ स्टाइल कएल जाएत जखन ओकर typeसही ढंग सँ घोषित कएल जाएत.
इनपुट समूह
कोनों पाठ-आधारित सं पहिने आ/अथवा बाद मे एकीकृत पाठ या बटन जोड़य कें लेल <input>, इनपुट समूह घटक कें देखू .
पाठ क्षेत्र
फॉर्म नियंत्रण जे पाठक अनेक पंक्तिक समर्थन करैत अछि | rowsआवश्यकतानुसार विशेषता बदलें ।
चेकबॉक्स आ रेडियो
चेकबॉक्स कोनों सूची मे एकटा या कईटा विकल्प कें चयन करय कें लेल छै, जखन कि रेडियो बहुत सं एकटा विकल्प कें चयन करय कें लेल छै.
अक्षम चेकबॉक्स आओर रेडियो समर्थित अछि, मुदा अभिभावक क होवर पर "अनुमत नहि" कर्सर प्रदान करबाक लेल , अहाँ केँ अभिभावक मे वर्ग <label>जोड़बाक आवश्यकता होएत , , , अथवा ..disabled.radio.radio-inline.checkbox.checkbox-inline
पूर्वनिर्धारित (ढेर) 1।
इनलाइन चेकबॉक्स आ रेडियो
एकहि लाइन पर दिखाई देबय वाला नियंत्रणक कें लेल चेकबॉक्स या रेडियो कें एकटा श्रृंखला पर .checkbox-inlineया क्लास कें उपयोग करूं ..radio-inline
बिना लेबल पाठ के चेकबॉक्स आ रेडियो
यदि अहाँक भीतर कोनो पाठ नहि हेबाक चाही <label>, इनपुट ओहिना स्थिति मे अछि जेना अहाँ अपेक्षा करब. वर्तमान मे केवल नॉन-इनलाइन चेकबॉक्स आ रेडियो पर काज करैत अछि. याद राखू जे एखनो सहायक प्रौद्योगिकी कें लेल कोनों रूप मे लेबल उपलब्ध करावा (उदाहरण कें लेल, उपयोग करनाय aria-label)।
चयन करैत अछि
ध्यान रहे कि बहुत सारा नेटिव चयनित मेनू-अर्थात सफारी आरू क्रोम म॑-गोल कोना होय छै जेकरा border-radiusगुणऽ के माध्यम स॑ संशोधित नै करलऽ जाब॑ सकै छै ।
<select>विशेषता वाला नियंत्रण के लेल multiple, कई विकल्प डिफ़ॉल्ट रूप सं देखाओल गेल अछि.
स्थिर नियंत्रण
जखन अहां कें कोनों फॉर्म कें भीतर कोनों फॉर्म लेबल कें बगल मे सादा पाठ रखनाय कें जरूरत होयत छै, तखन .form-control-staticएकटा पर क्लास कें उपयोग करूं <p>.
फोकस अवस्था
हम किछु फॉर्म नियंत्रण पर डिफ़ॉल्ट outlineशैली हटाबैत छी आ box-shadowओकर जगह पर एकटा लागू करैत छी :focus.
डेमो :focusराज्य
उपरोक्त उदाहरण इनपुट हमर दस्तावेजीकरण मे कस्टम शैली क उपयोग करैत अछि जे :focusएकटा पर स्थिति क प्रदर्शित करबाक लेल .form-control.
एकहि बेर मे भीतर सभ नियंत्रण केँ अक्षम करबाक disabledलेल विशेषता केँ a मे जोड़ू .<fieldset><fieldset>
के लिंक कार्यक्षमता के बारे में चेतावनी<a>
डिफ़ॉल्ट रूप स॑, ब्राउज़र a के अंदर सब देशी फॉर्म नियंत्रण ( <input>, <select>आरू तत्व) क॑ अक्षम मानत॑, जेकरा स॑ कीबोर्ड आरू माउस दूनू क॑ ओकरा प॑ बातचीत नै करलऽ जैतै । मुदा, जँ अहाँक रूपमे तत्व सेहो शामिल अछि तँ एहि सभकेँ मात्र . जैना कि बटनऽ लेली अक्षम अवस्था के बारे म॑ खंड म॑ नोट करलऽ गेलऽ छै (आरू विशेष रूप स॑ एंकर तत्वऽ लेली उप-खंड म॑), ई CSS गुण अभी तलक मानकीकृत नै छै आरू ओपेरा 18 आरू नीचें म॑, या इंटरनेट एक्सप्लोरर 11 म॑ पूरा तरह स॑ समर्थित नै छै, आरू जीतलऽ गेलऽ छै 't कीबोर्ड उपयोगकर्ता क॑ ई लिंक क॑ फोकस या सक्रिय करै म॑ सक्षम होय स॑ रोकै छै. अतः सुरक्षित रहय लेल, एहन लिंक के अक्षम करय लेल कस्टम जावास्क्रिप्ट के प्रयोग करू.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none
क्रॉस-ब्राउजर संगतता
जखन कि बूटस्ट्रैप ई शैली सभ ब्राउज़र मे लागू करत, इंटरनेट एक्सप्लोरर 11 आओर नीचाँ disabledएकटा पर विशेषता केँ पूर्ण रूप सँ समर्थन नहि करैत अछि <fieldset>. एहि ब्राउज़र मे फील्डसेट केँ अक्षम करबाक लेल कस्टम जावास्क्रिप्ट क उपयोग करू.
केवल पठनीय राज्य
readonlyइनपुट क' मान क' संशोधन रोकबाक लेल कोनो इनपुट पर बूलियन विशेषता जोड़ू . केवल पढ़य कें लेल इनपुट हल्का देखायत छै (बस अक्षम इनपुट कें तरह), मुदा मानक कर्सर कें बरकरार राखय.
सहायता पाठ
फॉर्म नियंत्रण क लेल ब्लॉक स्तर मदद पाठ।
फॉर्म नियंत्रण क संग मदद पाठ कए जोड़ब
सहायता पाठ कें स्पष्ट रूप सं फॉर्म नियंत्रण सं जुड़ल होबाक चाही जे इ aria-describedbyविशेषता कें उपयोग करय सं संबंधित छै. अइ सं इ सुनिश्चित कैल जेतय कि सहायक प्रौद्योगिकी – जेना स्क्रीन रीडर – इ मदद पाठ कें घोषणा करतय जखन उपयोगकर्ता ध्यान केंद्रित करतय या नियंत्रण मे प्रवेश करतय.
मान्यता राज्य
बूटस्ट्रैप मे फॉर्म नियंत्रणक पर त्रुटि, चेतावनी, आ सफलता राज्यक कें लेल सत्यापन शैली शामिल छै. उपयोग करबाक लेल, मूल तत्व मे .has-warning, .has-error, अथवा जोड़ू. .has-successकोनो .control-label, .form-control, आओर .help-blockओहि तत्वक भीतर सत्यापन शैली प्राप्त करत.
सहायक प्रौद्योगिकी आ रंग-अंधा उपयोगकर्ताक कें सत्यापन अवस्था संप्रेषित करनाय
कोनों फॉर्म नियंत्रण कें स्थिति कें दर्शाबय कें लेल इ सत्यापन शैलीक कें उपयोग केवल एकटा दृश्य, रंग-आधारित संकेत प्रदान करयत छै, जे सहायक प्रौद्योगिकी कें उपयोगकर्ताक कें - जेना स्क्रीन रीडर - या रंग-अंधा उपयोगकर्ताक कें संप्रेषित नहि कैल जेतय.
सुनिश्चित करूं कि राज्य कें वैकल्पिक संकेत सेहो देल गेल छै. उदाहरण कें लेल, अहां <label>स्वयं फॉर्म नियंत्रण कें पाठ मे राज्य कें बारे मे संकेत शामिल करय सकय छी (जैना कि निम्नलिखित कोड उदाहरण मे मामला छै), एकटा ग्लिफिकॉन शामिल करय सकय छै (वर्ग कें उपयोग करयत उचित वैकल्पिक पाठ कें साथ .sr-only- ग्लिफिकॉन उदाहरण देखूं ), या एकटा प्रदान करय सं अतिरिक्त मदद पाठ अवरोध। विशेष रूप सं सहायक प्रौद्योगिकी कें लेल, अमान्य फॉर्म नियंत्रणक कें एकटा aria-invalid="true"विशेषता कें सेहो असाइन कैल जा सकय छै.
वैकल्पिक आइकन के साथ
.has-feedbackअहां के आओर दाहिना आइकन के जोड़ला सं वैकल्पिक प्रतिक्रिया आइकन सेहो जोड़ि सकय छी .
प्रतिक्रिया आइकन केवल पाठ्य <input class="form-control">तत्वों के साथ काम करते हैं |
चिह्न, लेबल, आ इनपुट समूह
बिना लेबल कें इनपुट कें लेल आ दाहिना तरफ ऐड-ऑन वाला इनपुट समूहक कें लेल प्रतिक्रिया आइकन कें मैनुअल स्थिति कें आवश्यकता छै. अहां कें दृढ़ता सं प्रोत्साहित कैल जायत छै की सुलभता कें कारण सं सबटा इनपुट कें लेल लेबल उपलब्ध करावा. जँ अहाँ लेबलकेँ प्रदर्शित करबासँ रोकए चाहैत छी तँ ओकरा .sr-onlyवर्गक संग नुकाउ. यदि अहां कें बिना लेबल कें करनाय आवश्यक छै, topत प्रतिक्रिया आइकन कें मान समायोजित करूं. इनपुट समूह क लेल, rightअपन एडॉन क चौड़ाई क आधार पर मान कए एकटा उपयुक्त पिक्सेल मान पर समायोजित करू ।
सहायक प्रौद्योगिकी कें लेल आइकन कें अर्थ संप्रेषित करनाय
इ सुनिश्चित करय कें लेल की सहायक प्रौद्योगिकी – जेना स्क्रीन रीडर – सही ढंग सं कोनों आइकन कें अर्थ संप्रेषित करय छै, अतिरिक्त छिपल पाठ कें .sr-onlyवर्ग कें साथ शामिल कैल जेबाक चाही आ स्पष्ट रूप सं फॉर्म नियंत्रण सं जुड़ल कैल जेबाक चाही जे ओकर उपयोग सं संबंधित छै aria-describedby. वैकल्पिक रूप स॑, सुनिश्चित करऽ कि अर्थ (उदाहरण के लेलऽ, ई तथ्य कि कोनों विशेष पाठ प्रविष्टि क्षेत्र के लेलऽ चेतावनी छै) क॑ कोनो अन्य रूप म॑ संप्रेषित करलऽ जाय छै, जेना कि <label>रूप नियंत्रण स॑ जुड़लऽ वास्तविक के पाठ क॑ बदलना ।
यद्यपि निम्नलिखित उदाहरणक मे पहिने सं पाठ मे स्वयं अपन-अपन रूप नियंत्रणक सत्यापन अवस्थाक उल्लेख कयल गेल <label>अछि, उपरोक्त तकनीक ( .sr-onlyपाठ आ aria-describedby) के प्रयोग सचित्र प्रयोजनक लेल शामिल कयल गेल अछि |
क्षैतिज एवं इनलाइन रूपों में वैकल्पिक आइकन
.sr-onlyछिपे लेबल के साथ वैकल्पिक आइकन
यदि अहां .sr-onlyकोनों फॉर्म नियंत्रण कें छिपाबै कें लेल क्लास कें उपयोग करय छी <label>(अन्य लेबलिंग विकल्पक कें उपयोग करय कें बजाय, जेना aria-labelविशेषता कें), त बूटस्ट्रैप एक बेर जोड़ल गेलाक कें बाद स्वचालित रूप सं आइकन कें स्थिति कें समायोजित करतय.
(सफलता)
@ .
(सफलता)
साइजिंग नियंत्रण
जेना क्लास क उपयोग कए ऊंचाई सेट करू .input-lg, आओर ग्रिड कॉलम क्लास क उपयोग कए चौड़ाई सेट करू जेना .col-lg-*.
ऊंचाई आकार देब
बटन आकार सं मेल खाएय वाला लंबा या छोट फॉर्म नियंत्रण बनाउ.
क्षैतिज रूप समूह आकार
जल्दी स आकार लेबल आओर फॉर्म नियंत्रण के भीतर .form-horizontalजोड़ क .form-group-lgया .form-group-sm.
कॉलम साइजिंग
ग्रिड कॉलम मे इनपुट कें लपेटूं, या कोनों कस्टम पैरेंट तत्व, आसानी सं वांछित चौड़ाई कें लागू करय कें लेल.
बटन के
बटन टैग
<a>कोनो , <button>, अथवा <input>तत्व पर बटन वर्गक प्रयोग करू .
सन्दर्भ-विशिष्ट प्रयोग
जबकि बटन क्लास क॑ <a>आरू तत्वऽ प॑ इस्तेमाल करलऽ जाब॑ सकै छै, हमरऽ nav आरू navbar घटकऽ के भीतर <button>केवल तत्वऽ क॑ समर्थित करलऽ जाय छै ।<button>
बटन के रूप में कार्यरत लिंक
यदि <a>तत्वक कें उपयोग बटन कें रूप मे कार्य करय कें लेल करल जाय छै – वर्तमान पृष्ठ कें भीतर कोनों अन्य दस्तावेज या खंड पर नेविगेट करय कें बजाय, पृष्ठ मे कार्यक्षमता कें ट्रिगर करय कें लेल – त ओकरा एकटा उचित role="button".
क्रॉस-ब्राउजर रेंडरिंग
एक सर्वोत्तम अभ्यास के रूप में, हम अत्यधिक अनुशंसा करते हैं कि <button>जब भी संभव हो तत्व के उपयोग करलऽ जाय ताकि मिलान क्रॉस-ब्राउजर रेंडरिंग सुनिश्चित करलऽ जाय सक॑ ।
अन्य बातऽ के अलावा, फायरफॉक्स <30 म॑ एगो बगline-height छै जे हमरा of -आधारित बटनऽ क॑ सेट करै स॑ रोकै छै <input>, जेकरा स॑ ई फायरफॉक्स प॑ अन्य बटनऽ के ऊंचाई स॑ ठीक-ठीक मेल नै खाबै छै ।
विकल्प
उपलब्ध बटन वर्गक मे सं कोनों कें उपयोग करूं ताकि जल्दी सं एकटा स्टाइल बटन बना सकय.
सहायक प्रौद्योगिकी के अर्थ संप्रेषित करब
बटन मे अर्थ जोड़य कें लेल रंग कें उपयोग करनाय केवल एकटा दृश्य संकेत प्रदान करय छै, जे सहायक प्रौद्योगिकी कें उपयोगकर्ताक कें – जेना स्क्रीन रीडर – कें संप्रेषित नहि कैल जेतय. सुनिश्चित करूं कि रंग सं संकेत कैल गेल जानकारी या त सामग्री सं ही स्पष्ट छै (बटन कें दृश्यमान पाठ), या वैकल्पिक साधन कें माध्यम सं शामिल कैल गेल छै, जेना कि .sr-onlyवर्ग कें साथ छिपल अतिरिक्त पाठ.
आकार के
फैंसी पैघ या छोट बटन? अतिरिक्त आकारक लेल .btn-lg, .btn-sm, अथवा जोड़ू ।.btn-xs
ब्लॉक स्तर बटन बनाउ-ओ जे कोनो अभिभावक कें पूरा चौड़ाई मे फैलल छै- जोड़ क .btn-block.
सक्रिय अवस्था
सक्रिय रहला पर बटन दबाएल (गहरे रंगक पृष्ठभूमि, गहरे रंगक सीमा, आ इनसेट छायाक संग) देखाएत. <button>तत्वक लेल , ई :active. तत्वक लेल <a>, ई .active. मुदा, यदि अहां कें सक्रिय अवस्था कें प्रोग्रामेटिक रूप सं प्रतिलिपि बनावा कें जरूरत होएयत छै त अहां s .activeपर उपयोग कयर सकय छी <button>(आ विशेषता कें शामिल करय सकय छी).aria-pressed="true"
बटन तत्व
जोड़य के जरूरत नहिं :activeकिएक त ई छद्म वर्ग अछि, मुदा जं अहां के ओही रूप के जबरदस्ती करय के जरूरत अछि तं आगू जाउ आओर जोड़ू .active.
यदि आहाँ disabledविशेषता क॑ a म॑ जोड़ै छियै <button>त॑ इंटरनेट एक्सप्लोरर 9 आरू नीचें पाठ क॑ एक गंदा टेक्स्ट-शैडो के साथ ग्रे रेंडर करतै जेकरा हम्मं॑ ठीक नै करी सकै छियै ।
हम .disabledएतय उपयोगिता वर्ग के रूप में उपयोग करैत छी, सामान्य वर्ग के समान .active, अतः कोनो उपसर्ग के आवश्यकता नै अछि |
लिंक कार्यक्षमता चेतावनी
ई वर्ग s pointer-events: noneकेरऽ लिंक कार्यक्षमता क॑ अक्षम करै के कोशिश करै लेली उपयोग करै छै <a>, लेकिन वू CSS गुण अभी तलक मानकीकृत नै छै आरू ओपेरा 18 आरू नीचें, या इंटरनेट एक्सप्लोरर 11 म॑ पूरा तरह स॑ समर्थित नै छै.एकरा अलावा, ब्राउज़र म॑ भी जे समर्थन करै छै pointer-events: none, कीबोर्ड नेविगेशन अप्रभावित रहतै, मतलब कि दृष्टिवान कीबोर्ड उपयोगकर्ता आरू सहायक प्रौद्योगिकी के उपयोगकर्ता अखनी भी ई लिंक क सक्रिय करै म॑ सक्षम होतै । अतः सुरक्षित रहय लेल, एहन लिंक के अक्षम करय लेल कस्टम जावास्क्रिप्ट के प्रयोग करू.
छवियाँ
प्रतिक्रियाशील छवि
.img-responsiveबूटस्ट्रैप 3 मे छवि कें क्लास कें जोड़य कें माध्यम सं रिस्पांसिव-फ्रेंडली बनायल जा सकय छै . ई लागू होइत अछि max-width: 100%;, height: auto;आओर display: block;छवि पर ताकि ई मूल तत्व पर नीक जकाँ स्केल भ' सकय.
छवि क' केन्द्रित करबाक लेल जे .img-responsiveवर्ग क' उपयोग करैत अछि, क' .center-blockबदला मे प्रयोग करू .text-center. उपयोग कें बारे मे बेसि जानकारी कें लेल सहायक वर्गक खंड देखूं ..center-block
एसवीजी छवि आ आईई 8-10
इंटरनेट एक्सप्लोरर 8-10 म॑, SVG छवि के साथ .img-responsiveअसमान आकार के छै. एकरा ठीक करबाक लेल width: 100% \9;जतय आवश्यक हो ओतय जोड़ू। बूटस्ट्रैप एकरा स्वचालित रूप स लागू नहि करैत अछि कियाकि इ अन्य छवि प्रारूप मे जटिलता पैदा करैत अछि ।
छवि के आकार
<img>कोनो भी प्रोजेक्ट में छवि के आसानी स स्टाइल करय लेल कोनो तत्व में क्लास जोड़ू .
क्रॉस-ब्राउजर संगतता
ध्यान राखू जे इंटरनेट एक्सप्लोरर 8 मे गोल कोनाक समर्थनक अभाव अछि ।
सहायक कक्षाएँ
सन्दर्भ रंग
मुट्ठी भर जोर उपयोगिता वर्ग के साथ रंग के माध्यम से अर्थ संप्रेषित | ई सब लिंक पर सेहो लागू भ सकैत अछि आ होवर पर अन्हार भ' जायत ठीक ओहिना जेना हमर डिफ़ॉल्ट लिंक स्टाइल.
Donec ullamcorper nulla गैर मेटस नीलामी fringilla।
विशिष्टता से निपटना
कखनो काल दोसर चयनकर्ताक विशिष्टताक कारणेँ जोर वर्ग लागू नहि कएल जा सकैत अछि । अधिकांश मामला मे, एकटा पर्याप्त समाधान अछि अपन पाठ <span>केँ कक्षाक संग a मे लपेटब.
सहायक प्रौद्योगिकी के अर्थ संप्रेषित करब
अर्थ जोड़य कें लेल रंग कें उपयोग करनाय केवल एकटा दृश्य संकेत प्रदान करय छै, जे सहायक प्रौद्योगिकी कें उपयोगकर्ताक कें – जेना स्क्रीन रीडर – कें संप्रेषित नहि कैल जेतय. सुनिश्चित करूं कि रंग सं संकेत कैल गेल जानकारी या त सामग्री सं ही स्पष्ट छै (सन्दर्भ रंगक कें उपयोग केवल अर्थ कें मजबूत करय कें लेल कैल जायत छै जे पाठ/मार्कअप मे पइहने सं मौजूद छै), या वैकल्पिक साधन कें माध्यम सं शामिल कैल गेल छै, जेना कि .sr-onlyवर्ग कें साथ नुकायल अतिरिक्त पाठ .
संदर्भ पृष्ठभूमि
संदर्भ पाठ रंग वर्ग के समान, आसानी स कोनो तत्व के पृष्ठभूमि कोनो संदर्भ वर्ग पर सेट करू | एंकर घटक होवर पर अन्हार भ' जायत, ठीक ओहिना जेना टेक्स्ट क्लास.
Donec ullamcorper nulla गैर मेटस नीलामी fringilla।
विशिष्टता से निपटना
कखनो काल दोसर चयनकर्ता के विशिष्टता के कारण संदर्भ पृष्ठभूमि वर्ग लागू नै भ सकैत अछि | किछु मामला मे, एकटा पर्याप्त वर्कअराउंड अछि अपन तत्व क सामग्री <div>कए क्लास क संग a मे लपेटब ।
सहायक प्रौद्योगिकी के अर्थ संप्रेषित करब
जेना कि संदर्भ रंगक संग होइत छैक , ई सुनिश्चित करू जे रंगक माध्यमे कोनो अर्थक संप्रेषण सेहो एहन प्रारूप मे कयल जाय जे विशुद्ध रूप सँ प्रस्तुतिकरण नहि हो |
बंद आइकन
मोडल आ अलर्ट जैना सामग्री कें खारिज करय कें लेल जेनेरिक बंद आइकन कें उपयोग करूं.
कैरेट्स
ड्रॉपडाउन कार्यक्षमता आ दिशा कें संकेत करय कें लेल कैरेट कें उपयोग करूं. ध्यान राखू जे डिफ़ॉल्ट कैरेट ड्रॉपअप मेनू मे स्वचालित रूप सँ रिवर्स भ ' जायत .
त्वरित तैरता अछि
कोनो तत्वकेँ कोनो क्लासक संग बामा वा दाहिना दिस फ्लोट करू। !importantविशिष्टता कें मुद्दा सं बचय कें लेल शामिल कैल गेल छै. कक्षाक कें उपयोग मिक्सिन कें रूप मे सेहो कैल जा सकय छै.
नवबार मे प्रयोगक लेल नहि
नवबार मे घटक कें उपयोगिता वर्गक कें साथ संरेखित करय कें लेल, एकर बजाय .navbar-leftया कें उपयोग करूं. विवरणक लेल नवबार डॉक्स देखू ..navbar-right
केंद्र सामग्री ब्लॉक
एकटा तत्वकेँ सेट करू display: blockआ माध्यमसँ केन्द्र करू margin. मिक्सिन आ क्लास के रूप मे उपलब्ध अछि।
क्लियरफिक्स
मूल तत्व मेfloat जोड़ि क s आसानी स साफ करू . निकोलस गैलाघेर द्वारा लोकप्रिय कयल गेल माइक्रो क्लियरफिक्स के उपयोग करैत अछि | मिक्सिन के रूप मे सेहो प्रयोग कएल जा सकैत अछि ।.clearfix
सामग्री देखाएब आ नुकाएब
कोनों तत्व क॑ दिखाबै या छिपाबै लेली मजबूर करलऽ जाय ( स्क्रीन रीडर लेली सहित.show ) आरू .hiddenवर्गऽ के उपयोग स॑ । ई वर्ग !importantविशिष्टता संघर्ष सं बचबाक लेल उपयोग करैत अछि, ठीक ओहिना जेना त्वरित फ्लोट . इ केवल ब्लॉक लेवल टॉगलिंग कें लेल उपलब्ध छै. एकरऽ उपयोग मिक्सिन के रूप म॑ भी करलऽ जाब॑ सकै छै ।
.hideउपलब्ध छै, मुदा इ हमेशा स्क्रीन रीडर कें प्रभावित नहि करएयत छै आ v3.0.1 कें रूप मे अप्रचलित छै. प्रयोग करू .hiddenवा .sr-onlyएकर बदला मे।
एकरऽ अलावा, एकरऽ .invisibleउपयोग केवल कोनों तत्व केरऽ दृश्यता क॑ टॉगल करै लेली करलऽ जाब॑ सकै छै, मतलब ओकरऽ displayसंशोधित नै करलऽ गेलऽ छै आरू तत्व अभी भी दस्तावेज केरऽ प्रवाह क॑ प्रभावित करी सकै छै ।
स्क्रीन रीडर आ कीबोर्ड नेविगेशन सामग्री
स्क्रीन रीडर केँ छोड़ि कए सभ डिवाइस मे कोनो तत्व केँ नुकाउ .sr-only. .sr-onlyतत्व क॑ जब॑ फोकस करलऽ जाय छै त॑ ओकरा फेर स॑ दिखाबै लेली के साथ संयोजन करलऽ .sr-only-focusableजाय (जैना कि केवल कीबोर्ड-केवल उपयोगकर्ता द्वारा) । सुलभता सर्वोत्तम प्रथाक कें पालन करय कें लेल आवश्यक . मिक्सिन के रूप मे सेहो प्रयोग कएल जा सकैत अछि ।
छवि प्रतिस्थापन
.text-hideकोनों तत्व कें पाठ सामग्री कें पृष्ठभूमि छवि सं बदलय मे मदद करय कें लेल वर्ग या मिक्सिन कें उपयोग करूं .
उत्तरदायी उपयोगिताएँ
तेजी सं मोबाइल-अनुकूल विकास कें लेल, मीडिया क्वेरी कें माध्यम सं डिवाइस कें द्वारा सामग्री कें दिखावा आ छिपावय कें लेल इ उपयोगिता वर्गक कें उपयोग करूं. प्रिंट करय कें समय सामग्री कें टॉगल करय कें लेल उपयोगिता वर्गक कें सेहो शामिल कैल गेल छै.
एहि सभक उपयोग सीमित आधार पर करबाक प्रयास करू आ एकहि साइट के बिल्कुल अलग संस्करण बनेबा सं बचू. बल्कि, प्रत्येक डिवाइस कें प्रस्तुति कें पूरक कें लेल एकर उपयोग करूं.
उपलब्ध कक्षाएँ
व्यूपोर्ट ब्रेकपॉइंट कें पार सामग्री कें टॉगल करय कें लेल उपलब्ध वर्गक कें एकल या संयोजन कें उपयोग करूं.
अतिरिक्त छोट-छोट उपकरणफोन (<768px) 1।
छोट-छोट उपकरणगोलियाँ (≥768px)।
मध्यम उपकरणडेस्कटॉप (≥992px) 1।
बड़े-बड़े उपकरणडेस्कटॉप (≥1200px) 1।
.visible-xs-*
दृश्यमान
नुकाएल
नुकाएल
नुकाएल
.visible-sm-*
नुकाएल
दृश्यमान
नुकाएल
नुकाएल
.visible-md-*
नुकाएल
नुकाएल
दृश्यमान
नुकाएल
.visible-lg-*
नुकाएल
नुकाएल
नुकाएल
दृश्यमान
.hidden-xs
नुकाएल
दृश्यमान
दृश्यमान
दृश्यमान
.hidden-sm
दृश्यमान
नुकाएल
दृश्यमान
दृश्यमान
.hidden-md
दृश्यमान
दृश्यमान
नुकाएल
दृश्यमान
.hidden-lg
दृश्यमान
दृश्यमान
दृश्यमान
नुकाएल
v3.2.0 कें रूप मे, .visible-*-*प्रत्येक ब्रेकपॉइंट कें लेल वर्ग तीन भिन्नता मे आबै छै, एकटा displayनिम्नलिखित प्रत्येक CSS गुण मान कें लेल.
कक्षाओं के समूह
सीएसएसdisplay
.visible-*-block
display: block;
.visible-*-inline
display: inline;
.visible-*-inline-block
display: inline-block;
अतः, अतिरिक्त छोट ( xs) स्क्रीन के लेल उदाहरण के लेल, उपलब्ध .visible-*-*वर्ग अछि: .visible-xs-block, .visible-xs-inline, आ .visible-xs-inline-block.
वर्ग .visible-xs, .visible-sm, .visible-md, आओर .visible-lgसेहो मौजूद अछि, मुदा v3.2.0 क रूप मे अप्रचलित अछि . वे लगभग , के बराबर हैं .visible-*-block, सिवाय टॉगलिंग <table>-संबंधित तत्वों के लिए अतिरिक्त विशेष प्रकरणों के साथ |
प्रिंट कक्षाएँ
नियमित प्रतिक्रियाशील वर्गक कें समान, प्रिंट कें लेल सामग्री कें टॉगल करय कें लेल एकर उपयोग करूं.
वर्ग .visible-printसेहो मौजूद अछि मुदा v3.2.0 क रूप मे अप्रचलित अछि. ई लगभग , के बराबर छै .visible-print-block, सिवाय <table>-संबंधित तत्व के लेलऽ अतिरिक्त विशेष मामला के साथ ।
परीक्षण केस
उत्तरदायी उपयोगिता वर्गक कें परीक्षण करय कें लेल अपन ब्राउज़र कें आकार बदलूं या अलग-अलग डिवाइसक पर लोड करूं.
पर देखाइत अछि...
हरियर चेकमार्क संकेत करयत छै की तत्व अहां कें वर्तमान व्यूपोर्ट मे दिखाई द रहल छै.
अतिरिक्त छोट✔ x-sma पर दिखाई दे रहा है
छोट✔ छोट पर देखाइत अछि
माध्यम✔ माध्यम पर दृश्यमान
नमहर✔ बड़े पर दिखाई दे |
अतिरिक्त छोट आ छोट✔ x-छोट आ छोट पर देखाइत अछि
मध्यम आ पैघ✔ मध्यम आ पैघ पर देखबा मे अबैत अछि
अतिरिक्त छोट आ मध्यम✔ x-छोटे एवं मध्यम पर दिखाई दे रहे |
छोट-पैघ✔ छोट आ पैघ पर देखबा मे अबैत अछि
अतिरिक्त छोट आ पैघ✔ x-छोट आ पैघ पर देखाइत अछि
छोट आ मध्यम✔ छोट आ मध्यम पर देखबा मे अबैत अछि
पर छिपल अछि...
एतय, हरियर चेकमार्क इहो दर्शाबैत अछि जे तत्व अहाँक वर्तमान व्यूपोर्ट मे नुकायल अछि ।
अतिरिक्त छोट✔ x-small पर छिपा
छोट✔ छोट पर छिपल
माध्यम✔ माध्यम पर छिपल
नमहर✔ बड़े पर छिपा
अतिरिक्त छोट आ छोट✔ x-छोट आ छोट पर छिपल अछि
मध्यम आ पैघ✔ मध्यम आ पैघ पर छिपल
अतिरिक्त छोट आ मध्यम✔ x-छोट एवं मध्यम पर छिपा
छोट-पैघ✔ छोट-बड़ पर छिपल
अतिरिक्त छोट आ पैघ✔ x-छोट आ पैघ पर छिपल अछि
छोट आ मध्यम✔ छोट आ मध्यम पर छिपल
कम प्रयोग करब
बूटस्ट्रैप केरऽ सीएसएस लेस प॑ बनलऽ छै, जे एक प्रीप्रोसेसर छै जेकरऽ अतिरिक्त कार्यक्षमता छै जेना कि चर, मिक्सिन, आरू सीएसएस संकलित करै लेली फंक्शन. जे लोग हमरऽ संकलित CSS फाइलऽ के बजाय स्रोत Less फाइलऽ के उपयोग करना चाहै छै, वू लोगऽ न॑ हमनी पूरा फ्रेमवर्क म॑ उपयोग करलऽ जाय वाला अनेक चर आरू मिक्सिनऽ के उपयोग करी सकै छै ।
बूटस्ट्रैप कें उपयोग कम सं कम दू तरीका सं कैल जा सकय छै: संकलित सीएसएस कें साथ या स्रोत कम फाइल कें साथ. कम फाइल कें संकलित करय कें लेल, प्रारंभ करनाय खंड सं परामर्श करूं लेल, आवश्यक कमांड कें चलावय कें लेल अपन विकास वातावरण कें सेटअप करय कें लेल
थर्ड पार्टी संकलन उपकरण बूटस्ट्रैप के साथ काज क सकैत अछि, मुदा ओ हमर कोर टीम द्वारा समर्थित नहि अछि.
चर
चर क॑ पूरा प्रोजेक्ट म॑ रंग, स्पेसिंग, या फॉन्ट स्टैक जैसनऽ आम तौर प॑ इस्तेमाल करलऽ जाय वाला मान क॑ केंद्रीकृत आरू साझा करै के तरीका के रूप म॑ इस्तेमाल करलऽ जाय छै । एकटा पूर्ण टूटबाक लेल, कृपया देखू अनुकूलक .
रंग
आसानी स दूटा रंग योजना क उपयोग करू: ग्रेस्केल आ सिमेंटिक। ग्रेस्केल रंग कारी रंग कें आमतौर पर उपयोग कैल जाय वाला शेड्स कें त्वरित पहुंच प्रदान करय छै जखन कि शब्दार्थ मे सार्थक संदर्भ मूल्यक कें लेल सौंपल गेल विभिन्न रंग शामिल छै.
एहि मे सँ कोनो रंग चर केँ जेना अछि तेना प्रयोग करू अथवा ओकरा अपन प्रोजेक्ट लेल बेसी सार्थक चर मे पुनः असाइन करू |
मचान
अपनऽ साइट केरऽ कंकाल केरऽ प्रमुख तत्वऽ क॑ जल्दी स॑ अनुकूलित करै लेली मुट्ठी भर चर ।
लिंक
अपन लिंक के मात्र एकटा मान के संग सही रंग स आसानी स स्टाइल करू।
ध्यान रहे कि @link-hover-colorएक फंक्शन के उपयोग करै छै, जे कम स॑ एगो आरू भयानक टूल छै, जेकरा स॑ स्वचालित रूप स॑ सही होवर रंग बनाबै छै । अहाँ darken, lighten, saturate, आ desaturate.
टाइपोग्राफी
किछु त्वरित चर के संग अपन टाइपफेस, टेक्स्ट साइज, लीडिंग, आओर बहुत किछु आसानी सं सेट करू. बूटस्ट्रैप आसान टाइपोग्राफिक मिक्सिन प्रदान करय कें लेल इ सब कें उपयोग सेहो करय छै.
पूरा बूटस्ट्रैप मे घटक आम मान सेट करय कें लेल किछ डिफ़ॉल्ट चर कें उपयोग करय छै. एतय सबसँ बेसी प्रयोग कयल गेल अछि।
विक्रेता मिक्सिन
विक्रेता मिक्सिन मिक्सिन छै जे अहां कें संकलित सीएसएस मे सबटा प्रासंगिक विक्रेता उपसर्ग कें शामिल करयत कईटा ब्राउज़र कें समर्थन करय मे मदद करतय.
बॉक्स-साइजिंग
एकल मिक्सिन के साथ अपन घटक के बॉक्स मॉडल के रीसेट करू. संदर्भ के लेल, मोजिला के ई सहायक लेख देखू .
मिक्सिन v3.2.0 कें रूप मे अप्रचलित छै, ऑटोप्रिफिक्सर कें परिचय कें साथ. बैकवर्ड-संगतता कें संरक्षित करय कें लेल, बूटस्ट्रैप बूटस्ट्रैप v4 तइक आंतरिक रूप सं मिक्सिन कें उपयोग जारी रखतय.
गोल-गोल कोने
आइ सभ आधुनिक ब्राउज़र गैर-उपसर्ग border-radiusगुणकेँ समर्थन करैत अछि । ऐन्हऽ म॑ .border-radius()मिक्सिन नै छै, लेकिन बूटस्ट्रैप म॑ कोनो वस्तु केरऽ कोनो खास तरफ दू कोना क॑ जल्दी स॑ गोल करै लेली शॉर्टकट जरूर शामिल छै ।
बॉक्स (ड्रॉप) छाया
अगर अहां के लक्षित दर्शक नवीनतम आओर महान ब्राउज़र आओर डिवाइस के इस्तेमाल करि रहल छथिन्ह तं बस एहि box-shadowसंपत्ति के अपन दम पर इस्तेमाल जरूर करिऔ. यदि अहां कें पुरान एंड्रॉयड (प्री-v4) आ आईओएस डिवाइस (प्री-आईओएस 5) कें लेल समर्थन कें जरूरत छै, त आवश्यक कें उठावय कें लेल पदावनत मिक्सिन कें उपयोग करूं-webkit त॑ आवश्यक उपसर्ग
मिक्सिन v3.1.0 के रूप म॑ अप्रचलित छै, कैन्हेंकि बूटस्ट्रैप आधिकारिक तौर प॑ पुरानऽ प्लेटफॉर्म क॑ समर्थन नै करै छै जे मानक गुण क॑ समर्थन नै करै छै । बैकवर्ड-संगतता कें संरक्षित करय कें लेल, बूटस्ट्रैप बूटस्ट्रैप v4 तइक आंतरिक रूप सं मिक्सिन कें उपयोग जारी रखतय.
अपनऽ बॉक्स शैडो म॑ रंगऽ के प्रयोग जरूर करलऽ जाय rgba()ताकि वू बैकग्राउंड के साथ यथासंभव निर्बाध रूप स॑ घुल॑ सक॑ ।
संक्रमण
लचीलापन के लिये कई मिक्सिन। एकटा सं सबटा संक्रमण जानकारी सेट करू, अथवा आवश्यकतानुसार अलग विल���ब आ अवधि निर्दिष्ट करू.
मिक्सिन v3.2.0 के रूप में अप्रचलित छै, ऑटोप्रिफिक्सर के परिचय के साथ. बैकवर्ड-संगतता कें संरक्षित करय कें लेल, बूटस्ट्रैप बूटस्ट्रैप v4 तइक आंतरिक रूप सं मिक्सिन कें उपयोग जारी रखतय.
परिवर्तन
कोनो वस्तुकेँ घुमाउ, स्केल करू, अनुवाद करू (चलाउ), वा तिरछा करू।
मिक्सिन v3.2.0 के रूप में अप्रचलित छै, ऑटोप्रिफिक्सर के परिचय के साथ. बैकवर्ड-संगतता कें संरक्षित करय कें लेल, बूटस्ट्रैप बूटस्ट्रैप v4 तइक आंतरिक रूप सं मिक्सिन कें उपयोग जारी रखतय.
एनीमेशन
एक घोषणा मे CSS3 कें सब एनीमेशन गुणक कें उपयोग करय कें लेल एकटा मिक्सिन आ व्यक्तिगत गुणक कें लेल अन्य मिक्सिन.
मिक्सिन v3.2.0 के रूप में अप्रचलित छै, ऑटोप्रिफिक्सर के परिचय के साथ. बैकवर्ड-संगतता कें संरक्षित करय कें लेल, बूटस्ट्रैप बूटस्ट्रैप v4 तइक आंतरिक रूप सं मिक्सिन कें उपयोग जारी रखतय.
अस्पष्टता
सब ब्राउज़र क लेल अस्पष्टता सेट करू आओर filterIE8 क लेल एकटा फॉलबैक प्रदान करू.
प्लेसहोल्डर पाठ
प्रत्येक क्षेत्र कें भीतर फॉर्म नियंत्रणक कें लेल संदर्भ प्रदान करूं.
स्तंभ
एकल तत्व के भीतर CSS के माध्यम स कॉलम उत्पन्न करू।
ढाल
कोनो दू रंग के आसानी स बैकग्राउंड ग्रेडिएंट में बदलू। अधिक उन्नत होउ आ एकटा दिशा निर्धारित करू, तीन रंगक प्रयोग करू, वा रेडियल ढालक प्रयोग करू । एकटा मिक्सिन के संग अहां के ओ सभ उपसर्ग वाला सिंटैक्स मिलत जे अहां के जरूरत होएत.
आप एक मानक दू-रंग, रेखीय ढाल के कोण भी निर्दिष्ट कर सकते हैं:
जं नाई-धारी स्टाइल ढाल चाही तं से सेहो आसान अछि. बस एकटा रंग निर्दिष्ट करू आ हम एकटा पारभासी उज्जर पट्टी के ओवरले करब।
एंटी अप करू आ ओकर बदला मे तीन रंगक प्रयोग करू। पहिल रंग, दोसर रंग, दोसर रंगक रंग स्टॉप (25% सन प्रतिशत मान), आओर तेसर रंग एहि मिक्सिन सभसँ सेट करू:
हेड अप! यदि अहां कें कहियो कोनों ढाल कें हटावय कें जरूरत होएयत छै, त filterअहां कें द्वारा जोड़ल गेल कोनों आईई-विशिष्ट कें हटानाय सुनिश्चित करूं. .reset-filter()बगल में मिक्सिन के प्रयोग क क अहां से क सकय छी background-image: none;.
उपयोगिता मिक्सिन
उपयोगिता मिक्सिन मिक्सिन छै जे अन्यथा असंबंधित सीएसएस गुणक कें संयोजन करयत कोनों विशिष्ट लक्ष्य या कार्य प्राप्त करयत छै.
क्लियरफिक्स
class="clearfix"कोनो तत्व मे जोड़ब बिसरि जाउ आ एकर बदला मे .clearfix()जतय उचित हो मिक्सिन मिला दियौ । निकोलस गैलाघेर स माइक्रो क्लियरफिक्स क उपयोग करैत अछि .
क्षैतिज केन्द्रीकरण
जल्दी कोनो तत्व के ओकर मूल के भीतर केंद्रित करू। आवश्यकता अछि widthवा max-widthसेट करबाक अछि।
साइजिंग सहायक
कोनो वस्तुक आयाम बेसी आसानीसँ निर्दिष्ट करू।
आकार बदलने योग्य पाठ क्षेत्र
कोनों textarea, या कोनों अन्य तत्व कें लेल आकार बदलय विकल्प कें आसानी सं कॉन्फ़िगर करूं. सामान्य ब्राउज़र व्यवहार ( both) क' लेल पूर्वनिर्धारित अछि.
पाठ काटना
एकल मिक्सिन के साथ दीर्घवृत्त के साथ पाठ को आसानी से काटें | तत्व हो blockवा inline-blockसमतल हेबाक आवश्यकता अछि।
रेटिना छवियाँ
दूटा छवि पथ आओर @1x छवि आयाम निर्दिष्ट करू, आओर बूटस्ट्रैप एकटा @2x मीडिया क्वेरी प्रदान करत. यदि अहां कें पास सेवा करय कें लेल बहुत सं छवि छै, त एकटा मीडिया क्वेरी मे अपन रेटिना छवि सीएसएस कें मैन्युअल रूप सं लिखय पर विचार करूं.
सस्स का प्रयोग
जखन कि बूटस्ट्रैप लेस पर बनल अछि, एकर आधिकारिक सैस पोर्ट सेहो अछि . हम एकरा अलग GitHub भंडार मे रखरखाव करय छी आ एकटा रूपांतरण स्क्रिप्ट सं अपडेट संभालैत छी.
की शामिल अछि
चूँकि सास पोर्ट म॑ अलग रेपो छै आरू कुछ अलग दर्शकऽ क॑ सेवा दै छै, ई लेली ई प्रोजेक्ट केरऽ सामग्री मुख्य बूटस्ट्रैप प्रोजेक्ट स॑ बहुत अलग छै । इ सुनिश्चित करयत छै की सास पोर्ट बेसि सं बेसि सास आधारित सिस्टम कें साथ संगत छै.
Sass क लेल बूटस्ट्रैप कए इंस्टॉल आओर उपयोग करबाक जानकारी क लेल, GitHub रिपोजिटरी readme स परामर्श करू . इ सब सं अद्यतन स्रोत छै आ रेल, कम्पास, आ मानक सास परियोजनाक कें साथ उपयोग कें लेल जानकारी शामिल छै.