बूटस्ट्रैप में दर्जनों रियूजेबल कंपोनेंट बनावल गइल बा जेह से नेविगेशन, अलर्ट, पोपोवर, आ अउरी बहुत कुछ उपलब्ध करावल जा सके ला।
Rdio से प्रेरित अल्ट्रा सरल आ न्यूनतम स्टाइल वाला पेजिनेशन, ऐप आ खोज परिणाम खातिर बढ़िया बा। बड़ ब्लॉक के छूटल मुश्किल बा, आसानी से स्केल करे लायक बा, अवुरी बड़ क्लिक एरिया उपलब्ध करावेला।
लिंक अनुकूलन योग्य होला आ सही क्लास के साथ कई गो परिस्थिति में काम करेला। .disabled
अनक्लिक करे लायक लिंक .active
खातिर आ वर्तमान पन्ना खातिर।
पृष्ठांकन लिंक सभ के संरेखण बदले खातिर दू गो वैकल्पिक वर्ग सभ में से कौनों एक के जोड़ीं: .pagination-centered
आ .pagination-right
.
डिफ़ॉल्ट पन्ना बनावे वाला घटक लचीला होला आ कई गो भिन्नता सभ में काम करे ला।
एगो में लपेटल <div>
, पृष्ठांकन बस एगो <ul>
.
- <div वर्ग = "पृष्ठांकन" > बा
- <उल> के बा
- <li><a href = "#" > पिछला </a></li> बा
- <ली वर्ग = "सक्रिय" > के बा
- <a href = "#" > 1 </a> के बा
- </li> के बा
- <li><a href = "#" > 2 </a></li> के बा
- <li><a href = "#" > 3 </a></li> के बा
- <li><a href = "#" > 4 </a></li> के बा
- <li><a href = "#" > अगिला </a></li> बा
- </ul> के बा
- </div> के बा
पेजर घटक हल्का मार्कअप आ अउरी हल्का शैली सभ के साथ सरल पन्नाकरण कार्यान्वयन सभ खातिर लिंक सभ के सेट हवे। ब्लॉग भा पत्रिका जइसन साधारण साइट खातिर ई बहुते बढ़िया बा.
डिफ़ॉल्ट रूप से, पेजर लिंक सभ के केंद्रित करे ला।
- <ul क्लास = "पेजर" > के बा
- <ली> के बा
- <a href = "#" > पिछला </a> बा
- </li> के बा
- <ली> के बा
- <a href = "#" > अगिला </a> बा
- </li> के बा
- </ul> के बा
एकरे अलावा, आप हर लिंक के साइड सभ में संरेखित क सकत बानी:
- <ul क्लास = "पेजर" > के बा
- <li class = "पिछला" > के बा
- <a href = "#" > &larr के बारे में जानकारी दिहल गइल बा; पुरान </a> के बा
- </li> के बा
- <li वर्ग = "अगला" > बा
- <a href = "#" > नया → </a> के बा
- </li> के बा
- </ul> के बा
लेबल लगावल गइल बा | मार्कअप कइल गइल बा |
---|---|
बाकी | <span class="label">Default</span> |
सफलता | <span class="label label-success">Success</span> |
चेतावनी | <span class="label label-warning">Warning</span> |
महत्वपूर्ण | <span class="label label-important">Important</span> |
जानकारी दिहल गइल बा | <span class="label label-info">Info</span> |
बूटस्ट्रैप एगो हल्का, लचीला घटक देला जवना के हीरो यूनिट कहल जाला जवन रउरा साइट पर सामग्री देखावेला. मार्केटिंग आ सामग्री से भरपूर साइट पर ई बढ़िया काम करेला.
आपन सामग्री के div
लाइक में लपेटीं ताकि:
- <div वर्ग = "हीरो-इकाई" > के बा
- <h1> शीर्षक </h1> बा
- <p> टैगलाइन </p> के बा
- <p> के बा
- <एक वर्ग = " बीटीएन बीटीएन-प्राथमिक बीटीएन-बड़े" >
- अउरी जाने खातिर देखीं
- </a> के बा
- </p>के बा
- </div> के बा
ई एगो साधारण हीरो यूनिट हवे, फीचर सामग्री भा जानकारी पर अतिरिक्त धियान खींचे खातिर एगो साधारण जंबोट्रॉन स्टाइल के घटक हवे।
h1
एगो पन्ना पर सामग्री के खंड सभ के उचित रूप से स्पेस आउट आ सेगमेंट करे खातिर एगो सरल शेल । ई h1
's डिफ़ॉल्ट small
, तत्व के साथे-साथ अधिकतर अन्य घटक सभ (अतिरिक्त शैली सभ के साथ) के इस्तेमाल क सके ला।
- <div वर्ग = "पन्ना-हेडर" > बा
- <h1> उदाहरण पन्ना हेडर </h1> बा
- </div> के बा
डिफ़ॉल्ट रूप से, बूटस्ट्रैप के थंबनेल सभ के अइसन बनावल गइल बा कि लिंक कइल गइल छवि सभ के कम से कम जरूरी मार्कअप के साथ देखावल जा सके।
तनी अतिरिक्त मार्कअप के साथ थंबनेल में कवनो तरह के एचटीएमएल सामग्री जइसे कि हेडिंग, पैराग्राफ, भा बटन जोड़ल संभव बा.
थंबनेल (पहिले .media-grid
v1.4 तक ले) फोटो भा वीडियो के ग्रिड, छवि खोज परिणाम, खुदरा उत्पाद, पोर्टफोलियो, आ अउरी बहुत कुछ खातिर बहुत बढ़िया बा। ई लिंक भा स्थिर सामग्री हो सके लें।
थंबनेल मार्कअप सरल बा- ul
कवनो संख्या में li
तत्व वाला एगो के जरूरत बा। इ सुपर लचीला भी बा, जवना से कवनो प्रकार के सामग्री के बस तनिका जादा मार्कअप के संगे आपके सामग्री के लपेटे के अनुमति बा।
अंत में, थंबनेल घटक मौजूदा ग्रिड सिस्टम क्लास सभ के इस्तेमाल करे ला-जइसे कि .span2
या .span3
—थंबनेल आयाम सभ के नियंत्रण खातिर।
जइसन कि पहिले बतावल गइल बा कि थंबनेल खातिर जरूरी मार्कअप हल्का आ सीधा होला. लिंक कइल गइल छवि सभ खातिर डिफ़ॉल्ट सेटअप पर नजर डालल जा रहल बा :
- <ul class = "थंबनेल" > बा
- <ली वर्ग = "स्पैन3" > के बा
- <a href = "#" वर्ग = "थंबनेल" > बा
- <img src = "https://प्लेसहोल्ड.इट/260x180" alt = "" > बा
- </a> के बा
- </li> के बा
- ...
- </ul> के बा
थंबनेल में कस्टम एचटीएमएल सामग्री खातिर, मार्कअप में तनी बदलाव होला। <a>
ब्लॉक लेवल सामग्री के कहीं भी अनुमति देवे खातिर, हमनी के एगो लाइक खातिर स्वैप कर देनी जा <div>
ताकि:
- <ul class = "थंबनेल" > बा
- <ली वर्ग = "स्पैन3" > के बा
- <div class = "थंबनेल" > के बा
- <img src = "https://प्लेसहोल्ड.इट/260x180" alt = "" > बा
- <h5> थंबनेल लेबल </h5> बा
- <p> थंबनेल कैप्शन ठीक इहाँ... </p>
- </div> के बा
- </li> के बा
- ...
- </ul> के बा
बूटस्ट्रैप 2 के साथ, हमनी के आधार वर्ग के सरल बना देले बानी जा: .alert
के बजाय .alert-message
। हमनी के न्यूनतम जरूरी मार्कअप भी कम कर देले बानी जा-ना <p>
डिफ़ॉल्ट रूप से जरूरी बा, बस बाहरी <div>
.
कम कोड वाला अधिका टिकाऊ घटक खातिर, हमनी के ब्लॉक अलर्ट, संदेश जवन अधिका पैडिंग आ आम तौर पर अधिका टेक्स्ट के साथ आवेला, खातिर डिफरेंसिएटिंग लुक हटा दिहले बानी जा। क्लास भी बदल के .alert-block
.
बूटस्ट्रैप एगो बढ़िया jQuery प्लगइन के संगे आवेला जवन कि अलर्ट संदेश के सपोर्ट करेला, जवना से ओकरा के खारिज कईल जल्दी अवुरी आसान हो जाला।
अपना संदेश आ एगो वैकल्पिक बंद आइकन के सरल वर्ग के साथ एगो div में लपेटीं।
- <div वर्ग = "सचेतक" > बा
- <a class = "बंद करीं" data-dismiss = "सचेतक" > × </a>
- <strong> चेतावनी दिहल गइल बा! </strong> बेस्ट चेक यो सेल्फ, रउरा बहुते बढ़िया नइखीं लागत.
- </div> के बा
मानक अलर्ट संदेश के दू गो वैकल्पिक क्लास के साथ आसानी से बढ़ाईं: .alert-block
अउरी पैडिंग आ टेक्स्ट कंट्रोल .alert-heading
खातिर आ मिलान करे वाला हेडिंग खातिर।
बेस्ट चेक यो सेल्फ, रउरा बहुते बढ़िया नइखीं लागत. नुल्ला विटा एलिट लिबेरो, एगो फारेट्रा औग। प्रैसेंट कोमोडो कर्सस मैग्ना, वेल स्केलेरिस्क निस्ल कॉन्सेक्टेटर एट के बा।
- <div class = "अलर्ट अलर्ट-ब्लॉक" > बा
- <a class = "बंद करीं" data-dismiss = "सचेतक" > × </a>
- <h4 class = "अलर्ट-हेडिंग" > चेतावनी बा! </h4> के बा
- बेस्ट चेक यो सेल्फ, रउआ नइखीं...
- </div> के बा
- <div class = "सचेतक अलर्ट-त्रुटि" > बा
- ...
- </div> के बा
- <div class = "अलर्ट अलर्ट-सफलता" > बा
- ...
- </div> के बा
- <div class = "सचेतक अलर्ट-जानकारी" >
- ...
- </div> के बा
ऊर्ध्वाधर ढाल के साथ डिफ़ॉल्ट प्रगति बार।
- <div वर्ग = "प्रगति" > बा
- <div क्लास = "बार" के बा।
- शैली = " चौड़ाई : 60 %; " ></div> बा
- </div> के बा
धारीदार प्रभाव बनावे खातिर ढाल के इस्तेमाल करेला।
- <div class = "प्रगति प्रगति-जानकारी।"
- प्रगति-धारीदार" > के बा
- <div क्लास = "बार" के बा।
- शैली = " चौड़ाई : 20 %; " ></div> बा
- </div> के बा
धारीदार उदाहरण लेके ओकरा के एनिमेट करेला।
- <div class = "प्रगति प्रगति-खतरा।"
- प्रगति-धारीदार सक्रिय" > बा
- <div क्लास = "बार" के बा।
- शैली = " चौड़ाई : 40 %; " ></div> बा
- </div> के बा
प्रगति बार सभ में कुछ एकही क्लास नाँव सभ के इस्तेमाल बटन आ अलर्ट सभ के समान स्टाइलिंग खातिर कइल जाला।
.progress-info
.progress-success
.progress-danger
एकरा अलावे, आप LESS फाइल के अनुकूलित क सकतानी अवुरी आपन रंग अवुरी आकार के रोल क सकतानी।
प्रगति बार में CSS3 संक्रमण के इस्तेमाल होला, एह से अगर आप जावास्क्रिप्ट के माध्यम से चौड़ाई के डायनामिक रूप से समायोजित करीं, त ई सुचारू रूप से आकार बदल जाई।
अगर रउआ .active
क्लास के इस्तेमाल करीं त राउर .progress-striped
प्रगति बार बाएँ से दाहिने ओर धारियन के एनिमेट करी।
प्रगति बार सभ में CSS3 ढाल, संक्रमण, आ एनीमेशन सभ के इस्तेमाल होला जेह से कि इनहन के सगरी इफेक्ट सभ के हासिल कइल जा सके। ई फीचर IE7-8 भा फायरफॉक्स के पुरान संस्करण सभ में सपोर्ट ना कइल जालें।
ओपेरा एह समय एनीमेशन के सपोर्ट नइखे करत।
कुआँ के इस्तेमाल कवनो तत्व पर सरल प्रभाव के रूप में करीं ताकि ओकरा के इनसेट प्रभाव दिहल जा सके।
- <div class = "अच्छा" > के बा
- ...
- </div> के बा
मोडल आ अलर्ट नियर सामग्री के खारिज करे खातिर जेनेरिक बंद आइकन के इस्तेमाल करीं।
- <a class = "बंद करीं" > × </a> के बा