डाउनलोड करीं

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

बूटस्ट्रैप के बा

सीएसएस, जावास्क्रिप्ट, आ फॉन्ट के संकलित आ लघुकृत कइल गइल बा. कवनो डॉक्स भा मूल स्रोत फाइल शामिल नइखे कइल गइल.

बूटस्ट्रैप डाउनलोड करीं

स्रोत कोड के बारे में बतावल गइल बा

सोर्स लेस, जावास्क्रिप्ट, आ फॉन्ट फाइल के साथे हमनी के डॉक्स के भी। एगो Less compiler आ कुछ सेटअप के जरूरत बा।

स्रोत डाउनलोड करीं

ससस के बा

बूटस्ट्रैप के रेल, कम्पास, या सास-ओनली प्रोजेक्ट में आसानी से शामिल करे खातिर लेस से सास में पोर्ट कइल गइल ।

सास के डाउनलोड करीं

जेएसडेलिवर के बा

jsDelivr पर लोग कृपा से बूटस्ट्रैप के सीएसएस आ जावास्क्रिप्ट खातिर सीडीएन समर्थन प्रदान करेला। बस एह jsDelivr लिंक के इस्तेमाल करीं.

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

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

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

बावर के साथे इंस्टॉल करीं

रउआँ बावर के इस्तेमाल से बूटस्ट्रैप के लेस, सीएसएस, जावास्क्रिप्ट, आ फॉन्ट सभ के भी इंस्टॉल आ प्रबंधित क सकत बानी :

bower install bootstrap

एनपीएम के साथ इंस्टॉल करीं

रउआँ npm के इस्तेमाल से बूटस्ट्रैप भी इंस्टॉल कर सकत बानी :

npm install bootstrap@3

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

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

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

कम्पोजर के साथे इंस्टॉल करीं

रउआँ Composer के इस्तेमाल से बूटस्ट्रैप के Less, CSS, JavaScript, आ फॉन्ट सभ के भी इंस्टॉल आ प्रबंधित क सकत बानी :

composer require twbs/bootstrap

कम/सास खातिर ऑटोप्रिफिक्सर के जरूरत बा

बूटस्ट्रैप सीएसएस विक्रेता उपसर्ग से निपटे खातिर ऑटोप्रिफिक्सर के इस्तेमाल करेला . अगर रउआ बूटस्ट्रैप के ओकर Less/Sass स्रोत से संकलित कर रहल बानी आ हमनी के Gruntfile के इस्तेमाल नइखीं करत, त रउआ खुदे Autoprefixer के अपना बिल्ड प्रक्रिया में एकीकृत करे के पड़ी। अगर रउआ प्रीकंपाइल बूटस्ट्रैप के इस्तेमाल कर रहल बानी या हमनी के ग्रंटफाइल के इस्तेमाल कर रहल बानी त रउआ एह बारे में चिंता करे के जरूरत नइखे काहे कि ऑटोप्रिफिक्सर हमनी के ग्रंटफाइल में पहिले से एकीकृत बा।

का शामिल बा

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

जेक्वेरी के जरूरत बा

कृपया ध्यान दीं कि सभ जावास्क्रिप्ट प्लगइन सभ के jQuery के शामिल करे के जरूरत बा, जइसे कि स्टार्टर टेम्पलेट में देखावल गइल बा । हमनी से सलाह लींbower.json कि jQuery के कवन संस्करण समर्थित बा।

पहिले से संकलित बूटस्ट्रैप बा

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

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

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

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

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

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

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

सीएसएस आ जावास्क्रिप्ट के संकलन कइल जा रहल बा

बूटस्ट्रैप अपना बिल्ड सिस्टम खातिर ग्रंट के इस्तेमाल करे ला, फ्रेमवर्क के साथ काम करे खातिर सुविधाजनक तरीका सभ के साथ। ई हमनी के आपन कोड कइसे संकलित करेनी जा, टेस्ट चलावेनी जा, आ अउरी बहुत कुछ।

ग्रंट के इंस्टॉल कइल जा रहल बा

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

एकरा बाद, कमांड लाइन से:
  1. grunt-cliके साथ ग्लोबल रूप से इंस्टॉल करीं npm install -g grunt-cli.
  2. रूट /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 के कॉपी करीं।

<!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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 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://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

उदाहरण खातिर दिहल गइल बा

बूटस्ट्रैप के कई गो घटक सभ के साथ ऊपर दिहल गइल बेसिक टेम्पलेट पर बिल्ड करीं। हमनी के रउआ के प्रोत्साहित करत बानी जा कि रउआ अपना व्यक्तिगत प्रोजेक्ट के जरूरत के मुताबिक बूटस्ट्रैप के अनुकूलित आ अनुकूलित करीं।

