डाउनलोड

बूटस्ट्रैप (वर्तमान में v3.3.7) में शीघ्रता से आरंभ करने के कुछ आसान तरीके हैं, प्रत्येक एक अलग कौशल स्तर और उपयोग के मामले के लिए आकर्षक है। यह देखने के लिए पढ़ें कि आपकी विशेष आवश्यकताओं के अनुरूप क्या है।

बूटस्ट्रैप सीडीएन

JsDelivr पर मौजूद लोग बूटस्ट्रैप के CSS और JavaScript के लिए CDN सहायता प्रदान करते हैं। बस इन बूटस्ट्रैप सीडीएन लिंक का उपयोग करें।

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

बोवर के साथ स्थापित करें

आप बोवर का उपयोग करके बूटस्ट्रैप के कम, सीएसएस, जावास्क्रिप्ट और फोंट को भी स्थापित और प्रबंधित कर सकते हैं :

$ bower install bootstrap

एनपीएम . के साथ स्थापित करें

आप npm का उपयोग करके बूटस्ट्रैप भी स्थापित कर सकते हैं :

$ npm install bootstrap@3

require('bootstrap')बूटस्ट्रैप के सभी jQuery प्लगइन्स को jQuery ऑब्जेक्ट पर लोड करेगा। मॉड्यूल स्वयं कुछ bootstrapभी निर्यात नहीं करता है। /js/*.jsआप पैकेज की शीर्ष-स्तरीय निर्देशिका के अंतर्गत फ़ाइलों को लोड करके बूटस्ट्रैप के jQuery प्लगइन्स को व्यक्तिगत रूप से मैन्युअल रूप से लोड कर सकते हैं ।

बूटस्ट्रैप package.jsonमें निम्नलिखित कुंजियों के अंतर्गत कुछ अतिरिक्त मेटाडेटा शामिल हैं:

• less- बूटस्ट्रैप की मुख्य कम स्रोत फ़ाइल का पथ
• style- बूटस्ट्रैप के गैर-छोटा सीएसएस का पथ जिसे डिफ़ॉल्ट सेटिंग्स का उपयोग करके पूर्व-संकलित किया गया है (कोई अनुकूलन नहीं)

संगीतकार के साथ स्थापित करें

आप कम्पोज़र का उपयोग करके बूटस्ट्रैप के कम, सीएसएस, जावास्क्रिप्ट और फोंट को भी स्थापित और प्रबंधित कर सकते हैं :

$ composer require twbs/bootstrap

कम/सास के लिए आवश्यक ऑटोप्रीफिक्सर

CSS विक्रेता उपसर्गों से निपटने के लिए बूटस्ट्रैप Autoprefixer का उपयोग करता है । यदि आप बूटस्ट्रैप को उसके कम/सास स्रोत से संकलित कर रहे हैं और हमारे ग्रंटफाइल का उपयोग नहीं कर रहे हैं, तो आपको अपनी निर्माण प्रक्रिया में ऑटोप्रिफ़िक्सर को स्वयं एकीकृत करना होगा। यदि आप पहले से संकलित बूटस्ट्रैप का उपयोग कर रहे हैं या हमारे Gruntfile का उपयोग कर रहे हैं, तो आपको इसके बारे में चिंता करने की आवश्यकता नहीं है क्योंकि Autoprefixer पहले से ही हमारे Gruntfile में एकीकृत है।

क्या शामिल है

बूटस्ट्रैप दो रूपों में डाउनलोड करने योग्य है, जिसके भीतर आपको निम्नलिखित निर्देशिकाएं और फाइलें मिलेंगी, जो तार्किक रूप से सामान्य संसाधनों को समूहीकृत करती हैं और संकलित और लघु रूपांतर दोनों प्रदान करती हैं।

प्रीकंपील्ड बूटस्ट्रैप

एक बार डाउनलोड हो जाने के बाद, (संकलित) बूटस्ट्रैप की संरचना देखने के लिए संपीड़ित फ़ोल्डर को अनज़िप करें। आप कुछ इस तरह देखेंगे:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

यह बूटस्ट्रैप का सबसे बुनियादी रूप है: लगभग किसी भी वेब प्रोजेक्ट में त्वरित ड्रॉप-इन उपयोग के लिए पूर्व-संकलित फ़ाइलें। हम संकलित CSS और JS ( bootstrap.*), साथ ही संकलित और लघुकृत CSS और JS ( bootstrap.min.*) प्रदान करते हैं। CSS स्रोत मानचित्र ( bootstrap.*.map) कुछ ब्राउज़रों के डेवलपर टूल के साथ उपयोग के लिए उपलब्ध हैं। Glyphicons से फ़ॉन्ट शामिल हैं, जैसा कि वैकल्पिक बूटस्ट्रैप थीम है।

बूटस्ट्रैप स्रोत कोड

बूटस्ट्रैप स्रोत कोड डाउनलोड में स्रोत कम, जावास्क्रिप्ट और दस्तावेज़ीकरण के साथ पूर्व-संकलित सीएसएस, जावास्क्रिप्ट और फ़ॉन्ट संपत्ति शामिल हैं। अधिक विशेष रूप से, इसमें निम्नलिखित और बहुत कुछ शामिल हैं:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

, less/, js/और fonts/हमारे CSS, JS और आइकन फोंट (क्रमशः) के लिए स्रोत कोड हैं। फ़ोल्डर में उपरोक्त dist/प्रीकंपील्ड डाउनलोड अनुभाग में सूचीबद्ध सब कुछ शामिल है। docs/फ़ोल्डर में हमारे दस्तावेज़ीकरण और examples/बूटस्ट्रैप उपयोग का स्रोत कोड शामिल है। इसके अलावा, कोई अन्य शामिल फ़ाइल पैकेज, लाइसेंस जानकारी और विकास के लिए समर्थन प्रदान करती है।

सीएसएस और जावास्क्रिप्ट का संकलन

बूटस्ट्रैप अपने निर्माण प्रणाली के लिए ग्रंट का उपयोग करता है, ढांचे के साथ काम करने के लिए सुविधाजनक तरीकों के साथ। इस तरह हम अपना कोड संकलित करते हैं, परीक्षण चलाते हैं, और बहुत कुछ करते हैं।

ग्रंट स्थापित करना

ग्रंट को स्थापित करने के लिए, आपको पहले node.js (जिसमें npm शामिल है) डाउनलोड और इंस्टॉल करना होगा। एनपीएम नोड पैकेज्ड मॉड्यूल के लिए खड़ा है और नोड.जेएस के माध्यम से विकास निर्भरताओं को प्रबंधित करने का एक तरीका है।

1. grunt-cliके साथ विश्व स्तर पर स्थापित करें npm install -g grunt-cli।
2. रूट /bootstrap/डायरेक्टरी पर नेविगेट करें, फिर रन करें npm install। npm package.jsonफ़ाइल को देखेगा और स्वचालित रूप से वहां सूचीबद्ध आवश्यक स्थानीय निर्भरताएँ स्थापित करेगा।

पूरा होने पर, आप कमांड लाइन से प्रदान किए गए विभिन्न ग्रंट कमांड को चलाने में सक्षम होंगे।

उपलब्ध ग्रंट कमांड

grunt dist(बस सीएसएस और जावास्क्रिप्ट संकलित करें)

/dist/संकलित और छोटी सीएसएस और जावास्क्रिप्ट फाइलों के साथ निर्देशिका को पुन: उत्पन्न करता है। बूटस्ट्रैप उपयोगकर्ता के रूप में, यह सामान्य रूप से वह आदेश है जो आप चाहते हैं।

grunt watch(घड़ी)

कम स्रोत फ़ाइलों को देखता है और जब भी आप कोई परिवर्तन सहेजते हैं तो उन्हें स्वचालित रूप से सीएसएस में पुन: संकलित करता है।

grunt test(परीक्षण चलाएँ)

JSHint चलाता है और PhantomJS में बिना सिर के QUnit परीक्षण चलाता है ।

grunt docs(दस्तावेज़ संपत्तियों का निर्माण और परीक्षण करें)

सीएसएस, जावास्क्रिप्ट, और अन्य संपत्तियों का निर्माण और परीक्षण करता है जिनका उपयोग स्थानीय रूप से दस्तावेज़ों को चलाने के दौरान किया जाता है bundle exec jekyll serve।

grunt(बिल्कुल सब कुछ बनाएं और परीक्षण चलाएं)

सीएसएस और जावास्क्रिप्ट को संकलित और छोटा करता है, दस्तावेज़ीकरण वेबसाइट बनाता है, दस्तावेज़ों के विरुद्ध HTML5 सत्यापनकर्ता चलाता है, कस्टमाइज़र संपत्तियों को पुन: उत्पन्न करता है, और बहुत कुछ। जेकिल की आवश्यकता है। आमतौर पर केवल तभी आवश्यक होता है जब आप बूटस्ट्रैप पर ही हैकिंग कर रहे हों।

समस्या निवारण

यदि आपको निर्भरता स्थापित करने या ग्रंट कमांड चलाने में समस्या आती है, तो पहले /node_modules/npm द्वारा उत्पन्न निर्देशिका को हटा दें। फिर, फिर से चलाएँ npm install।

मूल टेम्पलेट

इस मूल HTML टेम्पलेट से प्रारंभ करें, या इन उदाहरणों को संशोधित करें । हम आशा करते हैं कि आप हमारे टेम्प्लेट और उदाहरणों को अपनी आवश्यकताओं के अनुरूप अनुकूलित करते हुए अनुकूलित करेंगे।

न्यूनतम बूटस्ट्रैप दस्तावेज़ के साथ काम करना शुरू करने के लिए नीचे दिए गए HTML को कॉपी करें।

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

उदाहरण

बूटस्ट्रैप के कई घटकों के साथ ऊपर दिए गए मूल टेम्पलेट पर निर्माण करें। हम आपको बूटस्ट्रैप को अनुकूलित और अनुकूलित करने के लिए प्रोत्साहित करते हैं जो आपकी व्यक्तिगत परियोजना की आवश्यकताओं के अनुरूप हो।

नीचे दिए गए प्रत्येक उदाहरण के लिए बूटस्ट्रैप रिपॉजिटरी डाउनलोड करके स्रोत कोड प्राप्त करें । docs/examples/उदाहरण निर्देशिका में पाए जा सकते हैं ।

ढांचे का उपयोग करना

स्टार्टर टेम्पलेट

मूल बातें के अलावा कुछ नहीं: एक कंटेनर के साथ संकलित सीएसएस और जावास्क्रिप्ट।

बूटस्ट्रैप थीम

नेत्रहीन बेहतर अनुभव के लिए वैकल्पिक बूटस्ट्रैप थीम लोड करें।

ग्रिड

सभी चार स्तरों के साथ ग्रिड लेआउट के कई उदाहरण, नेस्टिंग, और बहुत कुछ।

jumbotron

जंबोट्रॉन के चारों ओर एक नेवबार और कुछ बुनियादी ग्रिड कॉलम बनाएं।

संकीर्ण जंबोट्रॉन

डिफ़ॉल्ट कंटेनर और जंबोट्रॉन को कम करके अधिक कस्टम पेज बनाएं।

कार्रवाई में नेवबार

नेवबार

सुपर बेसिक टेम्प्लेट जिसमें कुछ अतिरिक्त सामग्री के साथ नावबार शामिल है।

स्टेटिक टॉप नेवबार

कुछ अतिरिक्त सामग्री के साथ स्टेटिक टॉप नेवबार के साथ सुपर बेसिक टेम्प्लेट।

फिक्स्ड नेवबार

कुछ अतिरिक्त सामग्री के साथ फिक्स्ड टॉप नेवबार के साथ सुपर बेसिक टेम्प्लेट।

कस्टम घटक

ढकना

सरल और सुंदर होम पेज बनाने के लिए एक पेज का टेम्प्लेट।

हिंडोला

नावबार और हिंडोला को अनुकूलित करें, फिर कुछ नए घटक जोड़ें।

ब्लॉग

कस्टम नेविगेशन, हेडर और प्रकार के साथ सरल दो-स्तंभ ब्लॉग लेआउट।

डैशबोर्ड

फिक्स्ड साइडबार और नेवबार के साथ एक व्यवस्थापक डैशबोर्ड के लिए मूल संरचना।

साइन-इन पेज

एक साधारण साइन इन फॉर्म के लिए कस्टम फॉर्म लेआउट और डिज़ाइन।

न्यायोचित नौसेना

उचित लिंक के साथ एक कस्टम नेवबार बनाएं। सचेत! ज्यादा सफारी फ्रेंडली नहीं।

चिपचिपा पाद लेख

जब सामग्री इससे छोटी हो, तो व्यूपोर्ट के नीचे एक पादलेख संलग्न करें।

नवबार के साथ चिपचिपा पाद

व्यूपोर्ट के नीचे एक फ़ुटर संलग्न करें जिसमें शीर्ष पर एक निश्चित नावबार हो।

प्रयोगों

गैर-उत्तरदायी बूटस्ट्रैप

हमारे डॉक्स के अनुसार बूटस्ट्रैप की प्रतिक्रियाशीलता को आसानी से अक्षम करें ।

ऑफ कैनवास

बूटस्ट्रैप के साथ उपयोग के लिए टॉगल करने योग्य ऑफ-कैनवास नेविगेशन मेनू बनाएं।

औजार

बूटलिंट

बूटलिंट आधिकारिक बूटस्ट्रैप एचटीएमएल लिंटर टूल है। यह स्वचालित रूप से उन वेबपृष्ठों में कई सामान्य HTML गलतियों की जाँच करता है जो काफी "वेनिला" तरीके से बूटस्ट्रैप का उपयोग कर रहे हैं। वेनिला बूटस्ट्रैप के घटकों/विजेटों को कुछ संरचनाओं के अनुरूप डीओएम के अपने हिस्सों की आवश्यकता होती है। बूटलिंट जाँचता है कि बूटस्ट्रैप घटकों के उदाहरणों में सही ढंग से संरचित HTML है। अपने बूटस्ट्रैप वेब डेवलपमेंट टूलचैन में बूटलिंट जोड़ने पर विचार करें ताकि कोई भी सामान्य गलती आपके प्रोजेक्ट के विकास को धीमा न कर दे।

समुदाय

बूटस्ट्रैप के विकास पर अद्यतित रहें और इन सहायक संसाधनों के साथ समुदाय तक पहुंचें।

• आधिकारिक बूटस्ट्रैप ब्लॉग पढ़ें और सदस्यता लें ।
• ##bootstrap चैनलirc.freenode.net में सर्वर में IRC का उपयोग करके साथी बूटस्ट्रैपर्स के साथ चैट करें ।
• बूटस्ट्रैप का उपयोग करने में सहायता के लिए, टैग का उपयोग करके StackOverflowtwitter-bootstrap-3 पर पूछें ।
• डेवलपर्स को उन पैकेजों पर कीवर्ड का उपयोग करना चाहिए जो एनपीएम या समान वितरण तंत्र के माध्यम से अधिकतम खोज के लिए bootstrapवितरित करते समय बूटस्ट्रैप की कार्यक्षमता को संशोधित या जोड़ते हैं ।
• बूटस्ट्रैप एक्सपो में बूटस्ट्रैप के साथ निर्माण करने वाले लोगों के प्रेरक उदाहरण खोजें ।

नवीनतम गपशप और भयानक संगीत वीडियो के लिए आप ट्विटर पर @getbootstrap का भी अनुसरण कर सकते हैं ।

प्रतिक्रिया अक्षम करना

बूटस्ट्रैप स्वचालित रूप से आपके पृष्ठों को विभिन्न स्क्रीन आकारों के लिए अनुकूलित करता है। यहां इस सुविधा को अक्षम करने का तरीका बताया गया है ताकि आपका पृष्ठ इस गैर-प्रतिक्रियाशील उदाहरण की तरह काम करे ।

पृष्ठ प्रतिक्रियाशीलता को अक्षम करने के चरण

1. CSS डॉक्स<meta> में उल्लिखित व्यूपोर्ट को छोड़ दें
2. एक ही चौड़ाई के साथ प्रत्येक ग्रिड टियर widthके लिए ऑन को ओवरराइड करें , उदाहरण के लिए सुनिश्चित करें कि यह डिफ़ॉल्ट बूटस्ट्रैप सीएसएस के बाद आता है। आप वैकल्पिक रूप से मीडिया प्रश्नों या कुछ चयनकर्ता-फू से बच सकते हैं।.containerwidth: 970px !important;!important
3. यदि नेवबार का उपयोग कर रहे हैं, तो सभी नेवबार ढहने और व्यवहार का विस्तार करने को हटा दें।
4. ग्रिड लेआउट के .col-xs-*लिए, मध्यम/बड़े वाले के अलावा या उनके स्थान पर कक्षाओं का उपयोग करें। चिंता न करें, अतिरिक्त-छोटा डिवाइस ग्रिड सभी रिज़ॉल्यूशन को मापता है।

IE8 के लिए आपको अभी भी Respond.js की आवश्यकता होगी (चूंकि हमारे मीडिया प्रश्न अभी भी हैं और उन्हें संसाधित करने की आवश्यकता है)। यह बूटस्ट्रैप के "मोबाइल साइट" पहलुओं को अक्षम करता है।

प्रतिक्रिया के साथ बूटस्ट्रैप टेम्पलेट अक्षम

हमने इन चरणों को एक उदाहरण पर लागू किया है। लागू किए गए विशिष्ट परिवर्तनों को देखने के लिए इसका स्रोत कोड पढ़ें।

गैर-प्रतिक्रियाशील उदाहरण देखें

ब्राउज़र और डिवाइस का समर्थन

बूटस्ट्रैप को नवीनतम डेस्कटॉप और मोबाइल ब्राउज़र में सबसे अच्छा काम करने के लिए बनाया गया है, जिसका अर्थ है कि पुराने ब्राउज़र अलग-अलग शैली में प्रदर्शित हो सकते हैं, हालांकि पूरी तरह कार्यात्मक, कुछ घटकों के रेंडरिंग।

समर्थित ब्राउज़र

विशेष रूप से, हम निम्नलिखित ब्राउज़रों और प्लेटफार्मों के नवीनतम संस्करणों का समर्थन करते हैं।

वैकल्पिक ब्राउज़र जो वेबकिट, ब्लिंक, या गेको के नवीनतम संस्करण का उपयोग करते हैं, चाहे सीधे या प्लेटफॉर्म के वेब व्यू एपीआई के माध्यम से, स्पष्ट रूप से समर्थित नहीं हैं। हालाँकि, बूटस्ट्रैप को (ज्यादातर मामलों में) इन ब्राउज़रों में भी सही ढंग से प्रदर्शित और कार्य करना चाहिए। अधिक विशिष्ट समर्थन जानकारी नीचे दी गई है।

मोबाइल उपकरणों

सामान्यतया, बूटस्ट्रैप प्रत्येक प्रमुख प्लेटफ़ॉर्म के डिफ़ॉल्ट ब्राउज़र के नवीनतम संस्करणों का समर्थन करता है। ध्यान दें कि प्रॉक्सी ब्राउज़र (जैसे ओपेरा मिनी, ओपेरा मोबाइल का टर्बो मोड, यूसी ब्राउज़र मिनी, अमेज़ॅन सिल्क) समर्थित नहीं हैं।

डेस्कटॉप ब्राउज़र

इसी तरह, अधिकांश डेस्कटॉप ब्राउज़र के नवीनतम संस्करण समर्थित हैं।

विंडोज़ पर, हम इंटरनेट एक्सप्लोरर 8-11 का समर्थन करते हैं ।

फ़ायरफ़ॉक्स के लिए, नवीनतम सामान्य स्थिर रिलीज़ के अलावा, हम फ़ायरफ़ॉक्स के नवीनतम विस्तारित समर्थन रिलीज़ (ESR) संस्करण का भी समर्थन करते हैं।

अनौपचारिक रूप से, बूटस्ट्रैप को क्रोमियम और लिनक्स के लिए क्रोम, लिनक्स के लिए फ़ायरफ़ॉक्स, और इंटरनेट एक्सप्लोरर 7 के साथ-साथ माइक्रोसॉफ्ट एज में अच्छी तरह से दिखना चाहिए और व्यवहार करना चाहिए, हालांकि वे आधिकारिक तौर पर समर्थित नहीं हैं।

कुछ ब्राउज़र बगों की सूची के लिए जिनसे बूटस्ट्रैप को जूझना पड़ता है, हमारे वॉल ऑफ़ ब्राउजर बग्स देखें ।

इंटरनेट एक्सप्लोरर 8 और 9

इंटरनेट एक्सप्लोरर 8 और 9 भी समर्थित हैं, हालांकि, कृपया ध्यान रखें कि कुछ CSS3 गुण और HTML5 तत्व इन ब्राउज़रों द्वारा पूरी तरह से समर्थित नहीं हैं। इसके अलावा, Internet Explorer 8 को मीडिया क्वेरी समर्थन को सक्षम करने के लिए Respond.js के उपयोग की आवश्यकता है।

CSS3 और HTML5 सुविधाओं के ब्राउज़र समर्थन के विवरण के लिए क्या मैं उपयोग कर सकता हूं... पर जाएं ।

Internet Explorer 8 और Respond.js

Internet Explorer 8 के लिए अपने विकास और उत्पादन परिवेश में Respond.js का उपयोग करते समय निम्नलिखित सावधानियों से सावधान रहें।

Respond.js और क्रॉस-डोमेन CSS

किसी भिन्न (उप) डोमेन (उदाहरण के लिए, सीडीएन पर) पर होस्ट किए गए CSS के साथ Respond.js का उपयोग करने के लिए कुछ अतिरिक्त सेटअप की आवश्यकता होती है। विवरण के लिए Respond.js डॉक्स देखें।

जवाब.जेएस औरfile://

ब्राउज़र सुरक्षा नियमों के कारण, Respond.js file://प्रोटोकॉल के माध्यम से देखे गए पृष्ठों के साथ काम नहीं करता (जैसे स्थानीय HTML फ़ाइल खोलते समय)। IE8 में प्रतिक्रियाशील सुविधाओं का परीक्षण करने के लिए, अपने पृष्ठों को HTTP(S) पर देखें। विवरण के लिए Respond.js डॉक्स देखें।

जवाब.जेएस और@import

Respond.js CSS के साथ काम नहीं करता है जिसे @import. विशेष रूप से, कुछ ड्रूपल कॉन्फ़िगरेशन का उपयोग करने के लिए जाना जाता है @import। विवरण के लिए Respond.js डॉक्स देखें।

इंटरनेट एक्सप्लोरर 8 और बॉक्स-साइज़िंग

IE8 , , , या box-sizing: border-box;के साथ संयुक्त होने पर पूरी तरह से समर्थन नहीं करता है । इस कारण से, v3.0.1 के अनुसार, हम अब s पर उपयोग नहीं करते हैं ।min-widthmax-widthmin-heightmax-heightmax-width.container

इंटरनेट एक्सप्लोरर 8 और @font-face

IE8 के साथ @font-faceसंयुक्त होने पर कुछ समस्याएं हैं :before। बूटस्ट्रैप अपने Glyphicons के साथ उस संयोजन का उपयोग करता है। यदि कोई पृष्ठ कैश किया गया है, और खिड़की पर माउस के बिना लोड किया गया है (यानी रीफ्रेश बटन दबाएं या आईफ्रेम में कुछ लोड करें) तो पृष्ठ फ़ॉन्ट लोड होने से पहले प्रस्तुत हो जाता है। पृष्ठ (बॉडी) पर होवर करने से कुछ आइकन दिखाई देंगे और शेष आइकन पर होवर करने से वे भी दिखाई देंगे। विवरण के लिए अंक #13863 देखें।

आईई संगतता मोड

बूटस्ट्रैप पुराने इंटरनेट एक्सप्लोरर संगतता मोड में समर्थित नहीं है। यह सुनिश्चित करने के लिए कि आप IE के लिए नवीनतम रेंडरिंग मोड का उपयोग कर रहे हैं, <meta>अपने पृष्ठों में उपयुक्त टैग शामिल करने पर विचार करें:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

डिबगिंग टूल खोलकर दस्तावेज़ मोड की पुष्टि करें: F12"दस्तावेज़ मोड" को दबाएं और जांचें।

यह टैग बूटस्ट्रैप के सभी दस्तावेज़ों और उदाहरणों में शामिल है ताकि यह सुनिश्चित किया जा सके कि इंटरनेट एक्सप्लोरर के प्रत्येक समर्थित संस्करण में सर्वोत्तम प्रतिपादन संभव है।

अधिक जानकारी के लिए यह स्टैक ओवरफ्लो प्रश्न देखें ।

विंडोज 8 और विंडोज फोन 8 में इंटरनेट एक्सप्लोरर 10

Internet Explorer 10 डिवाइस की चौड़ाई को व्यूपोर्ट की चौड़ाई से अलग नहीं करता है , और इस प्रकार बूटस्ट्रैप के CSS में मीडिया प्रश्नों को ठीक से लागू नहीं करता है। आम तौर पर आप इसे ठीक करने के लिए CSS का एक त्वरित स्निपेट जोड़ेंगे:

@-ms-viewport       { width: device-width; }

हालांकि, यह अपडेट 3 (उर्फ जीडीआर3) से पुराने विंडोज फोन 8 संस्करण चलाने वाले उपकरणों के लिए काम नहीं करता है , क्योंकि यह ऐसे उपकरणों को संकीर्ण "फोन" दृश्य के बजाय अधिकतर डेस्कटॉप दृश्य दिखाने का कारण बनता है। इसका समाधान करने के लिए, आपको बग के समाधान के लिए निम्नलिखित सीएसएस और जावास्क्रिप्ट को शामिल करना होगा ।

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

अधिक जानकारी और उपयोग दिशानिर्देशों के लिए, विंडोज फोन 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 के रूप में, निश्चित-चौड़ाई .containers, Safari को मुद्रण करते समय असामान्य रूप से छोटे फ़ॉन्ट आकार का उपयोग करने का कारण बन सकता है। अधिक विवरण के लिए #14868 और वेबकिट बग #138192 देखें । इसके लिए एक संभावित समाधान निम्नलिखित सीएसएस जोड़ना है:

@media print {
  .container {
    width: auto;
  }
}

एंड्रॉइड स्टॉक ब्राउज़र

बॉक्स से बाहर, एंड्रॉइड 4.1 (और जाहिर तौर पर कुछ नए रिलीज भी) ब्राउज़र ऐप के साथ पसंद के डिफ़ॉल्ट वेब ब्राउज़र के रूप में जहाज (क्रोम के विपरीत)। दुर्भाग्य से, ब्राउज़र ऐप में सामान्य रूप से सीएसएस के साथ बहुत सारे बग और विसंगतियां हैं।

मेनू का चयन करें

तत्वों पर <select>, एंड्रॉइड स्टॉक ब्राउज़र साइड कंट्रोल प्रदर्शित नहीं करेगा यदि कोई border-radiusऔर/या borderलागू है। ( विवरण के लिए यह स्टैक ओवरफ्लो प्रश्न देखें।) आपत्तिजनक सीएसएस को हटाने के लिए नीचे दिए गए कोड के स्निपेट का उपयोग करें और <select>एंड्रॉइड स्टॉक ब्राउज़र पर एक अस्थिर तत्व के रूप में प्रस्तुत करें। उपयोगकर्ता एजेंट सूँघने से क्रोम, सफारी और मोज़िला ब्राउज़र में हस्तक्षेप से बचा जाता है।

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

एक उदाहरण देखना चाहते हैं? यह जेएस बिन डेमो देखें।

प्रमाणकों

पुराने और छोटे ब्राउज़रों को सर्वोत्तम संभव अनुभव प्रदान करने के लिए, बूटस्ट्रैप कई स्थानों पर सीएसएस ब्राउज़र हैक्स का उपयोग करता है ताकि ब्राउज़र में बग के आसपास काम करने के लिए कुछ ब्राउज़र संस्करणों के लिए विशेष सीएसएस को लक्षित किया जा सके। ये हैक समझ में आता है कि सीएसएस सत्यापनकर्ता शिकायत करते हैं कि वे अमान्य हैं। कुछ जगहों पर, हम ब्लीडिंग-एज CSS सुविधाओं का भी उपयोग करते हैं जो अभी तक पूरी तरह से मानकीकृत नहीं हैं, लेकिन इनका उपयोग विशुद्ध रूप से प्रगतिशील वृद्धि के लिए किया जाता है।

ये सत्यापन चेतावनियां व्यवहार में कोई मायने नहीं रखती हैं क्योंकि हमारे सीएसएस का गैर-हैकी भाग पूरी तरह से मान्य है और हैकी हिस्से गैर-हैकी हिस्से के उचित कामकाज में हस्तक्षेप नहीं करते हैं, इसलिए हम जानबूझकर इन विशेष चेतावनियों को अनदेखा क्यों करते हैं।

हमारे HTML दस्तावेज़ों में भी कुछ मामूली और अप्रासंगिक HTML सत्यापन चेतावनियाँ हैं, जो हमारे द्वारा एक निश्चित Firefox बग के लिए समाधान शामिल किए जाने के कारण हैं ।

तीसरे पक्ष का समर्थन

हालांकि हम आधिकारिक तौर पर किसी तीसरे पक्ष के प्लगइन्स या ऐड-ऑन का समर्थन नहीं करते हैं, हम आपकी परियोजनाओं में संभावित समस्याओं से बचने में मदद करने के लिए कुछ उपयोगी सलाह प्रदान करते हैं।

बॉक्स आकार

कुछ तृतीय पक्ष सॉफ़्टवेयर, जिनमें Google मानचित्र और Google कस्टम खोज इंजन शामिल हैं, बूटस्ट्रैप के साथ संघर्ष करते हैं * { box-sizing: border-box; }, एक नियम जो इसे ऐसा बनाता है padding, किसी तत्व की अंतिम गणना की गई चौड़ाई को प्रभावित नहीं करता है। CSS ट्रिक्स पर बॉक्स मॉडल और साइज़िंग के बारे में अधिक जानें ।

संदर्भ के आधार पर, आप आवश्यकतानुसार (विकल्प 1) को ओवरराइड कर सकते हैं या पूरे क्षेत्रों के लिए बॉक्स-आकार को रीसेट कर सकते हैं (विकल्प 2)।

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

सरल उपयोग

बूटस्ट्रैप सामान्य वेब मानकों का पालन करता है और—न्यूनतम अतिरिक्त प्रयास के साथ—ऐसी साइटों को बनाने के लिए उपयोग किया जा सकता है जो एटी का उपयोग करने वालों के लिए सुलभ हैं ।

नेविगेशन छोड़ें

यदि आपके नेविगेशन में कई लिंक हैं और DOM में मुख्य सामग्री से पहले आते हैं, Skip to main contentतो नेविगेशन से पहले एक लिंक जोड़ें (एक सरल व्याख्या के लिए, स्किप नेविगेशन लिंक पर यह A11Y प्रोजेक्ट आलेख देखें )। कक्षा का उपयोग करने .sr-onlyसे स्किप लिंक नेत्रहीन रूप से छिप जाएगा, और .sr-only-focusableकक्षा यह सुनिश्चित करेगी कि एक बार फ़ोकस किए जाने पर (देखे गए कीबोर्ड उपयोगकर्ताओं के लिए) लिंक दृश्यमान हो जाए।

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

नेस्टेड शीर्षक

<h1>शीर्षकों ( - ) को नेस्ट करते समय <h6>, आपका प्राथमिक दस्तावेज़ शीर्षलेख एक होना चाहिए <h1>। बाद के शीर्षकों का तार्किक उपयोग करना चाहिए <h2>- <h6>जैसे कि स्क्रीन रीडर आपके पृष्ठों के लिए सामग्री की एक तालिका बना सकते हैं।

HTML CodeSniffer और Penn State's AccessAbility पर और जानें ।

रंग विपरीत

वर्तमान में, बूटस्ट्रैप में उपलब्ध कुछ डिफ़ॉल्ट रंग संयोजन (जैसे कि विभिन्न स्टाइल बटन वर्ग, मूल कोड ब्लॉक के लिए उपयोग किए जाने वाले कुछ कोड हाइलाइटिंग रंग , .bg-primary प्रासंगिक पृष्ठभूमि सहायक वर्ग, और सफेद पृष्ठभूमि पर उपयोग किए जाने पर डिफ़ॉल्ट लिंक रंग) कम विपरीत अनुपात है ( अनुशंसित अनुपात 4.5:1 से नीचे )। इससे कम दृष्टि वाले या कलर ब्लाइंड वाले उपयोगकर्ताओं को समस्या हो सकती है। इन डिफ़ॉल्ट रंगों को उनके कंट्रास्ट और सुपाठ्यता को बढ़ाने के लिए संशोधित करने की आवश्यकता हो सकती है।

अतिरिक्त संसाधन

• अभिगम्यता समस्याओं की पहचान के लिए "HTML Codesniffer" बुकमार्कलेट
• क्रोम की एक्सेसिबिलिटी डेवलपर टूल्स एक्सटेंशन
• रंग कंट्रास्ट विश्लेषक
• A11Y प्रोजेक्ट
• एमडीएन अभिगम्यता दस्तावेज

लाइसेंस अक्सर पूछे जाने वाले प्रश्न

बूटस्ट्रैप एमआईटी लाइसेंस के तहत जारी किया गया है और कॉपीराइट 2016 ट्विटर है। छोटे टुकड़ों में उबालकर, इसे निम्नलिखित स्थितियों के साथ वर्णित किया जा सकता है।

इसके लिए आपको आवश्यकता है:

• जब आप अपने कार्यों में उनका उपयोग करते हैं तो बूटस्ट्रैप की सीएसएस और जावास्क्रिप्ट फाइलों में लाइसेंस और कॉपीराइट नोटिस शामिल रखें

यह आपको इसकी अनुमति देता है:

• व्यक्तिगत, निजी, कंपनी के आंतरिक, या व्यावसायिक उद्देश्यों के लिए, बूटस्ट्रैप को पूरी तरह से या आंशिक रू�� से डाउनलोड और उपयोग करें
• आपके द्वारा बनाए गए पैकेज या वितरण में बूटस्ट्रैप का उपयोग करें
• स्रोत कोड को संशोधित करें
• बूटस्ट्रैप को संशोधित करने और लाइसेंस में शामिल नहीं किए गए तृतीय पक्षों को वितरित करने के लिए एक उप-लाइसेंस प्रदान करें

यह आपको इसके लिए मना करता है:

• लेखकों और लाइसेंस मालिकों को नुकसान के लिए उत्तरदायी ठहराएं क्योंकि बूटस्ट्रैप बिना वारंटी के प्रदान किया जाता है
• बूटस्ट्रैप के रचनाकारों या कॉपीराइट धारकों को उत्तरदायी ठहराएं
• बूटस्ट्रैप के किसी भी टुकड़े को उचित एट्रिब्यूशन के बिना पुनर्वितरित करें
• Twitter के स्वामित्व वाले किसी भी चिह्न का किसी भी तरह से उपयोग करें जो यह बता सकता है या संकेत दे सकता है कि Twitter आपके वितरण का समर्थन करता है
• ट्विटर के स्वामित्व वाले किसी भी निशान का किसी भी तरह से उपयोग करें जो यह बता सकता है या संकेत दे सकता है कि आपने ट्विटर सॉफ्टवेयर बनाया है

इसके लिए आपको इसकी आवश्यकता नहीं है:

• बूटस्ट्रैप के स्रोत को शामिल करें, या आपके द्वारा इसमें किए गए किसी भी संशोधन को, किसी भी पुनर्वितरण में शामिल करें जिसमें आप इसे शामिल कर सकते हैं
• बूटस्ट्रैप प्रोजेक्ट में आपके द्वारा किए गए परिवर्तन सबमिट करें (हालांकि इस तरह की प्रतिक्रिया को प्रोत्साहित किया जाता है)

पूर्ण बूटस्ट्रैप लाइसेंस अधिक जानकारी के लिए प्रोजेक्ट रिपॉजिटरी में स्थित है।

अनुवाद

समुदाय के सदस्यों ने बूटस्ट्रैप के दस्तावेज़ीकरण का विभिन्न भाषाओं में अनुवाद किया है। कोई भी आधिकारिक रूप से समर्थित नहीं है और हो सकता है कि वे हमेशा अद्यतित न हों।

• बूटस्ट्रैप (चीनी)
• बूटस्ट्रैप 3 (चीनी (पारंपरिक))
• बूटस्ट्रैप पी डांस्क (डेनिश)
• बूटस्ट्रैप एन फ़्रांसीसी (फ़्रेंच)
• बूटस्ट्रैप औफ़ Deutsch (जर्मन)
• इटालियनो (इतालवी) में बूटस्ट्रैप
• बूटस्ट्रैप (कोरियाई)
• बूटस्ट्रैप एम Português do Brasil (ब्राज़ीलियाई पुर्तगाली)
• बूटस्ट्रैप о-русски (रूसी)
• बूटस्ट्रैप एन Español (स्पेनिश)
• तुर्की बूटस्ट्रैप (तुर्की)
• बूटस्ट्रैप українською (यूक्रेनी)
• बूटस्ट्रैप बिंग तियांग वियतनाम (वियतनामी)

हम अनुवादों को व्यवस्थित या होस्ट करने में सहायता नहीं करते हैं, हम केवल उनसे लिंक करते हैं।

एक नया या बेहतर अनुवाद समाप्त किया? इसे हमारी सूची में जोड़ने के लिए एक पुल अनुरोध खोलें।