डाउनलोड

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

बूटस्ट्रैप दा

सीएसएस, जावास्क्रिप्ट, ते फॉन्टें गी संकलित ते मिनीफाई कीता गेआ। कोई बी डॉक्स जां मूल स्रोत फाइलें गी शामल नेईं कीता गेआ ऐ.

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

स्रोत कोड ऐ

स्रोत कम, जावास्क्रिप्ट, ते फॉन्ट फाइलें, साढ़े डॉक्स दे कन्नै। इक Less compiler ते कुसै सेटअप दी लोड़ ऐ।

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

सस्स

रेल, कम्पास, जां Sass-केवल प्रोजेक्टें च आसान शामल होने आस्तै बूटस्ट्रैप गी कम थमां Sass च पोर्ट कीता गेआ ।

डाउनलोड करो सस्स

जे एस डेलीवर

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- बूटस्ट्रैप दे गैर-मिनीफाइड CSS दा रस्ता जेह् ड़ा डिफाल्ट सेटिंग्स दा उपयोग करियै पूर्व-संकलित कीता गेदा ऐ (कोई अनुकूलन नेईं)

कम्पोजर कन्नै इंस्टॉल करो

तुस कम्पोजर दा इस्तेमाल करदे होई बूटस्ट्रैप दे लेस, सीएसएस, जावास्क्रिप्ट, ते फॉन्टें गी बी इंस्टॉल ते प्रबंधत करी सकदे ओ :

composer require twbs/bootstrap

कम/सास लेई ऑटोप्रिफिक्सर दी लोड़ ऐ

बूटस्ट्रैप CSS विक्रेता उपसर्गें कन्नै निबड़ने आस्तै ऑटोप्रीफिक्सर दा उपयोग करदा ऐ . जेकर तुस बूटस्ट्रैप गी इसदे Less/Sass स्रोत थमां संकलित करा करदे ओ ते साढ़ी Gruntfila दा इस्तेमाल नेईं करदे ओ तां तुसेंगी अपने आपै गी अपनी बिल्ड प्रक्रिया च Autoprefixer गी इकट्ठा करने दी लोड़ होग. जेकर तुस पूर्व-संकलित बूटस्ट्रैप दा इस्तेमाल करा करदे ओ जां साढ़ी ग्रंटफाइल दा इस्तेमाल करा करदे ओ तां तुसेंगी इस बारै चिंता करने दी लोड़ नेईं ऐ की जे ऑटोप्रिफिक्सर पैह् ले थमां गै साढ़ी ग्रंटफाइल च इकट्ठा ऐ.

क्या शामिल ऐ

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

jQuery दी लोड़ ऐ

कृपा करियै ध्यान देओ जे सारे जावास्क्रिप्ट प्लगइन्स गी jQuery गी शामल करने दी लोड़ ऐ , जिऱयां कि स्टार्टर टेम्पलेट च दिक्खेआ गेदा ऐ . jQuery दे कुन कुन संस्करण समर्थत न, एह् दिक्खने लेई साढ़े कन्नै सलाह करो ।bower.json

पूर्व संकलित बूटस्ट्रैप

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

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) किश ब्राउज़रें दे डेवलपर उपकरणें कन्नै इस्तेमाल आस्तै उपलब्ध न। ग्लिफिकॉन्स थमां फॉन्ट शामल न, जिऱयां वैकल्पिक बूटस्ट्रैप थीम ऐ।

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

बूटस्ट्रैप स्रोत कोड डाउनलोड च पूर्व-संकलित CSS, जावास्क्रिप्ट, ते फॉन्ट संपत्तियें दे कन्नै-कन्नै स्रोत कम, जावास्क्रिप्ट, ते दस्तावेजीकरण बी शामल ऐ। होर खास करियै, इस च निम्नलिखित ते होर मते शामल न:

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

, less/, js/ते fonts/साढ़े CSS, JS, ते आइकन फॉन्टें (क्रमशः) आस्तै स्रोत कोड न। dist/फोल्डर च उपर दित्ते गेदे पूर्व-संकलित डाउनलोड खंड च दित्ती गेदी हर इक चीज शामल ऐ । docs/फोल्डर च साढ़े दस्तावेजें आस्तै, ते examples/बूटस्ट्रैप दे इस्तेमाल आस्तै स्रोत कोड शामल ऐ . इसदे अलावा, कोई बी होर शामल फाइल पैकेज, लाइसेंस जानकारी, ते विकास आस्तै समर्थन प्रदान करदी ऐ.