बूटस्ट्रैप रिपोजिटरी डाउनलोड करके नीचे दिहल हर उदाहरण खातिर स्रोत कोड प्राप्त करीं . docs/examples/उदाहरण डाइरेक्टरी में मिल सकेला ।

ढाँचा के इस्तेमाल करत बानी

स्टार्टर टेम्पलेट के उदाहरण दिहल गइल बा

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

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

बूटस्ट्रैप थीम के उदाहरण बा

बूटस्ट्रैप के विषय बा

दृश्य रूप से बढ़ावल अनुभव खातिर वैकल्पिक बूटस्ट्रैप थीम लोड करीं।

कई गो ग्रिड के उदाहरण दिहल गइल बा

ग्रिड के बा

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

जंबोट्रॉन के उदाहरण दिहल गइल बा

जंबोट्रॉन के बा

नवबार आ कुछ बेसिक ग्रिड कॉलम के साथ जंबोट्रॉन के आसपास बनाईं।

संकीर्ण जंबोट्रॉन के उदाहरण बा

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

डिफ़ॉल्ट कंटेनर आ जंबोट्रॉन के संकुचित क के एगो अउरी कस्टम पन्ना बनाईं।

नवबर एक्शन में बा

नवबर के उदाहरण बा

नवबर के बा

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

स्थिर ऊपर नवबार के उदाहरण बा

स्थिर ऊपर नवबार के बा

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

नवबार के उदाहरण तय हो गइल बा

नवबार के ठीक कर दिहल गइल

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

कस्टम घटक के बा

एक पन्ना के टेम्पलेट के उदाहरण बा

ढँकल

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

हिंडोला के उदाहरण दिहल गइल बा

हिंडोला के बा

नवबार आ हिंडोला के अनुकूलित करीं, ओकरा बाद कुछ नया घटक जोड़ीं.

ब्लॉग लेआउट के उदाहरण दिहल गइल बा

ब्लॉग कइले बानी

कस्टम नेविगेशन, हेडर, आ टाइप के साथे सरल दू कॉलम वाला ब्लॉग लेआउट।

डैशबोर्ड के उदाहरण दिहल गइल बा

डैशबोर्ड के बा

फिक्स साइडबार आ नवबार वाला एडमिन डैशबोर्ड खातिर बेसिक स्ट्रक्चर।

साइन-इन पन्ना के उदाहरण बा

साइन इन करीं पन्ना पर बा

फॉर्म में एगो साधारण साइन खातिर कस्टम फॉर्म लेआउट आ डिजाइन।

जायज नव उदाहरण दिहल गइल बा

जायज ठहरावल नव

जायज लिंक के साथ एगो कस्टम नवबार बनाईं। हेड अप हो गइल बा! ज्यादा सफारी के अनुकूल ना।

चिपचिपा पाद लेख के उदाहरण बा

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

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

नवबार उदाहरण के साथ चिपचिपा पाद लेख

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

व्यूपोर्ट के नीचे एगो पाद लेख संलग्न करीं जवना के ऊपर एगो फिक्स नवबार होखे।

प्रयोग कइल गइल बा

गैर-उत्तरदायी उदाहरण दिहल गइल बा

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

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

ऑफ-कैनवास नेविगेशन के उदाहरण बा

ऑफ कैनवास के बा

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

उपकरण

बूटलिंट के बा

बूटलिंट आधिकारिक बूटस्ट्रैप एचटीएमएल लिंटर टूल हवे। ई वेबपेज सभ में कई गो आम एचटीएमएल गलती सभ के स्वचालित रूप से जांच करे ला जे बूटस्ट्रैप के काफी "वेनिला" तरीका से इस्तेमाल कर रहल बाड़ें। वेनिला बूटस्ट्रैप के घटक/विजेट सभ खातिर DOM के उनके हिस्सा सभ के कुछ खास संरचना सभ के अनुरूप होखे के जरूरत होला। बूटलिंट जांच करे ला कि बूटस्ट्रैप घटक सभ के इंस्टेंस सभ में सही तरीका से-संरचित एचटीएमएल बा। अपना बूटस्ट्रैप वेब डेवलपमेंट टूलचेन में बूटलिंट जोड़ला पर विचार करीं जेहसे कि कवनो आम गलती रउरा प्रोजेक्ट के डेवलपमेंट के धीमा ना करे.

बेरादरी

बूटस्ट्रैप के विकास के बारे में अपडेट रहीं आ एह सहायक संसाधनन से समुदाय तक पहुँचीं.

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

ताजा गपशप आ लाजवाब म्यूजिक वीडियो खातिर रउआ ट्विटर पर @getbootstrap के भी फॉलो कर सकेनी ।

प्रतिक्रियाशीलता के अक्षम कइल जा रहल बा

