शुरुआत कइल जा रहल बा
बूटस्ट्रैप के अवलोकन, डाउनलोड आ इस्तेमाल करे के तरीका, बेसिक टेम्पलेट आ उदाहरण, आ अउरी बहुत कुछ।
बूटस्ट्रैप के अवलोकन, डाउनलोड आ इस्तेमाल करे के तरीका, बेसिक टेम्पलेट आ उदाहरण, आ अउरी बहुत कुछ।
बूटस्ट्रैप (वर्तमान में v3.4.1) में जल्दी से शुरू करे के कुछ आसान तरीका बा, हर एक अलग कौशल स्तर आ उपयोग केस के आकर्षित करे ला। पूरा पढ़ीं आ देखीं कि रउरा खास जरूरतन का हिसाब से का बा.
सीएसएस, जावास्क्रिप्ट, आ फॉन्ट के संकलित आ लघुकृत कइल गइल बा. कवनो डॉक्स भा मूल स्रोत फाइल शामिल नइखे कइल गइल.
सोर्स लेस, जावास्क्रिप्ट, आ फॉन्ट फाइल के साथे हमनी के डॉक्स के भी। एगो Less compiler आ कुछ सेटअप के जरूरत बा।
बूटस्ट्रैप के रेल, कम्पास, या सास-ओनली प्रोजेक्ट में आसानी से शामिल करे खातिर लेस से सास में पोर्ट कइल गइल ।
jsDelivr पर लोग कृपा से बूटस्ट्रैप के सीएसएस आ जावास्क्रिप्ट खातिर सीडीएन समर्थन प्रदान करेला। बस एह jsDelivr लिंक के इस्तेमाल करीं.
रउआँ बावर के इस्तेमाल से बूटस्ट्रैप के लेस, सीएसएस, जावास्क्रिप्ट, आ फॉन्ट सभ के भी इंस्टॉल आ प्रबंधित क सकत बानी :
रउआँ npm के इस्तेमाल से बूटस्ट्रैप भी इंस्टॉल कर सकत बानी :
require('bootstrap')
बूटस्ट्रैप के सभ jQuery प्लगइन के jQuery ऑब्जेक्ट पर लोड करी। मॉड्यूल bootstrap
खुद कुछ निर्यात ना करेला। /js/*.js
पैकेज के टॉप-लेवल डाइरेक्टरी के नीचे फाइल लोड क के रउआ बूटस्ट्रैप के jQuery प्लगइन के अलग-अलग मैन्युअल रूप से लोड कर सकत बानी ।
बूटस्ट्रैप के package.json
निम्नलिखित कुंजी सभ के नीचे कुछ अतिरिक्त मेटाडाटा होला:
less
- बूटस्ट्रैप के मुख्य कम स्रोत फाइल के पथstyle
- बूटस्ट्रैप के गैर-मिनिफाइड सीएसएस के पथ जवन डिफ़ॉल्ट सेटिंग्स के इस्तेमाल से पहिले से संकलित कइल गइल बा (कोई अनुकूलन ना)रउआँ Composer के इस्तेमाल से बूटस्ट्रैप के Less, CSS, JavaScript, आ फॉन्ट सभ के भी इंस्टॉल आ प्रबंधित क सकत बानी :
बूटस्ट्रैप सीएसएस विक्रेता उपसर्ग से निपटे खातिर ऑटोप्रिफिक्सर के इस्तेमाल करेला . अगर रउआ बूटस्ट्रैप के ओकर Less/Sass स्रोत से संकलित कर रहल बानी आ हमनी के Gruntfile के इस्तेमाल नइखीं करत, त रउआ खुदे Autoprefixer के अपना बिल्ड प्रक्रिया में एकीकृत करे के पड़ी। अगर रउआ प्रीकंपाइल बूटस्ट्रैप के इस्तेमाल कर रहल बानी या हमनी के ग्रंटफाइल के इस्तेमाल कर रहल बानी त रउआ एह बारे में चिंता करे के जरूरत नइखे काहे कि ऑटोप्रिफिक्सर हमनी के ग्रंटफाइल में पहिले से एकीकृत बा।
बूटस्ट्रैप दू गो रूप में डाउनलोड कइल जा सके ला, इनहन के भीतर रउआँ के निम्नलिखित डाइरेक्टरी आ फाइल सभ मिल जाई, आम संसाधन सभ के तार्किक रूप से समूहबद्ध कइल आ संकलित आ लघु दुनों तरह के भिन्नता उपलब्ध करावल जा सके ला।
कृपया ध्यान दीं कि सभ जावास्क्रिप्ट प्लगइन सभ के jQuery के शामिल करे के जरूरत बा, जइसे कि स्टार्टर टेम्पलेट में देखावल गइल बा । हमनी से सलाह लींbower.json
कि jQuery के कवन संस्करण समर्थित बा।
एक बेर डाउनलोड होखला के बाद, (संकलित) बूटस्ट्रैप के संरचना देखे खातिर संकुचित फोल्डर के अनजिप करीं। रउरा कुछ अइसने देखब:
ई बूटस्ट्रैप के सभसे बेसिक रूप हवे: लगभग कौनों भी वेब प्रोजेक्ट में जल्दी से ड्रॉप-इन इस्तेमाल खातिर पहिले से संकलित फाइल। हमनी के संकलित सीएसएस आ जेएस ( bootstrap.*
) के साथे-साथे संकलित आ लघुकृत सीएसएस आ जेएस ( bootstrap.min.*
) भी उपलब्ध करावेनी जा। CSS स्रोत नक्शा ( bootstrap.*.map
) कुछ खास ब्राउजर सभ के डेवलपर टूल सभ के साथ इस्तेमाल खातिर उपलब्ध बा। ग्लिफिकॉन्स के फॉन्ट शामिल बा, आ वैकल्पिक बूटस्ट्रैप थीम भी शामिल बा।
बूटस्ट्रैप स्रोत कोड डाउनलोड में पहिले से संकलित सीएसएस, जावास्क्रिप्ट, आ फॉन्ट संपत्ति सभ के साथे स्रोत लेस, जावास्क्रिप्ट, आ दस्तावेजीकरण भी सामिल बा। अउरी बिसेस रूप से, एह में निम्नलिखित आ अउरी बहुत कुछ सामिल बाड़ें:
, less/
, js/
आ fonts/
हमनी के CSS, JS, आ आइकन फॉन्ट (क्रमशः) खातिर स्रोत कोड हवें। dist/
फोल्डर में ऊपर दिहल पहिले से संकलित डाउनलोड खंड में दिहल सभ कुछ शामिल बा । docs/
फोल्डर में हमनी के दस्तावेजीकरण खातिर स्रोत कोड शामिल बा, आ बूटस्ट्रैप examples/
के इस्तेमाल के। एकरे अलावा, कौनों अउरी सामिल फाइल पैकेज, लाइसेंस जानकारी, आ बिकास खातिर सपोर्ट देले।
बूटस्ट्रैप अपना बिल्ड सिस्टम खातिर ग्रंट के इस्तेमाल करे ला, फ्रेमवर्क के साथ काम करे खातिर सुविधाजनक तरीका सभ के साथ। ई हमनी के आपन कोड कइसे संकलित करेनी जा, टेस्ट चलावेनी जा, आ अउरी बहुत कुछ।
ग्रंट इंस्टॉल करे खातिर सबसे पहिले node.js (जवना में npm भी शामिल बा) डाउनलोड क के इंस्टॉल करे के होई। npm के मतलब होला नोड पैकेज्ड मॉड्यूल आ ई node.js के माध्यम से बिकास निर्भरता सभ के प्रबंधित करे के तरीका हवे।
एकरा बाद, कमांड लाइन से:grunt-cli
के साथ ग्लोबल रूप से इंस्टॉल करीं npm install -g grunt-cli
./bootstrap/
डाइरेक्टरी में जाईं, फिर चलाईं npm install
। npm फाइल के देख के package.json
ओहिजा सूचीबद्ध जरूरी स्थानीय निर्भरता के स्वचालित रूप से इंस्टॉल करी।जब पूरा हो जाई त रउआ कमांड लाइन से दिहल गईल विभिन्न ग्रंट कमांड चला सकेनी।
grunt dist
(बस सीएसएस आ जावास्क्रिप्ट के संकलन करीं)/dist/
संकलित आ मिनीफाइड सीएसएस आ जावास्क्रिप्ट फाइल सभ के साथ डाइरेक्टरी के रिजनरेट करे ला । बूटस्ट्रैप यूजर के रूप में, इ सामान्य रूप से उ कमांड ह जवन रउआ चाहत बानी।
grunt watch
(घड़ी)Less स्रोत फाइल सभ के देखत बा आ जब भी रउआँ कौनों बदलाव सेव करीं तब इनहन के CSS में स्वचालित रूप से रिकंपाइल क देला।
grunt test
(परीक्षण चलावल जाला)JSHint चलावेला आ कर्म के बदौलत असली ब्राउजर में QUnit परीक्षण चलावेला .
grunt docs
(डॉक्स संपत्ति के निर्माण & परीक्षण करीं)CSS, जावास्क्रिप्ट, आ अउरी संपत्ति सभ के निर्माण आ परीक्षण करे ला जेकर इस्तेमाल दस्तावेजीकरण के स्थानीय रूप से चलावे के समय कइल जाला bundle exec jekyll serve
.
grunt
(बिल्कुल सब कुछ बनाईं आ परीक्षण चलाईं)सीएसएस आ जावास्क्रिप्ट के संकलित आ छोट करे ला, दस्तावेजीकरण वेबसाइट बनावे ला, डॉक्स सभ के खिलाफ एचटीएमएल 5 वैलिडेटर चलावे ला, कस्टमाइजर संपत्ति सभ के रिजनरेट करे ला आ अउरी बहुत कुछ। जेकिल के जरूरत बा . आमतौर पर तबे जरूरी बा जब रउरा खुद बूटस्ट्रैप पर हैकिंग करत बानी.
अगर रउआँ के डिपेंडेंसी इंस्टॉल करे में या Grunt कमांड चलावे में समस्या होखे के चाहीं, पहिले /node_modules/
npm द्वारा जनरेट कइल डाइरेक्टरी के हटा दीं। एकरा बाद, दोबारा चलावे npm install
के बा .
एह बेसिक एचटीएमएल टेम्पलेट से शुरू करीं, या एह उदाहरण सभ के संशोधित करीं . हमनी के उम्मीद बा कि रउआँ हमनी के टेम्पलेट आ उदाहरण सभ के अनुकूलित करब, अपना जरूरत के हिसाब से अनुकूलित करब।
न्यूनतम बूटस्ट्रैप दस्तावेज के साथ काम शुरू करे खातिर नीचे दिहल HTML के कॉपी करीं।
बूटस्ट्रैप के कई गो घटक सभ के साथ ऊपर दिहल गइल बेसिक टेम्पलेट पर बिल्ड करीं। हमनी के रउआ के प्रोत्साहित करत बानी जा कि रउआ अपना व्यक्तिगत प्रोजेक्ट के जरूरत के मुताबिक बूटस्ट्रैप के अनुकूलित आ अनुकूलित करीं।
बूटस्ट्रैप रिपोजिटरी डाउनलोड करके नीचे दिहल हर उदाहरण खातिर स्रोत कोड प्राप्त करीं . docs/examples/
उदाहरण डाइरेक्टरी में मिल सकेला ।
हमनी के डॉक्स के अनुसार बूटस्ट्रैप के प्रतिक्रियाशीलता के आसानी से अक्षम करीं .
बूटलिंट आधिकारिक बूटस्ट्रैप एचटीएमएल लिंटर टूल हवे। ई वेबपेज सभ में कई गो आम एचटीएमएल गलती सभ के स्वचालित रूप से जांच करे ला जे बूटस्ट्रैप के काफी "वेनिला" तरीका से इस्तेमाल कर रहल बाड़ें। वेनिला बूटस्ट्रैप के घटक/विजेट सभ खातिर DOM के उनके हिस्सा सभ के कुछ खास संरचना सभ के अनुरूप होखे के जरूरत होला। बूटलिंट जांच करे ला कि बूटस्ट्रैप घटक सभ के इंस्टेंस सभ में सही तरीका से-संरचित एचटीएमएल बा। अपना बूटस्ट्रैप वेब डेवलपमेंट टूलचेन में बूटलिंट जोड़ला पर विचार करीं जेहसे कि कवनो आम गलती रउरा प्रोजेक्ट के डेवलपमेंट के धीमा ना करे.
बूटस्ट्रैप के विकास के बारे में अपडेट रहीं आ एह सहायक संसाधनन से समुदाय तक पहुँचीं.
irc.freenode.net
सर्वर में आईआरसी के उपयोग करके साथी बूटस्ट्रैपर लोग के साथे चैट करीं, ##bootstrap चैनल में ।twitter-bootstrap-3
पर पूछीं ।bootstrap
माध्यम से बितरण करत समय बूटस्ट्रैप के कामकाज में संशोधन करे लें या जोड़ देलें।ताजा गपशप आ लाजवाब म्यूजिक वीडियो खातिर रउआ ट्विटर पर @getbootstrap के भी फॉलो कर सकेनी ।
बूटस्ट्रैप आपके पन्ना सभ के बिबिध स्क्रीन साइज खातिर स्वचालित रूप से अनुकूलित क देला। इहाँ बतावल गइल बा कि एह फीचर के कइसे अक्षम कइल जाला ताकि राउर पन्ना एह गैर-उत्तरदायी उदाहरण नियर काम करे .
<meta>
में बतावल गइल व्यूपोर्ट के छोड़ दींwidth
हर ग्रिड टीयर खातिर ऑन द के एकही चौड़ाई के साथ ओवरराइड करीं .container
, उदाहरण खातिर width: 970px !important;
सुनिश्चित करीं कि ई डिफ़ॉल्ट बूटस्ट्रैप सीएसएस के बाद आवेला। आप वैकल्पिक रूप से !important
मीडिया क्वेरी या कुछ चयनकर्ता-फू के साथ बच सकत बानी।.col-xs-*
, मध्यम/बड़हन सभ के अलावा, या इनहन के जगह पर क्लास सभ के इस्तेमाल करीं। चिंता मत करीं, एक्स्ट्रा-स्मॉल डिवाइस ग्रिड सभ रिजोल्यूशन के स्केल करेला।रउआँ के अभी भी IE8 खातिर Respond.js के जरूरत पड़ी (काहें से कि हमनी के मीडिया क्वेरी अभी भी बा आ एकरा के प्रोसेस करे के जरूरत बा)। एह से बूटस्ट्रैप के "मोबाइल साइट" पहलू अक्षम हो जाला।
हमनी के एह चरणन के एगो उदाहरण पर लागू कइले बानी जा। लागू कइल गइल विशिष्ट बदलाव देखे खातिर एकर स्रोत कोड पढ़ीं.
बूटस्ट्रैप के पुरान संस्करण से v3.x में माइग्रेट करे के तलाश में बानी? हमनी के माइग्रेशन गाइड देखल जाव .
बूटस्ट्रैप के नवीनतम डेस्कटॉप आ मोबाइल ब्राउजर सभ में सभसे नीक काम करे खातिर बनावल गइल बा, मने कि पुरान ब्राउजर सभ में कुछ खास घटक सभ के अलग स्टाइल के, हालाँकि पूरा तरीका से कामकाजी, रेंडरिंग सभ के देखावल जा सके ला।
खास तौर प, हमनी के निम्नलिखित ब्राउज़र अवुरी प्लेटफॉर्म के नवीनतम संस्करण के सपोर्ट करेनी ।
वैकल्पिक ब्राउजर जे वेबकिट, ब्लिंक, या गेको के नवीनतम संस्करण के इस्तेमाल करे लें, चाहे ऊ सीधे होखे भा प्लेटफार्म के वेब व्यू एपीआई के माध्यम से, स्पष्ट रूप से समर्थन ना कइल जाला। हालाँकि, बूटस्ट्रैप के (ज्यादातर मामिला में) एह ब्राउजर सभ में भी सही तरीका से देखावे आ काम करे के चाहीं। अउरी बिसेस समर्थन जानकारी नीचे दिहल गइल बा।
आम तौर प कहल जाए त बूटस्ट्रैप हर प्रमुख प्लेटफॉर्म के डिफ़ॉल्ट ब्राउज़र के नवीनतम संस्करण के सपोर्ट करेला। ध्यान रहे कि प्रॉक्सी ब्राउज़र (जइसे कि ओपेरा मिनी, ओपेरा मोबाइल के टर्बो मोड, यूसी ब्राउज़र मिनी, अमेजन सिल्क) के सपोर्ट ना कइल जाला।
क्रोम के बा | फायरफॉक्स के बा | सफारी के बा | |
---|---|---|---|
एंड्रॉयड के बा | समर्थित कइल गइल बा | समर्थित कइल गइल बा | एन/ए के बा |
आईओएस के बा | समर्थित कइल गइल बा | समर्थित कइल गइल बा | समर्थित कइल गइल बा |
एही तरे अधिकतर डेस्कटॉप ब्राउजर सभ के लेटेस्ट वर्जन सभ के सपोर्ट कइल जाला।
क्रोम के बा | फायरफॉक्स के बा | इंटरनेट एक्सप्लोरर के बा | ओपेरा के बा | सफारी के बा | |
---|---|---|---|---|---|
मैक के बा | समर्थित कइल गइल बा | समर्थित कइल गइल बा | एन/ए के बा | समर्थित कइल गइल बा | समर्थित कइल गइल बा |
विंडोज के बा | समर्थित कइल गइल बा | समर्थित कइल गइल बा | समर्थित कइल गइल बा | समर्थित कइल गइल बा | समर्थित नइखे भइल |
विंडोज पर हमनी के इंटरनेट एक्सप्लोरर 8-11 के सपोर्ट करेनी जा ।
फायरफॉक्स खातिर, नवीनतम सामान्य स्थिर रिलीज के अलावा, हमनी के फायरफॉक्स के नवीनतम एक्सटेंडेड सपोर्ट रिलीज (ESR) संस्करण के भी समर्थन करेनी जा।
अनौपचारिक रूप से, बूटस्ट्रैप के लिनक्स खातिर क्रोमियम आ क्रोम, लिनक्स खातिर फायरफॉक्स, आ इंटरनेट एक्सप्लोरर 7 के साथे-साथ माइक्रोसॉफ्ट एज में भी काफी बढ़िया से देखाई देवे आ व्यवहार करे के चाहीं, हालाँकि ई आधिकारिक तौर पर सपोर्ट नइखे कइल गइल।
कुछ ब्राउजर बग के सूची खातिर जवना से बूटस्ट्रैप के जूझत बा, देखीं हमनी के ब्राउज़र बग के दीवार .
इंटरनेट एक्सप्लोरर 8 आ 9 के भी सपोर्ट कइल जाला, हालाँकि, कृपया ध्यान दीं कि कुछ CSS3 गुण आ HTML5 तत्व सभ के पूरा तरीका से एह ब्राउजर सभ द्वारा सपोर्ट ना कइल जाला। एकरे अलावा, इंटरनेट एक्सप्लोरर 8 में मीडिया क्वेरी सपोर्ट के सक्षम करे खातिर Respond.js के इस्तेमाल करे के जरूरत बा।
चेहरा-मोहरा | इंटरनेट एक्सप्लोरर 8 के बा | इंटरनेट एक्सप्लोरर 9 के बा |
---|---|---|
border-radius |
समर्थित नइखे भइल | समर्थित कइल गइल बा |
box-shadow |
समर्थित नइखे भइल | समर्थित कइल गइल बा |
transform |
समर्थित नइखे भइल | समर्थित बा, -ms उपसर्ग के साथ |
transition |
समर्थित नइखे भइल | |
placeholder |
समर्थित नइखे भइल |
CSS3 आ HTML5 फीचर सभ के ब्राउजर सपोर्ट के बारे में बिस्तार से जाने खातिर Can I use... पर जाईं ।
इंटरनेट एक्सप्लोरर 8 खातिर अपना विकास आ उत्पादन वातावरण में Respond.js के इस्तेमाल करत घरी निम्नलिखित चेतावनी से सावधान रहीं.
अलग (उप)डोमेन पर होस्ट कइल गइल CSS के साथ Respond.js के इस्तेमाल करे खातिर (उदाहरण खातिर, CDN पर) कुछ अतिरिक्त सेटअप के जरूरत होला। विस्तार से जाने खातिर Respond.js डॉक्स देखल जाव ।
file://
ब्राउजर सुरक्षा नियम के कारण, Respond.js प्रोटोकॉल के माध्यम से देखल जाए वाला पन्ना सभ के साथ काम ना करे file://
ला (जइसे कि स्थानीय HTML फाइल खोले के समय)। IE8 में रिस्पांसिव फीचर सभ के परीक्षण करे खातिर, HTTP(S) पर आपन पन्ना सभ के देखल जाय। विस्तार से जाने खातिर Respond.js डॉक्स देखल जाव ।
@import
Respond.js CSS के साथ काम ना करेला जवन के माध्यम से संदर्भित कइल गइल बा @import
। खासतौर पर, कुछ Drupal कॉन्फ़िगरेशन सभ के इस्तेमाल करे खातिर जानल जाला @import
। विस्तार से जाने खातिर Respond.js डॉक्स देखल जाव ।
IE8 पूरा तरह से समर्थन ना करेला box-sizing: border-box;
जब min-width
, max-width
, min-height
, या max-height
. ओह कारण से, v3.0.1 के रूप में, हमनी के अब s max-width
पर इस्तेमाल ना करेनी जा .container
।
आईई8 के साथ कुछ मुद्दा बा @font-face
जब एकरा के संगे जोड़ल जाला :before
. बूटस्ट्रैप ओह संयोजन के अपना ग्लिफिकॉन के संगे इस्तेमाल करेला। अगर कौनों पन्ना के कैश कइल जाला, आ विंडो पर बिना माउस के लोड कइल जाला (यानी रिफ्रेश बटन दबाईं या आइफ्रेम में कुछ लोड करीं) तब फॉन्ट लोड होखे से पहिले पन्ना रेंडर हो जाला। पन्ना (शरीर) पर होवर कइला पर कुछ आइकन देखावल जाई आ बाकी आइकन सभ पर होवर कइला पर ऊहो देखावल जाई। विस्तार से जाने खातिर अंक #13863 देखल जाव ।
पुरान इंटरनेट एक्सप्लोरर संगतता मोड में बूटस्ट्रैप के सपोर्ट नइखे कइल गइल। <meta>
ई सुनिश्चित करे खातिर कि आप IE खातिर नवीनतम रेंडरिंग मोड के इस्तेमाल कर रहल बानी, अपना पन्ना सभ में उचित टैग के शामिल करे पर बिचार करीं:
डिबगिंग टूल खोल के दस्तावेज मोड के पुष्टि करीं: दबाईं F12आ "दस्तावेज मोड" के जांच करीं।
ई टैग बूटस्ट्रैप के सगरी दस्तावेज आ उदाहरण सभ में शामिल कइल गइल बा जेह से कि इंटरनेट एक्सप्लोरर के हर समर्थित संस्करण में सभसे नीक रेंडरिंग संभव होखे।
अधिक जानकारी खातिर ई StackOverflow सवाल देखीं ।
इंटरनेट एक्सप्लोरर 10 डिवाइस के चौड़ाई से व्यूपोर्ट चौड़ाई के अंतर ना करेला , आ एह तरीका से बूटस्ट्रैप के सीएसएस में मीडिया क्वेरी सभ के ठीक से लागू ना करे ला। आम तौर पर रउआँ बस सीएसएस के एगो त्वरित स्निपेट जोड़ के एकरा के ठीक करब:
हालाँकि, ई ओह डिवाइस सभ खातिर काम ना करे ला जे अपडेट 3 (उर्फ GDR3) से पुरान विंडोज फोन 8 के संस्करण चलावे लें , काहें से कि एकरे कारण अइसन डिवाइस सभ संकीर्ण "फोन" व्यू के बजाय ज्यादातर डेस्कटॉप व्यू देखावे लें। एकरा के संबोधित करे खातिर, रउआँ के निम्नलिखित सीएसएस आ जावास्क्रिप्ट शामिल करे के पड़ी ताकि बग के दूर कइल जा सके ।
अधिक जानकारी आ उपयोग के दिशानिर्देश खातिर, विंडोज फोन 8 आ डिवाइस-विड्थ पढ़ीं ।
हेड अप के रूप में, हमनी के एकरा के बूटस्ट्रैप के सभ दस्तावेजीकरण आ उदाहरण में एगो प्रदर्शन के रूप में शामिल कइले बानी जा।
ओएस एक्स खातिर v7.1 आ आईओएस v8.0 खातिर सफारी से पहिले के सफारी के संस्करणन के रेंडरिंग इंजन के हमनी के .col-*-1
ग्रिड क्लास में इस्तेमाल होखे वाला दशमलव स्थान के संख्या से कुछ परेशानी रहे। त अगर रउरा लगे 12 गो अलग-अलग ग्रिड कॉलम होखे त रउरा देखब कि ऊ कॉलम के दोसरा पंक्तियन का मुकाबले छोट आ गइल. सफारी/आईओएस के अपग्रेड करे के अलावा, आपके लगे वर्कअराउंड खातिर कुछ विकल्प बा:
.pull-right
हार्ड-राइट संरेखण पावे खातिर अपना अंतिम ग्रिड कॉलम में जोड़ींoverflow: hidden
आईओएस अवरू एंड्रॉयड में ऑन ए एलिमेंट के सपोर्ट <body>
काफी सीमित बा। एकरा खातिर जब रउआ ओह दुनो डिवाइस के ब्राउजर में कवनो मोडल के ऊपर भा नीचे से स्क्रॉल करीं त <body>
सामग्री स्क्रॉल होखे लागी। देखल जाय क्रोम बग #175502 (क्रोम v40 में ठीक कइल गइल बा) आ वेबकिट बग #153852 ।
<input>
आईओएस 9.3 के रूप में, जबकि कौनों मोडल खुलल बा, अगर कौनों स्क्रॉल इशारा के सुरुआती स्पर्श कौनों टेक्स्टुअल भा a के सीमा में होखे तब मोडल के नीचे <textarea>
के <body>
सामग्री के खुद मोडल के बजाय स्क्रॉल कइल जाई। वेबकिट बग #153856 देखल जाव ।
साथ ही, ध्यान दीं कि अगर आप फिक्स नवबार के इस्तेमाल कर रहल बानी या मोडल के भीतर इनपुट के इस्तेमाल कर रहल बानी त आईओएस में एगो रेंडरिंग बग बा जवन वर्चुअल कीबोर्ड के ट्रिगर होखे पर फिक्स तत्वन के स्थिति अपडेट ना करेला। एकरा खातिर कुछ वर्कअराउंड सभ में अपना तत्व सभ के फोकस में बदलल position: absolute
भा फोकस पर टाइमर के आह्वान कइल सामिल बा जेह से कि मैन्युअल रूप से पोजीशनिंग के सही करे के कोसिस कइल जा सके। एकरा के बूटस्ट्रैप संभाल ना पावेला, एहसे इ तय कईल आपके एप्लिकेशन खाती कवन समाधान सबसे निमन बा।
.dropdown-backdrop
जेड-इंडेक्सिंग के जटिलता के कारण नेव में आईओएस पर एह तत्व के इस्तेमाल ना कइल जाला। एह तरीका से, नवबार में ड्रॉपडाउन बंद करे खातिर, रउआँ के सीधे ड्रॉपडाउन तत्व (या कौनों अउरी तत्व जे आईओएस में क्लिक इवेंट फायर करी ) पर क्लिक करे के पड़ी।
पन्ना ज़ूमिंग अनिवार्य रूप से कुछ घटक सभ में रेंडरिंग आर्टिफैक्ट सभ के प्रस्तुत करे ला, बूटस्ट्रैप आ बाकी वेब दुनों में। मुद्दा के आधार पर हमनी के एकरा के ठीक करे में सक्षम हो सकेनी जा (पहिले खोजीं आ जरूरत पड़ला पर कवनो मुद्दा खोलीं)। हालाँकि, हमनी के इनहन के अनदेखी करे के प्रवृत्ति होला काहें से कि इनहन के अक्सर हैकी वर्कअराउंड के अलावा कौनों सीधा समाधान ना होला।
:hover
/ :focus
मोबाइल पर बाभले अधिकतर टचस्क्रीन सभ पर असली होवरिंग संभव ना होखे, ज्यादातर मोबाइल ब्राउजर होवरिंग सपोर्ट के अनुकरण करे लें आ :hover
"स्टिकी" बनावे लें। यानी कि :hover
कौनों तत्व के टैप कइला के बाद स्टाइल सभ के लागू होखे लागे ला आ प्रयोगकर्ता के कौनों अउरी तत्व के टैप कइला के बाद ही लागू होखल बंद हो जाला। एकरा चलते बूटस्ट्रैप के :hover
स्टेट अयीसन ब्राउज़र प अवांछनीय रूप से "अटकल" हो सकता। कुछ मोबाइल ब्राउजर भी :focus
अइसने चिपचिपा बनावेला। फिलहाल एह मुद्दा सभ खातिर अइसन शैली सभ के पूरा तरीका से हटावे के अलावा कौनों साधारण समाधान नइखे।
कुछ आधुनिक ब्राउजर सभ में भी प्रिंटिंग चंचल हो सके ला।
खासतौर पर, क्रोम v32 के रूप में आ मार्जिन सेटिंग के परवाह कइले बिना, क्रोम वेबपेज प्रिंट करे के दौरान मीडिया क्वेरी सभ के हल करे के समय फिजिकल पेपर साइज से काफी छोट व्यूपोर्ट चौड़ाई के इस्तेमाल करे ला। एकरा चलते प्रिंटिंग के समय बूटस्ट्रैप के एक्स्ट्रा-स्मॉल ग्रिड के अप्रत्याशित रूप से सक्रिय हो सकता। कुछ जानकारी खातिर अंक #12078 आ क्रोम बग #273306 देखल जाय। सुझावल गइल समाधान:
@screen-*
करीं ताकि राउर प्रिंटर पेपर अतिरिक्त-छोट से बड़ मानल जा सके।साथ ही, सफारी v8.0 के रूप में, फिक्स-विड्थ .container
s के कारण सफारी के प्रिंटिंग के समय असामान्य रूप से छोट फॉन्ट साइज के इस्तेमाल हो सके ला। अधिक जानकारी खातिर # 14868 आ वेबकिट बग #138192 देखल जाय। एकरा खातिर एगो संभावित समाधान निम्नलिखित CSS जोड़ल बा:
बॉक्स से बाहर, एंड्रॉयड 4.1 (आ कुछ नया रिलीज भी देखाई देत बा) ब्राउजर ऐप के संगे पसंद के डिफ़ॉल्ट वेब ब्राउज़र के रूप में भेजल जाला (क्रोम के विपरीत)। दुर्भाग्य से ब्राउजर ऐप में बहुत सारा बग बा आ सामान्य रूप से सीएसएस के साथ असंगति बा।
तत्वन पर <select>
, एंड्रॉयड स्टॉक ब्राउजर साइड कंट्रोल ना देखावेला अगर कवनो बा border-radius
आ/या border
लागू बा। ( विस्तार से जाने खातिर ई StackOverflow सवाल देखल जाय।) आपत्तिजनक CSS के हटावे खातिर नीचे दिहल कोड के स्निपेट के इस्तेमाल करीं आ <select>
एंड्रॉयड स्टॉक ब्राउजर पर के अनस्टाइल तत्व के रूप में रेंडर करीं। यूजर एजेंट के सूंघला से क्रोम, सफारी अवुरी मोजिला ब्राउज़र में हस्तक्षेप से बचावल जा सकता।
एगो उदाहरण देखल चाहत बानी? देखल जाव ई जेएस बिन डेमो।
पुरान आ बग वाला ब्राउजर सभ के सभसे नीक अनुभव देवे खातिर बूटस्ट्रैप कई जगह सीएसएस ब्राउजर हैक के इस्तेमाल करे ला आ कुछ खास ब्राउजर संस्करण सभ के बिसेस सीएसएस के निशाना बनावे ला ताकि खुद ब्राउजर सभ में बग सभ के आसपास काम कइल जा सके। एह हैक सभ के कारण सीएसएस वैलिडेटर लोग के शिकायत होखे के कारण समझ में आवे ला कि ई अमान्य बाड़ें। एक दू जगह पर हमनी के ब्लीडिंग-एज सीएसएस फीचर के भी इस्तेमाल करेनी जा जवन अभी तक पूरा तरीका से मानकीकरण नईखे भईल, लेकिन एकर इस्तेमाल विशुद्ध रूप से प्रगतिशील बढ़ावे खातिर कईल जाला।
ई मान्यता चेतावनी सभ ब्यवहार में कौनों महत्व ना रखे लीं काहें से कि हमनी के सीएसएस के गैर-हैकी हिस्सा पूरा तरीका से मान्यता देला आ हैकी हिस्सा गैर-हैकी हिस्सा के सही कामकाज में बाधा ना डाले ला, एही से हमनी के एह बिसेस चेतावनी सभ के जानबूझ के अनदेखी काहें करे लीं।
हमनी के एचटीएमएल डॉक्स में भी ओही तरह से कुछ तुच्छ आ बेमतलब के एचटीएमएल सत्यापन चेतावनी बा जवना के कारण हमनी के एगो निश्चित फायरफॉक्स बग खातिर एगो वर्कअराउंड शामिल बा .
हालांकि हमनी के आधिकारिक तौर प कवनो थर्ड पार्टी प्लगइन चाहे ऐड-ऑन के समर्थन नईखी करत, हमनी के कुछ उपयोगी सलाह जरूर देवेनी जा, जवन कि आपके प्रोजेक्ट में संभावित मुद्दा से बचे में मदद करी।
गूगल मैप्स आ गूगल कस्टम सर्च इंजन समेत कुछ थर्ड पार्टी सॉफ्टवेयर, बूटस्ट्रैप के साथ टकराव करे लें * { box-sizing: border-box; }
, एगो नियम जे एकरा के अइसन बनावे padding
ला, कौनों तत्व के अंतिम गणना कइल चौड़ाई पर कौनों परभाव ना डाले ला। बॉक्स मॉडल आ साइजिंग के बारे में अउरी जानें सीएसएस ट्रिक्स पर .
संदर्भ के आधार पर, आप जरूरत के हिसाब से ओवरराइड क सकत बानी (विकल्प 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>
अइसन कि स्क्रीन रीडर लोग आपके पन्ना सभ खातिर सामग्री के तालिका बना सके।
एचटीएमएल कोडस्निफर आ पेन स्टेट के एक्सेसएबिलिटी पर अउरी जानें ।
वर्तमान में, बूटस्ट्रैप में उपलब्ध कुछ डिफ़ॉल्ट रंग संयोजन (जइसे कि बिबिध स्टाइल वाला बटन क्लास, बेसिक कोड ब्लॉक सभ खातिर इस्तेमाल होखे वाला कुछ कोड हाइलाइटिंग रंग , .bg-primary
संदर्भ बैकग्राउंड हेल्पर क्लास, आ सफेद बैकग्राउंड पर इस्तेमाल होखे पर डिफ़ॉल्ट लिंक रंग) के कंट्रास्ट रेशियो कम होला ( 4.5:1 के अनुशंसित रेशियो से नीचे )। एकरा से कम दृष्टि वाला भा कलर ब्लाइंड होखे वाला यूजर के समस्या हो सकता। एह डिफ़ॉल्ट रंग सभ के कंट्रास्ट आ पठनीयता बढ़ावे खातिर इनहन के संशोधित करे के जरूरत पड़ सके ला।
बूटस्ट्रैप एमआईटी लाइसेंस के तहत जारी कइल गइल बा आ एकर कॉपीराइट 2019 ट्विटर बा। छोट-छोट टुकड़ा सभ में उबाल के एकर वर्णन निम्नलिखित शर्त सभ के साथ कइल जा सके ला।
पूरा बूटस्ट्रैप लाइसेंस अधिक जानकारी खातिर प्रोजेक्ट रिपोजिटरी में स्थित बा।
समुदाय के सदस्य लोग बूटस्ट्रैप के दस्तावेजीकरण के बिबिध भाषा सभ में अनुवाद कइले बा। कवनो के आधिकारिक समर्थन नइखे आ हो सकेला कि ऊ हमेशा अपडेट ना होखे.
हमनी के अनुवाद के व्यवस्थित करे भा होस्ट करे में मदद ना करेनी जा, हमनी के बस ओकरा से लिंक करेनी जा।
नया अनुवाद पूरा भइल बा कि बेहतर? हमनी के सूची में जोड़े खातिर एगो पुल अनुरोध खोलीं।