सीएसएस ते जावास्क्रिप्ट गी संकलित करना

बूटस्ट्रैप अपने बिल्ड सिस्टम आस्तै Grunt दा उपयोग करदा ऐ, जिस च फ्रेमवर्क कन्नै कम्म करने आस्तै सुविधाजनक तरीकें कन्नै। एह् ऐ जे अस अपने कोड गी किस चाल्ली संकलित करदे आं, परीक्षण चलांदे आं, ते होर मते सारे।

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

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

फिर, कमांड लाइन थमां:
  1. grunt-cliकन्नै वैश्विक रूप कन्नै स्थापित करो npm install -g grunt-cli.
  2. /bootstrap/रूट डायरेक्टरी च नेविगेट करो , फ्ही चलाओ npm install. npm फाइल गी दिक्खग package.jsonते उत्थै सूचीबद्ध जरूरी लोकल निर्भरताएं गी स्वतः इंस्टॉल करग.

पूरा होने पर, तुस कमांड लाइन थमां दित्ते गेदे बक्ख-बक्ख Grunt कमांडें गी चला सकगेओ.

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

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

/dist/संकलित ते मिनीफाइड CSS ते जावास्क्रिप्ट फाइलें कन्नै डायरेक्टरी गी पुनर्जीवित करदा ऐ। बूटस्ट्रैप बरतूनी दे तौर पर, एह् आमतौर पर ओह् कमांड ऐ जेह् ड़ी तुस चांह् दे ओ.

grunt watch(दिक्खो)

कम स्रोत फाइलें गी दिक्खदा ऐ ते जदूं बी तुस कोई बदलाव बचांदे ओ तां उ’नेंगी स्वतः CSS च दुबारा संकलित करदा ऐ.

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

JSHint चलांदा ऐ ते कर्म दी बदौलत असली ब्राउज़रें च QUnit परीक्षण चलांदा ऐ .

grunt docs(डॉक्स संपत्तियां बनाओ & परीक्षण करो)

CSS, जावास्क्रिप्ट, ते होर संपत्तियें गी बनांदा ऐ ते परीक्षण करदा ऐ जेह् ड़ी दस्तावेजें गी स् थानीय रूप कन्नै चलांदे बेल्लै बरतेआ जंदा ऐ bundle exec jekyll serve.

grunt(बिल्कुल सब कुछ बनाओ ते टेस्ट चलाओ)

CSS ते जावास्क्रिप्ट गी संकलित ते घट्ट करदा ऐ, दस्तावेजीकरण वेबसाइट बनांदा ऐ, डॉक्स दे खलाफ HTML5 वैलिडेटर चलांदा ऐ, कस्टमाइजर संपत्तियें गी पुनर्जीवित करदा ऐ, ते होर मते सारे। जेकिल दी लोड़ ऐ . आमतौर पर सिर्फ तदूं गै जरूरी ऐ जेकर तुस खुद बूटस्ट्रैप पर हैकिंग करा दे ओ।

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

जेकर तुसेंगी निर्भरताएं गी इंस्टॉल करने जां Grunt कमांड चलाने च समस्यां दा सामना करना चाहिदा ऐ , तां पैह् लें /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 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/डायरेक्टरी च दित्ते जाई सकदे न।

ढांचे दा इस्तेमाल करदे होई

स्टार्टर टेम्पलेट उदाहरण

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

बुनियादी चीजें दे अलावा होर किश नेईं: इक कंटेनर दे कन्नै-कन्नै सीएसएस ते जावास्क्रिप्ट गी संकलित कीता गेआ।

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

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

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

कई ग्रिड्स उदाहरण

ग्रिड्स

चारे स्तरें कन्नै ग्रिड लेआउट दे मते सारे उदाहरण, नेस्टिंग, ते होर मते।

जम्बोट्रॉन उदाहरण

जम्बोट्रॉन ने दी

नवबार ते किश बुनियादी ग्रिड स्तंभें कन्नै जंबोट्रॉन दे चारों-पार बनाओ।

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

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

डिफ़ॉल्ट कंटेनर ते जंबोट्रॉन गी संकुचित करियै इक होर कस्टम पृष्ठ बनाओ.

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

नवबर मिसाल

नवबर जी

सुपर बेसिक टेम्पलेट जेह् ड़ा किश अतिरिक्त सामग्री दे कन्नै-कन्नै नवबार बी शामल ऐ।