बूटस्ट्रैप आपके पन्ना सभ के बिबिध स्क्रीन साइज खातिर स्वचालित रूप से अनुकूलित क देला। इहाँ बतावल गइल बा कि एह फीचर के कइसे अक्षम कइल जाला ताकि राउर पन्ना एह गैर-उत्तरदायी उदाहरण नियर काम करे .

पन्ना प्रतिक्रियाशीलता के अक्षम करे खातिर कदम

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

रउआँ के अभी भी IE8 खातिर Respond.js के जरूरत पड़ी (काहें से कि हमनी के मीडिया क्वेरी अभी भी बा आ एकरा के प्रोसेस करे के जरूरत बा)। एह से बूटस्ट्रैप के "मोबाइल साइट" पहलू अक्षम हो जाला।

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

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

गैर-उत्तरदायी उदाहरण देखल जाव

v2.x से v3.x में माइग्रेट हो रहल बा

बूटस्ट्रैप के पुरान संस्करण से v3.x में माइग्रेट करे के तलाश में बानी? हमनी के माइग्रेशन गाइड देखल जाव .

ब्राउजर आ डिवाइस के सपोर्ट बा

बूटस्ट्रैप के नवीनतम डेस्कटॉप आ मोबाइल ब्राउजर सभ में सभसे नीक काम करे खातिर बनावल गइल बा, मने कि पुरान ब्राउजर सभ में कुछ खास घटक सभ के अलग स्टाइल के, हालाँकि पूरा तरीका से कामकाजी, रेंडरिंग सभ के देखावल जा सके ला।

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

खास तौर प, हमनी के निम्नलिखित ब्राउज़र अवुरी प्लेटफॉर्म के नवीनतम संस्करण के सपोर्ट करेनी ।

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

मोबाइल डिवाइस के इस्तेमाल कइल जाला

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

क्रोम के बा फायरफॉक्स के बा सफारी के बा
एंड्रॉयड के बा समर्थित कइल गइल बा समर्थित कइल गइल बा एन/ए के बा
आईओएस के बा समर्थित कइल गइल बा समर्थित कइल गइल बा समर्थित कइल गइल बा

डेस्कटॉप ब्राउजर के इस्तेमाल कइल जाला

एही तरे अधिकतर डेस्कटॉप ब्राउजर सभ के लेटेस्ट वर्जन सभ के सपोर्ट कइल जाला।

क्रोम के बा फायरफॉक्स के बा इंटरनेट एक्सप्लोरर के बा ओपेरा के बा सफारी के बा
मैक के बा समर्थित कइल गइल बा समर्थित कइल गइल बा एन/ए के बा समर्थित कइल गइल बा समर्थित कइल गइल बा
विंडोज के बा समर्थित कइल गइल बा समर्थित कइल गइल बा समर्थित कइल गइल बा समर्थित कइल गइल बा समर्थित नइखे भइल

विंडोज पर हमनी के इंटरनेट एक्सप्लोरर 8-11 के सपोर्ट करेनी जा

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

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

कुछ ब्राउजर बग के सूची खातिर जवना से बूटस्ट्रैप के जूझत बा, देखीं हमनी के ब्राउज़र बग के दीवार .

इंटरनेट एक्सप्लोरर 8 आ 9 के बा

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

चेहरा-मोहरा इंटरनेट एक्सप्लोरर 8 के बा इंटरनेट एक्सप्लोरर 9 के बा
border-radius समर्थित नइखे भइल समर्थित कइल गइल बा
box-shadow समर्थित नइखे भइल समर्थित कइल गइल बा
transform समर्थित नइखे भइल समर्थित बा, -msउपसर्ग के साथ
transition समर्थित नइखे भइल
placeholder समर्थित नइखे भइल

CSS3 आ HTML5 फीचर सभ के ब्राउजर सपोर्ट के बारे में बिस्तार से जाने खातिर Can I use... पर जाईं ।

इंटरनेट एक्सप्लोरर 8 आ रिस्पांड.जेएस के इस्तेमाल कइल गइल बा

इंटरनेट एक्सप्लोरर 8 खातिर अपना विकास आ उत्पादन वातावरण में Respond.js के इस्तेमाल करत घरी निम्नलिखित चेतावनी से सावधान रहीं.

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 डॉक्स देखल जाव

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

IE8 पूरा तरह से समर्थन ना करेला box-sizing: border-box;जब min-width, max-width, min-height, या max-height. ओह कारण से, v3.0.1 के रूप में, हमनी के अब s max-widthपर इस्तेमाल ना करेनी जा .container

इंटरनेट एक्सप्लोरर 8 आ @font-face के इस्तेमाल कइल गइल बा

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

आईई संगतता मोड के बारे में बतावल गइल बा

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

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

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

