शुरू करना
बूटस्ट्रैप का एक सिंहावलोकन, कैसे डाउनलोड करें और उपयोग करें, बुनियादी टेम्पलेट और उदाहरण, और बहुत कुछ।
बूटस्ट्रैप का एक सिंहावलोकन, कैसे डाउनलोड करें और उपयोग करें, बुनियादी टेम्पलेट और उदाहरण, और बहुत कुछ।
बूटस्ट्रैप (वर्तमान में v3.4.1) में शीघ्रता से आरंभ करने के कुछ आसान तरीके हैं, प्रत्येक एक अलग कौशल स्तर और उपयोग के मामले के लिए आकर्षक है। यह देखने के लिए पढ़ें कि आपकी विशेष आवश्यकताओं के अनुरूप क्या है।
संकलित और छोटा किया गया सीएसएस, जावास्क्रिप्ट, और फोंट। कोई दस्तावेज़ या मूल स्रोत फ़ाइलें शामिल नहीं हैं।
स्रोत कम, जावास्क्रिप्ट, और फ़ॉन्ट फ़ाइलें, हमारे दस्तावेज़ों के साथ। एक कम संकलक और कुछ सेटअप की आवश्यकता है।
रेल, कंपास, या सैस-ओनली प्रोजेक्ट्स में आसान समावेश के लिए बूटस्ट्रैप को लेस से सैस में पोर्ट किया गया ।
JsDelivr पर मौजूद लोग बूटस्ट्रैप के CSS और JavaScript के लिए CDN सहायता प्रदान करते हैं। बस इन jsDelivr लिंक का उपयोग करें।
आप बोवर का उपयोग करके बूटस्ट्रैप के कम, सीएसएस, जावास्क्रिप्ट और फोंट को भी स्थापित और प्रबंधित कर सकते हैं :
आप npm का उपयोग करके बूटस्ट्रैप भी स्थापित कर सकते हैं :
require('bootstrap')
बूटस्ट्रैप के सभी jQuery प्लगइन्स को jQuery ऑब्जेक्ट पर लोड करेगा। मॉड्यूल स्वयं कुछ bootstrap
भी निर्यात नहीं करता है। /js/*.js
आप पैकेज की शीर्ष-स्तरीय निर्देशिका के अंतर्गत फ़ाइलों को लोड करके बूटस्ट्रैप के jQuery प्लगइन्स को व्यक्तिगत रूप से मैन्युअल रूप से लोड कर सकते हैं ।
बूटस्ट्रैप package.json
में निम्नलिखित कुंजियों के अंतर्गत कुछ अतिरिक्त मेटाडेटा शामिल हैं:
less
- बूटस्ट्रैप की मुख्य कम स्रोत फ़ाइल का पथstyle
- बूटस्ट्रैप के गैर-छोटा सीएसएस का पथ जिसे डिफ़ॉल्ट सेटिंग्स का उपयोग करके पूर्व-संकलित किया गया है (कोई अनुकूलन नहीं)आप कम्पोज़र का उपयोग करके बूटस्ट्रैप के कम, सीएसएस, जावास्क्रिप्ट और फोंट को भी स्थापित और प्रबंधित कर सकते हैं :
CSS विक्रेता उपसर्गों से निपटने के लिए बूटस्ट्रैप Autoprefixer का उपयोग करता है । यदि आप बूटस्ट्रैप को उसके कम/सास स्रोत से संकलित कर रहे हैं और हमारे ग्रंटफाइल का उपयोग नहीं कर रहे हैं, तो आपको अपनी निर्माण प्रक्रिया में ऑटोप्रिफ़िक्सर को स्वयं एकीकृत करना होगा। यदि आप पहले से संकलित बूटस्ट्रैप का उपयोग कर रहे हैं या हमारे Gruntfile का उपयोग कर रहे हैं, तो आपको इसके बारे में चिंता करने की आवश्यकता नहीं है क्योंकि Autoprefixer पहले से ही हमारे Gruntfile में एकीकृत है।
बूटस्ट्रैप दो रूपों में डाउनलोड करने योग्य है, जिसके भीतर आपको निम्नलिखित निर्देशिकाएं और फाइलें मिलेंगी, जो तार्किक रूप से सामान्य संसाधनों को समूहीकृत करती हैं और संकलित और लघु रूपांतर दोनों प्रदान करती हैं।
कृपया ध्यान दें कि सभी जावास्क्रिप्ट प्लगइन्स को शामिल करने के लिए jQuery की आवश्यकता होती है, जैसा कि स्टार्टर टेम्पलेट में दिखाया गया है । यह देखने के लिए हमसे परामर्श करेंbower.json
कि jQuery के कौन से संस्करण समर्थित हैं।
एक बार डाउनलोड हो जाने के बाद, (संकलित) बूटस्ट्रैप की संरचना देखने के लिए संपीड़ित फ़ोल्डर को अनज़िप करें। आप कुछ इस तरह देखेंगे:
यह बूटस्ट्रैप का सबसे बुनियादी रूप है: लगभग किसी भी वेब प्रोजेक्ट में त्वरित ड्रॉप-इन उपयोग के लिए पूर्व-संकलित फ़ाइलें। हम संकलित CSS और JS ( bootstrap.*
), साथ ही संकलित और लघुकृत CSS और JS ( bootstrap.min.*
) प्रदान करते हैं। CSS स्रोत मानचित्र ( bootstrap.*.map
) कुछ ब्राउज़रों के डेवलपर टूल के साथ उपयोग के लिए उपलब्ध हैं। Glyphicons से फ़ॉन्ट शामिल हैं, जैसा कि वैकल्पिक बूटस्ट्रैप थीम है।
बूटस्ट्रैप स्रोत कोड डाउनलोड में स्रोत कम, जावास्क्रिप्ट और दस्तावेज़ीकरण के साथ पूर्व-संकलित सीएसएस, जावास्क्रिप्ट और फ़ॉन्ट संपत्ति शामिल हैं। अधिक विशेष रूप से, इसमें निम्नलिखित और बहुत कुछ शामिल हैं:
, less/
, js/
और fonts/
हमारे CSS, JS और आइकन फोंट (क्रमशः) के लिए स्रोत कोड हैं। फ़ोल्डर में उपरोक्त dist/
प्रीकंपील्ड डाउनलोड अनुभाग में सूचीबद्ध सब कुछ शामिल है। docs/
फ़ोल्डर में हमारे दस्तावेज़ीकरण और examples/
बूटस्ट्रैप उपयोग का स्रोत कोड शामिल है। इसके अलावा, कोई अन्य शामिल फ़ाइल पैकेज, लाइसेंस जानकारी और विकास के लिए समर्थन प्रदान करती है।
बूटस्ट्रैप अपने निर्माण प्रणाली के लिए ग्रंट का उपयोग करता है, ढांचे के साथ काम करने के लिए सुविधाजनक तरीकों के साथ। इस तरह हम अपना कोड संकलित करते हैं, परीक्षण चलाते हैं, और बहुत कुछ करते हैं।
ग्रंट को स्थापित करने के लिए, आपको पहले node.js (जिसमें npm शामिल है) डाउनलोड और इंस्टॉल करना होगा। एनपीएम नोड पैकेज्ड मॉड्यूल के लिए खड़ा है और नोड.जेएस के माध्यम से विकास निर्भरताओं को प्रबंधित करने का एक तरीका है।
फिर, कमांड लाइन से:grunt-cli
के साथ विश्व स्तर पर स्थापित करें npm install -g grunt-cli
।/bootstrap/
डायरेक्टरी पर नेविगेट करें, फिर रन करें npm install
। npm package.json
फ़ाइल को देखेगा और स्वचालित रूप से वहां सूचीबद्ध आवश्यक स्थानीय निर्भरताएँ स्थापित करेगा।पूरा होने पर, आप कमांड लाइन से प्रदान किए गए विभिन्न ग्रंट कमांड को चलाने में सक्षम होंगे।
grunt dist
(बस सीएसएस और जावास्क्रिप्ट संकलित करें)/dist/
संकलित और छोटी सीएसएस और जावास्क्रिप्ट फाइलों के साथ निर्देशिका को पुन: उत्पन्न करता है। बूटस्ट्रैप उपयोगकर्ता के रूप में, यह सामान्य रूप से वह आदेश है जो आप चाहते हैं।
grunt watch
(घड़ी)कम स्रोत फ़ाइलों को देखता है और जब भी आप कोई परिवर्तन सहेजते हैं तो उन्हें स्वचालित रूप से सीएसएस में पुन: संकलित करता है।
grunt test
(परीक्षण चलाएँ)JSHint चलाता है और Karma की बदौलत वास्तविक ब्राउज़र में QUnit परीक्षण चलाता है ।
grunt docs
(दस्तावेज़ संपत्तियों का निर्माण और परीक्षण करें)सीएसएस, जावास्क्रिप्ट और अन्य संपत्तियों का निर्माण और परीक्षण करता है जिनका उपयोग स्थानीय रूप से दस्तावेज़ों को चलाने के दौरान किया जाता है bundle exec jekyll serve
।
grunt
(बिल्कुल सब कुछ बनाएं और परीक्षण चलाएं)सीएसएस और जावास्क्रिप्ट को संकलित और छोटा करता है, दस्तावेज़ीकरण वेबसाइट बनाता है, दस्तावेज़ों के विरुद्ध HTML5 सत्यापनकर्ता चलाता है, कस्टमाइज़र संपत्तियों को पुन: उत्पन्न करता है, और बहुत कुछ। जेकिल की आवश्यकता है। आमतौर पर केवल तभी आवश्यक होता है जब आप बूटस्ट्रैप पर ही हैकिंग कर रहे हों।
यदि आपको निर्भरता स्थापित करने या ग्रंट कमांड चलाने में समस्या आती है, तो पहले /node_modules/
npm द्वारा उत्पन्न निर्देशिका को हटा दें। फिर, फिर से चलाएँ npm install
।
इस मूल HTML टेम्पलेट से प्रारंभ करें, या इन उदाहरणों को संशोधित करें । हम आशा करते हैं कि आप हमारे टेम्प्लेट और उदाहरणों को अपनी आवश्यकताओं के अनुरूप अनुकूलित करते हुए अनुकूलित करेंगे।
न्यूनतम बूटस्ट्रैप दस्तावेज़ के साथ काम करना शुरू करने के लिए नीचे दिए गए HTML को कॉपी करें।
बूटस्ट्रैप के कई घटकों के साथ ऊपर दिए गए मूल टेम्पलेट पर निर्माण करें। हम आपको बूटस्ट्रैप को अनुकूलित और अनुकूलित करने के लिए प्रोत्साहित करते हैं जो आपकी व्यक्तिगत परियोजना की आवश्यकताओं के अनुरूप हो।
नीचे दिए गए प्रत्येक उदाहरण के लिए बूटस्ट्रैप रिपॉजिटरी डाउनलोड करके स्रोत कोड प्राप्त करें । docs/examples/
उदाहरण निर्देशिका में पाए जा सकते हैं ।
हमारे डॉक्स के अनुसार बूटस्ट्रैप की प्रतिक्रियाशीलता को आसानी से अक्षम करें ।
बूटलिंट आधिकारिक बूटस्ट्रैप एचटीएमएल लिंटर टूल है। यह स्वचालित रूप से उन वेबपृष्ठों में कई सामान्य HTML गलतियों की जाँच करता है जो काफी "वेनिला" तरीके से बूटस्ट्रैप का उपयोग कर रहे हैं। वेनिला बूटस्ट्रैप के घटकों/विजेटों को कुछ संरचनाओं के अनुरूप डीओएम के अपने हिस्सों की आवश्यकता होती है। बूटलिंट जाँचता है कि बूटस्ट्रैप घटकों के उदाहरणों में सही ढंग से संरचित HTML है। अपने बूटस्ट्रैप वेब डेवलपमेंट टूलचैन में बूटलिंट जोड़ने पर विचार करें ताकि कोई भी सामान्य गलती आपके प्रोजेक्ट के विकास को धीमा न कर दे।
बूटस्ट्रैप के विकास पर अद्यतित रहें और इन सहायक संसाधनों के साथ समुदाय तक पहुंचें।
irc.freenode.net
में सर्वर में IRC का उपयोग करके साथी बूटस्ट्रैपर्स के साथ चैट करें ।twitter-bootstrap-3
पर पूछें ।bootstrap
वितरित करते समय बूटस्ट्रैप की कार्यक्षमता को संशोधित या जोड़ते हैं ।नवीनतम गपशप और भयानक संगीत वीडियो के लिए आप ट्विटर पर @getbootstrap का भी अनुसरण कर सकते हैं ।
बूटस्ट्रैप स्वचालित रूप से आपके पृष्ठों को विभिन्न स्क्रीन आकारों के लिए अनुकूलित करता है। यहां इस सुविधा को अक्षम करने का तरीका बताया गया है ताकि आपका पृष्ठ इस गैर-प्रतिक्रियाशील उदाहरण की तरह काम करे ।
<meta>
में उल्लिखित व्यूपोर्ट को छोड़ देंwidth
के लिए ऑन को ओवरराइड करें , उदाहरण के लिए सुनिश्चित करें कि यह डिफ़ॉल्ट बूटस्ट्रैप सीएसएस के बाद आता है। आप वैकल्पिक रूप से मीडिया प्रश्नों या कुछ चयनकर्ता-फू से बच सकते हैं।.container
width: 970px !important;
!important
.col-xs-*
लिए, मध्यम/बड़े वाले के अलावा या उनके स्थान पर कक्षाओं का उपयोग करें। चिंता न करें, अतिरिक्त-छोटा डिवाइस ग्रिड सभी रिज़ॉल्यूशन को मापता है।IE8 के लिए आपको अभी भी Respond.js की आवश्यकता होगी (चूंकि हमारे मीडिया प्रश्न अभी भी हैं और उन्हें संसाधित करने की आवश्यकता है)। यह बूटस्ट्रैप के "मोबाइल साइट" पहलुओं को अक्षम करता है।
हमने इन चरणों को एक उदाहरण पर लागू किया है। लागू किए गए विशिष्ट परिवर्तनों को देखने के लिए इसका स्रोत कोड पढ़ें।
बूटस्ट्रैप के पुराने संस्करण से v3.x में माइग्रेट करना चाहते हैं? हमारी प्रवासन मार्गदर्शिका देखें ।
बूटस्ट्रैप को नवीनतम डेस्कटॉप और मोबाइल ब्राउज़र में सबसे अच्छा काम करने के लिए बनाया गया है, जिसका अर्थ है कि पुराने ब्राउज़र अलग-अलग शैली में प्रदर्शित हो सकते हैं, हालांकि पूरी तरह कार्यात्मक, कुछ घटकों के रेंडरिंग।
विशेष रूप से, हम निम्नलिखित ब्राउज़रों और प्लेटफार्मों के नवीनतम संस्करणों का समर्थन करते हैं।
वैकल्पिक ब्राउज़र जो वेबकिट, ब्लिंक, या गेको के नवीनतम संस्करण का उपयोग करते हैं, चाहे सीधे या प्लेटफॉर्म के वेब व्यू एपीआई के माध्यम से, स्पष्ट रूप से समर्थित नहीं हैं। हालाँकि, बूटस्ट्रैप को (ज्यादातर मामलों में) इन ब्राउज़रों में भी सही ढंग से प्रदर्शित और कार्य करना चाहिए। अधिक विशिष्ट समर्थन जानकारी नीचे दी गई है।
सामान्यतया, बूटस्ट्रैप प्रत्येक प्रमुख प्लेटफ़ॉर्म के डिफ़ॉल्ट ब्राउज़र के नवीनतम संस्करणों का समर्थन करता है। ध्यान दें कि प्रॉक्सी ब्राउज़र (जैसे ओपेरा मिनी, ओपेरा मोबाइल का टर्बो मोड, यूसी ब्राउज़र मिनी, अमेज़ॅन सिल्क) समर्थित नहीं हैं।
क्रोम | फ़ायर्फ़ॉक्स | सफारी | |
---|---|---|---|
एंड्रॉयड | समर्थित | समर्थित | एन/ए |
आईओएस | समर्थित | समर्थित | समर्थित |
इसी तरह, अधिकांश डेस्कटॉप ब्राउज़र के नवीनतम संस्करण समर्थित हैं।
क्रोम | फ़ायर्फ़ॉक्स | इंटरनेट एक्स्प्लोरर | ओपेरा | सफारी | |
---|---|---|---|---|---|
Mac | समर्थित | समर्थित | एन/ए | समर्थित | समर्थित |
खिड़कियाँ | समर्थित | समर्थित | समर्थित | समर्थित | समर्थित नहीं |
विंडोज़ पर, हम इंटरनेट एक्सप्लोरर 8-11 का समर्थन करते हैं ।
फ़ायरफ़ॉक्स के लिए, नवीनतम सामान्य स्थिर रिलीज़ के अलावा, हम फ़ायरफ़ॉक्स के नवीनतम विस्तारित समर्थन रिलीज़ (ESR) संस्करण का भी समर्थन करते हैं।
अनौपचारिक रूप से, बूटस्ट्रैप को क्रोमियम और लिनक्स के लिए क्रोम, लिनक्स के लिए फ़ायरफ़ॉक्स, और इंटरनेट एक्सप्लोरर 7 के साथ-साथ माइक्रोसॉफ्ट एज में अच्छी तरह से दिखना चाहिए और व्यवहार करना चाहिए, हालांकि वे आधिकारिक तौर पर समर्थित नहीं हैं।
कुछ ब्राउज़र बगों की सूची के लिए जिनसे बूटस्ट्रैप को जूझना पड़ता है, हमारे वॉल ऑफ़ ब्राउजर बग्स देखें ।
इंटरनेट एक्सप्लोरर 8 और 9 भी समर्थित हैं, हालांकि, कृपया ध्यान रखें कि कुछ CSS3 गुण और HTML5 तत्व इन ब्राउज़रों द्वारा पूरी तरह से समर्थित नहीं हैं। इसके अलावा, Internet Explorer 8 को मीडिया क्वेरी समर्थन को सक्षम करने के लिए Respond.js के उपयोग की आवश्यकता है।
विशेषता | इंटरनेट एक्सप्लोरर 8 | इंटरनेट एक्सप्लोरर 9 |
---|---|---|
border-radius |
समर्थित नहीं | समर्थित |
box-shadow |
समर्थित नहीं | समर्थित |
transform |
समर्थित नहीं | समर्थित, -ms उपसर्ग के साथ |
transition |
समर्थित नहीं | |
placeholder |
समर्थित नहीं |
CSS3 और HTML5 सुविधाओं के ब्राउज़र समर्थन के विवरण के लिए क्या मैं उपयोग कर सकता हूं... पर जाएं ।
Internet Explorer 8 के लिए अपने विकास और उत्पादन परिवेश में Respond.js का उपयोग करते समय निम्नलिखित सावधानियों से सावधान रहें।
किसी भिन्न (उप) डोमेन (उदाहरण के लिए, सीडीएन पर) पर होस्ट किए गए CSS के साथ Respond.js का उपयोग करने के लिए कुछ अतिरिक्त सेटअप की आवश्यकता होती है। विवरण के लिए Respond.js डॉक्स देखें।
file://
ब्राउज़र सुरक्षा नियमों के कारण, Respond.js file://
प्रोटोकॉल के माध्यम से देखे गए पृष्ठों के साथ काम नहीं करता (जैसे स्थानीय HTML फ़ाइल खोलते समय)। IE8 में प्रतिक्रियाशील सुविधाओं का परीक्षण करने के लिए, अपने पृष्ठों को HTTP(S) पर देखें। विवरण के लिए Respond.js डॉक्स देखें।
@import
Respond.js CSS के साथ काम नहीं करता है जिसे @import
. विशेष रूप से, कुछ ड्रूपल कॉन्फ़िगरेशन का उपयोग करने के लिए जाना जाता है @import
। विवरण के लिए Respond.js डॉक्स देखें।
IE8 , , , या box-sizing: border-box;
के साथ संयुक्त होने पर पूरी तरह से समर्थन नहीं करता है । इस कारण से, v3.0.1 के अनुसार, हम अब s पर उपयोग नहीं करते हैं ।min-width
max-width
min-height
max-height
max-width
.container
IE8 के साथ @font-face
संयुक्त होने पर कुछ समस्याएं हैं :before
। बूटस्ट्रैप अपने Glyphicons के साथ उस संयोजन का उपयोग करता है। यदि कोई पृष्ठ कैश किया गया है, और खिड़की पर माउस के बिना लोड किया गया है (यानी रीफ्रेश बटन दबाएं या आईफ्रेम में कुछ लोड करें) तो पृष्ठ फ़ॉन्ट लोड होने से पहले प्रस्तुत हो जाता है। पृष्ठ (बॉडी) पर होवर करने से कुछ आइकन दिखाई देंगे और शेष आइकन पर होवर करने से वे भी दिखाई देंगे। विवरण के लिए अंक #13863 देखें।
बूटस्ट्रैप पुराने इंटरनेट एक्सप्लोरर संगतता मोड में समर्थित नहीं है। यह सुनिश्चित करने के लिए कि आप IE के लिए नवीनतम रेंडरिंग मोड का उपयोग कर रहे हैं, <meta>
अपने पृष्ठों में उपयुक्त टैग शामिल करने पर विचार करें:
डिबगिंग टूल खोलकर दस्तावेज़ मोड की पुष्टि करें: F12"दस्तावेज़ मोड" को दबाएं और जांचें।
यह टैग बूटस्ट्रैप के सभी दस्तावेज़ों और उदाहरणों में शामिल है ताकि यह सुनिश्चित किया जा सके कि इंटरनेट एक्सप्लोरर के प्रत्येक समर्थित संस्करण में सर्वोत्तम प्रतिपादन संभव है।
अधिक जानकारी के लिए यह स्टैक ओवरफ्लो प्रश्न देखें ।
Internet Explorer 10 डिवाइस की चौड़ाई को व्यूपोर्ट की चौड़ाई से अलग नहीं करता है , और इस प्रकार बूटस्ट्रैप के CSS में मीडिया प्रश्नों को ठीक से लागू नहीं करता है। आम तौर पर आप इसे ठीक करने के लिए CSS का एक त्वरित स्निपेट जोड़ेंगे:
हालांकि, यह अपडेट 3 (उर्फ जीडीआर3) से पुराने विंडोज फोन 8 संस्करण चलाने वाले उपकरणों के लिए काम नहीं करता है , क्योंकि यह ऐसे उपकरणों को संकीर्ण "फोन" दृश्य के बजाय अधिकतर डेस्कटॉप दृश्य दिखाने का कारण बनता है। इसका समाधान करने के लिए, आपको बग के समाधान के लिए निम्नलिखित सीएसएस और जावास्क्रिप्ट को शामिल करना होगा ।
अधिक जानकारी और उपयोग दिशानिर्देशों के लिए, विंडोज फोन 8 और डिवाइस-चौड़ाई पढ़ें ।
एक शीर्ष के रूप में, हम इसे बूटस्ट्रैप के सभी दस्तावेज़ों और उदाहरणों में एक प्रदर्शन के रूप में शामिल करते हैं।
OS X के लिए v7.1 से पहले और iOS v8.0 के लिए Safari के संस्करणों के रेंडरिंग इंजन को हमारी .col-*-1
ग्रिड कक्षाओं में उपयोग किए जाने वाले दशमलव स्थानों की संख्या के साथ कुछ समस्या थी। इसलिए यदि आपके पास 12 अलग-अलग ग्रिड कॉलम हैं, तो आप देखेंगे कि वे कॉलम की अन्य पंक्तियों की तुलना में कम आए हैं। Safari/iOS को अपग्रेड करने के अलावा, आपके पास वर्कअराउंड के लिए कुछ विकल्प हैं:
.pull-right
हार्ड-राइट अलाइनमेंट प्राप्त करने के लिए अपने अंतिम ग्रिड कॉलम में जोड़ेंoverflow: hidden
तत्व के लिए समर्थन <body>
आईओएस और एंड्रॉइड में काफी सीमित है। उस अंत तक, जब आप उन उपकरणों के ब्राउज़र में किसी मोडल के ऊपर या नीचे स्क्रॉल करते हैं, तो <body>
सामग्री स्क्रॉल करना शुरू कर देगी। क्रोम बग #175502 ( क्रोम v40 में फिक्स्ड) और वेबकिट बग #153852 देखें ।
IOS 9.3 के अनुसार, जबकि एक मोडल खुला है, यदि स्क्रॉल जेस्चर का प्रारंभिक स्पर्श टेक्स्ट <input>
या a की सीमा के भीतर है <textarea>
, <body>
तो मोडल के नीचे की सामग्री को मोडल के बजाय स्क्रॉल किया जाएगा। वेबकिट बग #153856 देखें ।
साथ ही, ध्यान दें कि यदि आप एक निश्चित नावबार का उपयोग कर रहे हैं या एक मोडल के भीतर इनपुट का उपयोग कर रहे हैं, तो आईओएस में एक रेंडरिंग बग है जो वर्चुअल कीबोर्ड ट्रिगर होने पर निश्चित तत्वों की स्थिति को अपडेट नहीं करता है। इसके लिए कुछ वर्कअराउंड में अपने तत्वों को बदलना position: absolute
या फ़ोकस पर टाइमर लगाना शामिल है ताकि स्थिति को मैन्युअल रूप से ठीक करने का प्रयास किया जा सके। यह बूटस्ट्रैप द्वारा नियंत्रित नहीं किया जाता है, इसलिए यह तय करना आपके ऊपर है कि आपके आवेदन के लिए कौन सा समाधान सबसे अच्छा है।
जेड-इंडेक्सिंग की .dropdown-backdrop
जटिलता के कारण एनएवी में आईओएस पर तत्व का उपयोग नहीं किया जाता है। इस प्रकार, नेवबार में ड्रॉपडाउन को बंद करने के लिए, आपको सीधे ड्रॉपडाउन तत्व (या कोई अन्य तत्व जो आईओएस में एक क्लिक ईवेंट को सक्रिय करेगा ) पर क्लिक करना होगा।
पेज जूमिंग अनिवार्य रूप से बूटस्ट्रैप और बाकी वेब दोनों में कुछ घटकों में कलाकृतियों को प्रस्तुत करता है। समस्या के आधार पर, हम इसे ठीक करने में सक्षम हो सकते हैं (पहले खोजें और फिर यदि आवश्यक हो तो कोई समस्या खोलें)। हालाँकि, हम इन्हें नज़रअंदाज़ कर देते हैं क्योंकि उनके पास अक्सर हैकी वर्कअराउंड के अलावा कोई सीधा समाधान नहीं होता है।
:hover
/ :focus
मोबाइल परहालांकि अधिकांश टचस्क्रीन पर वास्तविक होवरिंग संभव नहीं है, अधिकांश मोबाइल ब्राउज़र होवरिंग समर्थन का अनुकरण करते हैं और :hover
"चिपचिपा" बनाते हैं। दूसरे शब्दों में, :hover
शैली किसी तत्व को टैप करने के बाद लागू होना शुरू होती है और उपयोगकर्ता द्वारा किसी अन्य तत्व को टैप करने के बाद ही लागू होना बंद हो जाती है। इससे बूटस्ट्रैप की :hover
स्थिति ऐसे ब्राउज़र पर अवांछित रूप से "अटक" हो सकती है। कुछ मोबाइल ब्राउजर भी :focus
इसी तरह स्टिकी बनाते हैं। इस तरह की शैलियों को पूरी तरह से हटाने के अलावा इन मुद्दों के लिए वर्तमान में कोई आसान समाधान नहीं है।
कुछ आधुनिक ब्राउज़रों में भी, मुद्रण विचित्र हो सकता है।
विशेष रूप से, क्रोम v32 के रूप में और मार्जिन सेटिंग्स के बावजूद, क्रोम एक वेबपेज प्रिंट करते समय मीडिया प्रश्नों को हल करते समय भौतिक पेपर आकार की तुलना में काफी कम व्यूपोर्ट चौड़ाई का उपयोग करता है। इसके परिणामस्वरूप बूटस्ट्रैप का अतिरिक्त-छोटा ग्रिड मुद्रण करते समय अप्रत्याशित रूप से सक्रिय हो सकता है। कुछ विवरणों के लिए अंक #12078 और क्रोम बग #273306 देखें। सुझाए गए उपाय:
@screen-*
ताकि आपके प्रिंटर पेपर को अतिरिक्त-छोटे से बड़ा माना जा सके।साथ ही, Safari v8.0 के रूप में, निश्चित-चौड़ाई .container
s, Safari को मुद्रण करते समय असामान्य रूप से छोटे फ़ॉन्ट आकार का उपयोग करने का कारण बन सकता है। अधिक विवरण के लिए #14868 और वेबकिट बग #138192 देखें । इसके लिए एक संभावित समाधान निम्नलिखित सीएसएस जोड़ना है:
बॉक्स से बाहर, एंड्रॉइड 4.1 (और जाहिर तौर पर कुछ नए रिलीज भी) ब्राउज़र ऐप के साथ पसंद के डिफ़ॉल्ट वेब ब्राउज़र के रूप में जहाज (क्रोम के विपरीत)। दुर्भाग्य से, ब्राउज़र ऐप में सामान्य रूप से सीएसएस के साथ बहुत सारे बग और विसंगतियां हैं।
तत्वों पर <select>
, एंड्रॉइड स्टॉक ब्राउज़र साइड कंट्रोल प्रदर्शित नहीं करेगा यदि कोई border-radius
और/या border
लागू है। ( विवरण के लिए यह स्टैक ओवरफ्लो प्रश्न देखें।) आपत्तिजनक सीएसएस को हटाने के लिए नीचे दिए गए कोड के स्निपेट का उपयोग करें और <select>
एंड्रॉइड स्टॉक ब्राउज़र पर एक अस्थिर तत्व के रूप में प्रस्तुत करें। उपयोगकर्ता एजेंट सूँघने से क्रोम, सफारी और मोज़िला ब्राउज़र में हस्तक्षेप से बचा जाता है।
एक उदाहरण देखना चाहते हैं? यह जेएस बिन डेमो देखें।
पुराने और छोटे ब्राउज़रों को सर्वोत्तम संभव अनुभव प्रदान करने के लिए, बूटस्ट्रैप कई स्थानों पर सीएसएस ब्राउज़र हैक्स का उपयोग करता है ताकि ब्राउज़र में बग के आसपास काम करने के लिए कुछ ब्राउज़र संस्करणों के लिए विशेष सीएसएस को लक्षित किया जा सके। ये हैक समझ में आता है कि सीएसएस सत्यापनकर्ता शिकायत करते हैं कि वे अमान्य हैं। कुछ जगहों पर, हम ब्लीडिंग-एज CSS सुविधाओं का भी उपयोग करते हैं जो अभी तक पूरी तरह से मानकीकृत नहीं हैं, लेकिन इनका उपयोग विशुद्ध रूप से प्रगतिशील वृद्धि के लिए किया जाता है।
ये सत्यापन चेतावनियां व्यवहार में कोई मायने नहीं रखती हैं क्योंकि हमारे सीएसएस का गैर-हैकी भाग पूरी तरह से मान्य है और हैकी हिस्से गैर-हैकी हिस्से के उचित कामकाज में हस्तक्षेप नहीं करते हैं, इसलिए हम जानबूझकर इन विशेष चेतावनियों को अनदेखा क्यों करते हैं।
हमारे HTML दस्तावेज़ों में भी कुछ मामूली और अप्रासंगिक HTML सत्यापन चेतावनियाँ हैं, जो हमारे द्वारा एक निश्चित Firefox बग के लिए समाधान शामिल किए जाने के कारण हैं ।
हालांकि हम आधिकारिक तौर पर किसी तीसरे पक्ष के प्लगइन्स या ऐड-ऑन का समर्थन नहीं करते हैं, हम आपकी परियोजनाओं में संभावित समस्याओं से बचने में मदद करने के लिए कुछ उपयोगी सलाह प्रदान करते हैं।
कुछ तृतीय पक्ष सॉफ़्टवेयर, जिनमें Google मानचित्र और Google कस्टम खोज इंजन शामिल हैं, बूटस्ट्रैप के साथ संघर्ष करते हैं * { box-sizing: border-box; }
, एक नियम जो इसे ऐसा बनाता है padding
, किसी तत्व की अंतिम गणना की गई चौड़ाई को प्रभावित नहीं करता है। CSS ट्रिक्स पर बॉक्स मॉडल और साइज़िंग के बारे में अधिक जानें ।
संदर्भ के आधार पर, आप आवश्यकतानुसार (विकल्प 1) को ओवरराइड कर सकते हैं या पूरे क्षेत्रों के लिए बॉक्स-आकार को रीसेट कर सकते हैं (विकल्प 2)।
बूटस्ट्रैप सामान्य वेब मानकों का पालन करता है और—न्यूनतम अतिरिक्त प्रयास के साथ—ऐसी साइटों को बनाने के लिए उपयोग किया जा सकता है जो एटी का उपयोग करने वालों के लिए सुलभ हैं ।
यदि आपके नेविगेशन में कई लिंक हैं और DOM में मुख्य सामग्री से पहले आते हैं, Skip to main content
तो नेविगेशन से पहले एक लिंक जोड़ें (एक सरल व्याख्या के लिए, स्किप नेविगेशन लिंक पर यह A11Y प्रोजेक्ट आलेख देखें )। कक्षा का उपयोग करने .sr-only
से स्किप लिंक नेत्रहीन रूप से छिप जाएगा, और .sr-only-focusable
कक्षा यह सुनिश्चित करेगी कि एक बार फ़ोकस किए जाने पर (देखे गए कीबोर्ड उपयोगकर्ताओं के लिए) लिंक दृश्यमान हो जाए।
क्रोम में लंबे समय से चली आ रही कमियों/बगों के कारण ( क्रोमियम बग ट्रैकर में समस्या 262171 देखें ) और इंटरनेट एक्सप्लोरर ( इन-पेज लिंक और फोकस ऑर्डर पर यह लेख देखें ), आपको यह सुनिश्चित करना होगा कि आपके स्किप लिंक का लक्ष्य जोड़कर कम से कम प्रोग्रामेटिक रूप से फोकस करने योग्य है tabindex="-1"
।
इसके अलावा, हो सकता है कि आप लक्ष्य पर दृश्यमान फ़ोकस संकेत को स्पष्ट रूप से दबाना चाहें (विशेषकर जब क्रोम वर्तमान में उन तत्वों पर फ़ोकस सेट करता है, tabindex="-1"
जब उन्हें माउस से क्लिक किया जाता है) #content:focus { outline: none; }
।
ध्यान दें कि यह बग आपकी साइट द्वारा उपयोग किए जा रहे किसी भी अन्य इन-पेज लिंक को भी प्रभावित करेगा, जिससे वे कीबोर्ड उपयोगकर्ताओं के लिए बेकार हो जाएंगे। आप अन्य सभी नामित एंकरों/फ्रैगमेंट आइडेंटिफ़ायरों के लिए एक समान स्टॉप-गैप फिक्स जोड़ने पर विचार कर सकते हैं जो लिंक लक्ष्य के रूप में कार्य करते हैं।
<h1>
शीर्षकों ( - ) को नेस्ट करते समय <h6>
, आपका प्राथमिक दस्तावेज़ शीर्षलेख एक होना चाहिए <h1>
। बाद के शीर्षकों का तार्किक उपयोग करना चाहिए <h2>
- <h6>
जैसे कि स्क्रीन रीडर आपके पृष्ठों के लिए सामग्री की एक तालिका बना सकते हैं।
HTML CodeSniffer और Penn State's AccessAbility पर और जानें ।
वर्तमान में, बूटस्ट्रैप में उपलब्ध कुछ डिफ़ॉल्ट रंग संयोजन (जैसे कि विभिन्न स्टाइल बटन वर्ग, मूल कोड ब्लॉक के लिए उपयोग किए जाने वाले कुछ कोड हाइलाइटिंग रंग , .bg-primary
प्रासंगिक पृष्ठभूमि सहायक वर्ग, और सफेद पृष्ठभूमि पर उपयोग किए जाने पर डिफ़ॉल्ट लिंक रंग) कम विपरीत अनुपात है ( अनुशंसित अनुपात 4.5:1 से नीचे )। इससे कम दृष्टि वाले या कलर ब्लाइंड वाले उपयोगकर्ताओं को समस्या हो सकती है। इन डिफ़ॉल्ट रंगों को उनके कंट्रास्ट और सुपाठ्यता को बढ़ाने के लिए संशोधित करने की आवश्यकता हो सकती है।
बूटस्ट्रैप एमआईटी लाइसेंस के तहत जारी किया गया है और कॉपीराइट 2019 ट्विटर है। छोटे टुकड़ों में उबालकर, इसे निम्नलिखित स्थितियों के साथ वर्णित किया जा सकता है।
पूर्ण बूटस्ट्रैप लाइसेंस अधिक जानकारी के लिए प्रोजेक्ट रिपॉजिटरी में स्थित है।
समुदाय के सदस्यों ने बूटस्ट्रैप के दस्तावेज़ीकरण का विभिन्न भाषाओं में अनुवाद किया है। कोई भी आधिकारिक रूप से समर्थित नहीं है और हो सकता है कि वे हमेशा अद्यतित न हों।
हम अनुवादों को व्यवस्थित या होस्ट करने में सहायता नहीं करते हैं, हम केवल उनसे लिंक करते हैं।
एक नया या बेहतर अनुवाद समाप्त किया? इसे हमारी सूची में जोड़ने के लिए एक पुल अनुरोध खोलें।