स्थिर शीर्ष नवबार उदाहरण

स्थिर टॉप नवबार

कुछ अतिरिक्त सामग्री दे कन्नै-कन्नै इक स्थिर शीर्ष नवबार कन्नै सुपर बेसिक टेम्पलेट।

नवबार उदाहरण तय कीता

नवबार तय कीता

कुछ अतिरिक्त सामग्री दे कन्नै-कन्नै इक निश्चित शीर्ष नवबार कन्नै सुपर बेसिक टेम्पलेट।

कस्टम घटक

इक पृष्ठ दा टेम्पलेट उदाहरण

कवर

सरल ते सुंदर होम पेज बनाने लेई इक पृष्ठ दा टेम्पलेट।

हिंडोला मिसाल

हिंडोला

नवबार ते हिंडोला गी अनुकूलित करो, फिर किश नमें घटक जोड़ो।

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

ब्लॉग करना

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

डैशबोर्ड दा उदाहरण

डैशबोर्ड

स्थिर साइडबार ते नवबार कन्नै इक एडमिन डैशबोर्ड आस्तै बुनियादी ढांचे।

साइन-इन पेज दा उदाहरण

साइन इन करो पेज

फार्म च इक साधारण साइन आस्तै कस्टम फार्म लेआउट ते डिजाइन।

जायज नव मिसाल

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

जायज लिंक कन्नै इक कस्टम नवबार बनाओ। सिर ऊपर ! ज्यादा सफारी फ्रेंडली नहीं।

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

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

जदूं सामग्री उसदे कोला घट्ट होंदी ऐ तां व्यूपोर्ट दे थल्लै इक पाद लेख संलग्न करो.

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

नवबार कन्नै चिपचिपा पाद लेख

व्यूपोर्ट दे थल्लै इक पाद लेख संलग्न करो जिसदे उप्पर इक नियत नवबार ऐ।

प्रयोग करदे

गैर-उत्तरदायी उदाहरण

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

साढ़े डॉक्स दे अनुसार बूटस्ट्रैप दी प्रतिक्रियाशीलता गी आसानी कन्नै अक्षम करो .

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

ऑफ कैनवास दा

बूटस्ट्रैप कन्नै इस्तेमाल आस्तै इक टॉगल करने योग्य ऑफ-कैनवास नेविगेशन मेनू बनाओ.

संदर

बूटलिंट ने दी

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

समुदाय

बूटस्ट्रैप दे विकास बारै जानकारी रक्खो ते इनें मददगार संसाधनें कन्नै समुदाय तगर पुज्जो।

तुस ट्विटर पर @getbootstrap गी बी नवीनतम गपशप ते लाजवाब म्यूजिक वीडियो लेई फॉलो करी सकदे ओ।

प्रतिक्रियाशीलता गी अक्षम करना

बूटस्ट्रैप बक्ख-बक्ख स्क्रीन आकारें आस्तै तुंदे पन्नें गी स्वतः अनुकूलित करदा ऐ। इत्थै इस सुविधा गी अक्षम करने दा तरीका ऐ तां जे तुंदा पृष्ठ इस गैर-उत्तरदायी उदाहरन दी तर्ज पर कम्म करै .

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

  1. CSS डॉक्स<meta> च दस्से गेदे व्यूपोर्ट गी छोड़ो
  2. इक गै चौड़ाई कन्नै हर ग्रिड टियर आस्तै widthपर गी ओवरराइड करो , मसाल दे तौर पर सुनिश्चत करो जे एह् डिफाल्ट बूटस्ट्रैप CSS दे बाद औंदा ऐ. तुस वैकल्पिक रूप कन्नै मीडिया क्वेरी जां कुसै चयनकर्ता-फू कन्नै बच सकदे ओ..containerwidth: 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 सुविधाएं दे ब्राउज़र समर्थन दे बारे च विस्तार कन्नै जानने लेई क्या मैं इस्तेमाल करी सकदा ऐ... पर जाओ.

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

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

Respond.js ते क्रॉस-डोमेन सीएसएस

इक बक्खरे (उप)डोमेन पर होस्ट कीते गेदे CSS कन्नै Respond.js दा इस्तेमाल करने आस्तै (उदाहरण दे तौर पर, इक सीडीएन पर) किश अतिरिक्त सेटअप दी लोड़ होंदी ऐ. विस्तार लेई 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;कन्नै जोड़ने पर पूरी चाल्ली समर्थन नेईं करदा ऐ . उस कारण, v3.0.1 दे रूप च, अस हून एस पर इस्तेमाल नेईं करदे आं।min-widthmax-widthmin-heightmax-heightmax-width.container

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

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

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