ई टैग बूटस्ट्रैप के सगरी दस्तावेज आ उदाहरण सभ में शामिल कइल गइल बा जेह से कि इंटरनेट एक्सप्लोरर के हर समर्थित संस्करण में सभसे नीक रेंडरिंग संभव होखे।

अधिक जानकारी खातिर ई StackOverflow सवाल देखीं ।

विंडोज 8 आ विंडोज फोन 8 में इंटरनेट एक्सप्लोरर 10 के इस्तेमाल कइल गइल बा

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

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

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

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/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 आ डिवाइस-विड्थ पढ़ीं ।

हेड अप के रूप में, हमनी के एकरा के बूटस्ट्रैप के सभ दस्तावेजीकरण आ उदाहरण में एगो प्रदर्शन के रूप में शामिल कइले बानी जा।

सफारी के प्रतिशत गोलाई हो रहल बा

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

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

एंड्रॉयड स्टॉक ब्राउजर के बा

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

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

तत्वन पर <select>, एंड्रॉयड स्टॉक ब्राउजर साइड कंट्रोल ना देखावेला अगर कवनो बा border-radiusआ/या borderलागू बा। ( विस्तार से जाने खातिर ई StackOverflow सवाल देखल जाय।) आपत्तिजनक CSS के हटावे खातिर नीचे दिहल कोड के स्निपेट के इस्तेमाल करीं आ <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>

एगो उदाहरण देखल चाहत बानी? देखल जाव ई जेएस बिन डेमो।

मान्यता देवे वाला लोग

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

ई मान्यता चेतावनी सभ ब्यवहार में कौनों महत्व ना रखे लीं काहें से कि हमनी के सीएसएस के गैर-हैकी हिस्सा पूरा तरीका से मान्यता देला आ हैकी हिस्सा गैर-हैकी हिस्सा के सही कामकाज में बाधा ना डाले ला, एही से हमनी के एह बिसेस चेतावनी सभ के जानबूझ के अनदेखी काहें करे लीं।

हमनी के एचटीएमएल डॉक्स में भी ओही तरह से कुछ तुच्छ आ बेमतलब के एचटीएमएल सत्यापन चेतावनी बा जवना के कारण हमनी के एगो निश्चित फायरफॉक्स बग खातिर एगो वर्कअराउंड शामिल बा .

थर्ड पार्टी के समर्थन बा

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

बॉक्स-साइजिंग के बा

गूगल मैप्स आ गूगल कस्टम सर्च इंजन समेत कुछ थर्ड पार्टी सॉफ्टवेयर, बूटस्ट्रैप के साथ टकराव करे लें * { box-sizing: border-box; }, एगो नियम जे एकरा के अइसन बनावे paddingला, कौनों तत्व के अंतिम गणना कइल चौड़ाई पर कौनों परभाव ना डाले ला। बॉक्स मॉडल आ साइजिंग के बारे में अउरी जानें सीएसएस ट्रिक्स पर .

संदर्भ के आधार पर, आप जरूरत के हिसाब से ओवरराइड क सकत बानी (विकल्प 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>अइसन कि स्क्रीन रीडर लोग आपके पन्ना सभ खातिर सामग्री के तालिका बना सके।

एचटीएमएल कोडस्निफरपेन स्टेट के एक्सेसएबिलिटी पर अउरी जानें ।

रंग के विपरीतता बा

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

अतिरिक्त संसाधन के बारे में बतावल गइल बा

लाइसेंस के पूछल जाए वाला सवाल

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

एकरा खातिर रउरा से जरूरी बा कि:

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

एह से रउरा के अनुमति दिहल गइल बा कि:

  • मुफ्त में डाउनलोड करीं आ बूटस्ट्रैप के इस्तेमाल करीं, पूरा भा कुछ हिस्सा में, निजी, निजी, कंपनी के आंतरिक, भा व्यावसायिक उद्देश्य खातिर
  • रउआँ जवन पैकेज भा डिस्ट्रीब्यूशन बनाईं ओह में बूटस्ट्रैप के इस्तेमाल करीं
  • स्रोत कोड में संशोधन करीं
  • बूटस्ट्रैप के संशोधित करे आ लाइसेंस में शामिल ना होखे वाला तिसरका पक्ष के वितरित करे खातिर उपलाइसेंस दीं

ई रउरा के मना करेला कि:

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

एकरा खातिर रउरा से जरूरी नइखे कि:

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

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

अनुवाद कइल गइल बा

समुदाय के सदस्य लोग बूटस्ट्रैप के दस्तावेजीकरण के बिबिध भाषा सभ में अनुवाद कइले बा। कवनो के आधिकारिक समर्थन नइखे आ हो सकेला कि ऊ हमेशा अपडेट ना होखे.

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

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