पुराने इंटरनेट एक्सप्लोरर संगतता मोड च बूटस्ट्रैप समर्थत नेईं ऐ. एह् सुनिश्चत करने आस्तै जे तुस आईई आस्तै नवीनतम रेंडरिंग मोड दा इस्तेमाल करा करदे ओ, <meta>अपने पन्नें च उचित टैग गी शामल करने पर विचार करो:

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

डिबगिंग उपकरणें गी खोलियै दस्तावेज मोड दी पुष्टि करो: दबाओ F12ते "दस्तावेज मोड" दी जांच करो.

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

होर मती जानकारी आस्तै इस StackOverflow सवाल गी दिक्खो .

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

इंटरनेट एक्सप्लोरर 10 डिवाइस दी चौड़ाई गी व्यूपोर्ट चौड़ाई थमां भेद नेईं करदा ऐ , ते इस चाल्ली बूटस्ट्रैप दे CSS च मीडिया क्वेरी गी ठीक ढंगै कन्नै लागू नेईं करदा ऐ. आमतौर उप्पर तुस इसगी ठीक करने आस्तै सिर्फ CSS दा इक त्वरित स्निपेट जोड़गेओ:

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

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

@-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 दिक्खो .

आईओएस पाठ फील्ड ते स्क्रॉल करना

आईओएस 9.3 दे रूप च, जदूं इक मोडल खुल्ला ऐ, जेकर इक स्क्रॉल इशारे दा शुरूआती स्पर्श इक पाठ्य <input>जां इक दी सीमा दे अंदर ऐ तां मोडल दे हेठ दित्ती <textarea>गेदी <body>सामग्री गी खुद मोडल दी बजाय स्क्रॉल कीता जाग। वेबकिट बग # 153856 दिक्खो ।

आभासी कीबोर्ड दा

एह् बी ध्यान रक्खो जे जेकर तुस इक स्थिर नवबार दा इस्तेमाल करा करदे ओ जां इक मोडल दे अंदर इनपुटें दा इस्तेमाल करा करदे ओ तां आईओएस च इक रेंडरिंग बग ऐ जेह् ड़ा आभासी कीबोर्ड गी ट्रिगर करने पर स्थिर तत्वें दी स्थिति गी अपडेट नेईं करदा ऐ। इसदे लेई किश वर्कआउट च अपने तत्वें गी बदलना position: absoluteजां फोकस पर इक टाइमर आह् ला आह्वान करना शामल ऐ तां जे स्थिति गी मैन्युअल रूप कन्नै ठीक करने दी कोशश कीती जाई सकै. एह् बूटस्ट्रैप आसेआ नियंत्रत नेईं कीता जंदा ऐ, इसलेई एह् तुंदे उप्पर निर्भर करदा ऐ जे तुंदे एप्लिकेशन आस्तै कुस समाधान गी बेहतर ऐ.

.dropdown-backdropz-indexing दी जटिलता दे कारण nav च आईओएस पर तत्व दा इस्तेमाल नेईं कीता जंदा ऐ । इस चाल्ली, नवबार च ड्रॉपडाउन बंद करने आस्तै, तुसेंगी सीधे ड्रॉपडाउन तत्व (जां कुसै होर तत्व जेह् ड़ा आईओएस च इक क्लिक घटना गी फायर करग ) पर क्लिक करना होग ।

ब्राउज़र ज़ूम करना

पेज ज़ूमिंग अनिवार्य रूप कन्नै किश घटकें च रेंडरिंग आर्टिफैक्ट पेश करदा ऐ, बूटस्ट्रैप ते बाकी वेब च बी। मुद्दे दे आधार उप्पर, अस इसगी ठीक करी सकने आं (पैह्ले खोज करो ते फ्ही लोड़ पौने पर कोई मुद्दा खोह् ल्लो)। पर, अस इन्हें गी नजरअंदाज करने दी प्रवृत्ति रखदे आं की जे उंदे कोल अक्सर हैकी वर्कअराउंड दे अलावा कोई सीधा समाधान नेईं होंदा ऐ।

चिपचिपा :hover/ :focusमोबाइल पर

भलेआं असली होवरिंग मते सारे टचस्क्रीन पर संभव नेईं ऐ, पर मते सारे मोबाइल ब्राउज़र होवरिंग समर्थन दा अनुकरण करदे न ते :hover"चिपचिपा" बनांदे न। दूए शबदें च, :hoverशैलियां कुसै तत्व गी टैप करने दे बाद लागू करना शुरू करी दिंदे न ते बरतूनी दे कुसै होर तत्व गी टैप करने दे बाद गै लागू करना बंद करी दिंदे न। इस कन्नै बूटस्ट्रैप दी :hoverस्थिति ऐसे ब्राउज़रें पर अवांछनीय रूप कन्नै "अटकल" होई सकदी ऐ. किश मोबाइल ब्राउज़र बी :focusइसी चाल्लीं चिपचिपा बनांदे न। इसलै इनें मुद्दें लेई इस चाल्ली दी शैलियें गी पूरी चाल्ली हटाने दे अलावा कोई साधारण समाधान नेईं ऐ।

छपाई करना

किश आधुनिक ब्राउज़रें च बी छपाई चंचल होई सकदी ऐ।

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

  • अतिरिक्त-छोटी ग्रिड गी गले लाओ ते सुनिश्चत करो जे तुंदा पेज इसदे हेठ स्वीकार्य दिक्खदा ऐ।
  • कम चर दे मूल्यें गी अनुकूलित करो @screen-*तां जे तुंदा प्रिंटर पेपर अतिरिक्त-छोटे थमां बड्डा मन्नेआ जा.
  • सिर्फ प्रिंट मीडिया आस्तै ग्रिड आकार ब्रेकपॉइंट बदलने आस्तै कस्टम मीडिया क्वेरी जोड़ो.

एह्दे कन्नै गै, सफारी v8.0 दे रूप च, स्थिर-चौड़ाई .containerएस सफारी गी छपने पर इक असामान्य रूप कन्नै निक्के फॉन्ट आकार दा इस्तेमाल करने दा कारण बनी सकदा ऐ. होर मती जानकारी आस्तै दिक्खो #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>

इक मिसाल देखना चांदे ओ? इस जे एस बिन डेमो को देखें।

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

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

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

साढ़े HTML दस्तावेजें च इसी गै कुसै खास फायरफॉक्स बग आस्तै इक वर्कअराउंड गी शामल करने दे कारण किश मामूली ते बेमतलब HTML सत्यापन चेतावनी ऐ .

थर्ड पार्टी दा समर्थन

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

बॉक्स-साइज करना

गूगल मैप्स ते गूगल कस्टम सर्च इंजन समेत किश त्रीयें पार्टी सॉफ्टवेयर, बूटस्ट्रैप कन्नै टकराव करदे न * { 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 ट्विटर ऐ। छोटे-छोटे टुकड़े च उबालिये इसगी निम्नलिखित शर्तें कन्नै वर्णन कीता जाई सकदा ऐ ।

इस च तुसेंगी लोड़ ऐ जे तुस:

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

एह् तुसेंगी एह् करने दी इजाजत दिंदा ऐ:

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

एह् तुसेंगी मना करदा ऐ जे:

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

इस च तुसेंगी इस गल्लै दी लोड़ नेईं ऐ जे:

  • बूटस्ट्रैप दा स्रोत अपने आपै च शामल करो, जां कुसै बी संशोधन गी जेह् ड़ा तुसें इस च कीता होग, कुसै बी पुनर्वितरण च जेह् ड़ा तुस इकट्ठा करी सकदे ओ जेह् ड़ा इसगी शामल करदा ऐ
  • बूटस्ट्रैप च कीते गेदे बदलावें गी वापस बूटस्ट्रैप प्रोजेक्ट च जमा करो (हालांके इस चाल्ली दी प्रतिक्रिया गी प्रोत्साहित कीता जंदा ऐ)

होर मती जानकारी आस्तै पूरा बूटस्ट्रैप लाइसेंस प्रोजेक्ट रिपोजिटरी च स्थित ऐ .

अनुवाद करदे

समुदाय दे सदस्यें बूटस्ट्रैप दे दस्तावेजें दा बक्ख-बक्ख भाशाएं च अनुवाद कीता ऐ। कुसै गी बी आधिकारिक तौर पर समर्थन नेईं कीता जंदा ते ओह् हमेशा अद्यतन नेईं होई सकदे।

अस अनुवादें गी व्यवस्थित करने जां मेजबानी करने च मदद नेईं करदे, अस सिर्फ उंदे कन्नै लिंक करदे आं।

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