शुरू करना
बूटस्ट्रैप दा इक अवलोकन, डाउनलोड ते इस्तेमाल करने दा तरीका, बुनियादी टेम्पलेट ते उदाहरण, ते होर मते सारे।
बूटस्ट्रैप दा इक अवलोकन, डाउनलोड ते इस्तेमाल करने दा तरीका, बुनियादी टेम्पलेट ते उदाहरण, ते होर मते सारे।
बूटस्ट्रैप (इसलै 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 दे कुन कुन संस्करण समर्थत न, एह् दिक्खने लेई साढ़े कन्नै सलाह करो ।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 दे राहें विकास निर्भरताएं गी प्रबंधत करने दा इक तरीका ऐ.
फिर, कमांड लाइन थमां:grunt-cli
कन्नै वैश्विक रूप कन्नै स्थापित करो npm install -g grunt-cli
./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 गी ठीक ढंगै कन्नै संरचित कीता गेदा ऐ. अपने बूटस्ट्रैप वेब विकास टूलचेन च बूटलिंट गी जोड़ने पर विचार करो तां जे कोई बी आम गलती तुंदे प्रोजेक्ट दे विकास गी धीमा नेईं करी सकै.
बूटस्ट्रैप दे विकास बारै जानकारी रक्खो ते इनें मददगार संसाधनें कन्नै समुदाय तगर पुज्जो।
irc.freenode.net
सर्वर च आईआरसी दा इस्तेमाल करदे होई साथी बूटस्ट्रैपरें कन्नै गल्लबात करो, ##bootstrap चैनल च .twitter-bootstrap-3
पर पुच्छो .bootstrap
जेह् ड़े बूटस्ट्रैप दी कार्यक्षमता गी संशोधित करदे न जां जोड़दे न , जेह् ड़े मती थमां मती खोज करने आस्तै npm जां इसी जनेह् डिलीवरी तंत्रें दे राहें बंड करदे न ।तुस ट्विटर पर @getbootstrap गी बी नवीनतम गपशप ते लाजवाब म्यूजिक वीडियो लेई फॉलो करी सकदे ओ।
बूटस्ट्रैप बक्ख-बक्ख स्क्रीन आकारें आस्तै तुंदे पन्नें गी स्वतः अनुकूलित करदा ऐ। इत्थै इस सुविधा गी अक्षम करने दा तरीका ऐ तां जे तुंदा पृष्ठ इस गैर-उत्तरदायी उदाहरन दी तर्ज पर कम्म करै .
<meta>
च दस्से गेदे व्यूपोर्ट गी छोड़ोwidth
पर गी ओवरराइड करो , मसाल दे तौर पर सुनिश्चत करो जे एह् डिफाल्ट बूटस्ट्रैप CSS दे बाद औंदा ऐ. तुस वैकल्पिक रूप कन्नै मीडिया क्वेरी जां कुसै चयनकर्ता-फू कन्नै बच सकदे ओ..container
width: 970px !important;
!important
.col-xs-*
, मध्यम/बड्डे दे अलावा, जां उंदी जगह क्लासें दा इस्तेमाल करो। चिंता नेईं करो, अतिरिक्त-छोटे डिवाइस ग्रिड सारे रिजोल्यूशनें गी स्केल करदा ऐ।तुसेंगी अजें बी IE8 आस्तै Respond.js दी लोड़ होग (किजोकी साढ़ी मीडिया क्वेरी अजें बी ऐ ते संसाधित करने दी लोड़ ऐ)। एह् बूटस्ट्रैप दे "मोबाइल साइट" पहलूएं गी अक्षम करदा ऐ.
असी इन्हें चरणें गी इक उदाहरण पर लागू कीता ऐ। लागू कीते गेदे विशिष्ट बदलावें गी दिक्खने लेई इसदा स्रोत कोड पढ़ो.
बूटस्ट्रैप दे पुराने संस्करण थमां v3.x च माइग्रेट करने दी तलाश च ओ? साढ़ी माइग्रेशन गाइड दिक्खो .
बूटस्ट्रैप गी नवीनतम डेस्कटॉप ते मोबाइल ब्राउज़रें च बेहतरीन कम्म करने आस्तै बनाया गेदा ऐ, मतलब पुराने ब्राउज़र किश घटकें दे बक्ख-बक्ख शैली दे, हालांकि पूरी चाल्ली कन्नै कम्म करने आह् ले, रेंडरिंग प्रदर्शत करी सकदे न।
खास करियै, अस निम्नलिखित ब्राउज़रें ते प्लेटफार्में दे नमें संस्करणें दा समर्थन करने आं ।
वैकल्पिक ब्राउज़र जेह् ड़े वेबकिट, ब्लिंक, जां गेको दे नवीनतम संस्करण दा उपयोग करदे न, चाहे ओह् सीधे जां प्लेटफार्म दे वेब दृश्य एपीआई दे राहें होऐ, स्पश्ट रूप कन्नै समर्थत नेईं ऐ। हालांकि, बूटस्ट्रैप गी (अधिकांश मामलें च) इनें ब्राउज़रें च बी ठीक ढंगै कन्नै प्रदर्शत ते कम्म करना चाहिदा ऐ. होर विशेश समर्थन जानकारी थमां हेठ दित्ती गेई ऐ।
आमतौर उप्पर, बूटस्ट्रैप हर इक बड्डे प्लेटफार्म दे डिफाल्ट ब्राउज़रें दे नवीनतम संस्करणें गी समर्थन करदा ऐ। ध्यान रक्खो जे प्रॉक्सी ब्राउज़र (जिऱयां ओपेरा मिनी, ओपेरा मोबाइल दा टर्बो मोड, यूसी ब्राउज़र मिनी, अमेज़ॅन सिल्क) समर्थत नेईं न।
क्रोम | फायरफॉक्स ने दी | सफारी | |
---|---|---|---|
एंड्रॉयड ऐ | समर्थन कीता | समर्थन कीता | एन / ए |
आईओएस | समर्थन कीता | समर्थन कीता | समर्थन कीता |
इसी गै, मते सारे डेस्कटॉप ब्राउज़रें दे नवीनतम संस्करण समर्थत न।
क्रोम | फायरफॉक्स ने दी | इंटरनेट एक्सप्लोरर दा | ओपेरा | सफारी | |
---|---|---|---|---|---|
मैक | समर्थन कीता | समर्थन कीता | एन / ए | समर्थन कीता | समर्थन कीता |
खिड़कियां | समर्थन कीता | समर्थन कीता | समर्थन कीता | समर्थन कीता | समर्थित नहीं |
विंडोज पर, अस इंटरनेट एक्सप्लोरर 8-11 गी समर्थन करदे आं ।
फायरफॉक्स आस्तै, नवीनतम सामान्य स्थिर रिलीज दे अलावा, अस फायरफॉक्स दे नवीनतम विस्तारित समर्थन रिलीज (ESR) संस्करण दा बी समर्थन करदे आं.
गैर-सरकारी रूप कन्नै, बूटस्ट्रैप गी लिनक्स आस्तै क्रोमियम ते क्रोम, लिनक्स आस्तै फायरफॉक्स, ते इंटरनेट एक्सप्लोरर 7 दे कन्नै-कन्नै माइक्रोसॉफ्ट एज च काफी खरा दिखना ते बर्ताव करना चाहिदा ऐ, हालांकि एह् आधिकारिक तौर पर समर्थत नेईं न।
किश ब्राउज़र बग दी सूची आस्तै जिंदे कन्नै बूटस्ट्रैप गी जूझना पौंदा ऐ, दिक्खो साढ़ी ब्राउज़र बग दी दीवार .
इंटरनेट एक्सप्लोरर 8 ते 9 बी समर्थत न, हालांकि, कृपा करियै ध्यान रक्खो जे किश CSS3 गुण ते HTML5 तत्व इनें ब्राउज़रें आसेआ पूरी चाल्ली समर्थत नेईं न. इसदे अलावा, इंटरनेट एक्सप्लोरर 8 गी मीडिया क्वेरी समर्थन गी सक्षम करने लेई Respond.js दा इस्तेमाल करने दी लोड़ ऐ।
खासियत | इंटरनेट एक्सप्लोरर 8 ऐ | इंटरनेट एक्सप्लोरर 9 ऐ |
---|---|---|
border-radius |
समर्थित नहीं | समर्थन कीता |
box-shadow |
समर्थित नहीं | समर्थन कीता |
transform |
समर्थित नहीं | समर्थित, -ms उपसर्ग कन्नै |
transition |
समर्थित नहीं | |
placeholder |
समर्थित नहीं |
CSS3 ते HTML5 सुविधाएं दे ब्राउज़र समर्थन दे बारे च विस्तार कन्नै जानने लेई क्या मैं इस्तेमाल करी सकदा ऐ... पर जाओ.
इंटरनेट एक्सप्लोरर 8 आस्तै अपने विकास ते उत्पादन वातावरण च 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 डॉक्स दिक्खो।
IE8 , , , जां box-sizing: border-box;
कन्नै जोड़ने पर पूरी चाल्ली समर्थन नेईं करदा ऐ . उस कारण, v3.0.1 दे रूप च, अस हून एस पर इस्तेमाल नेईं करदे आं।min-width
max-width
min-height
max-height
max-width
.container
IE8 कन्नै किश मुद्दे न @font-face
जदूं :before
. बूटस्ट्रैप उस संयोजन दा इस्तेमाल अपने ग्लिफिकॉन्स कन्नै करदा ऐ। जेकर कोई पृष्ठ कैश कीता गेदा ऐ, ते विंडो उप्पर माउस दे बगैर लोड कीता गेदा ऐ (यानी रिफ्रेश बटन गी दबाओ जां इक आईफ्रेम च किश लोड करो) तां पृष्ठ फॉन्ट लोड होने थमां पैह् ले रेंडर होई जंदा ऐ. पृष्ठ (शरीर) उप्पर मंडरने कन्नै किश चिह् न दिक्खे जाङन ते बाकी चिह् नें उप्पर मंडराने कन्नै उनेंगी बी दस्सेआ जाग। विस्तार कन्नै दिक्खो अंक #13863 ।
पुराने इंटरनेट एक्सप्लोरर संगतता मोड च बूटस्ट्रैप समर्थत नेईं ऐ. एह् सुनिश्चत करने आस्तै जे तुस आईई आस्तै नवीनतम रेंडरिंग मोड दा इस्तेमाल करा करदे ओ, <meta>
अपने पन्नें च उचित टैग गी शामल करने पर विचार करो:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
डिबगिंग उपकरणें गी खोलियै दस्तावेज मोड दी पुष्टि करो: दबाओ F12ते "दस्तावेज मोड" दी जांच करो.
इंटरनेट एक्सप्लोरर दे हर समर्थत संस्करण च संभवत: बेहतरीन रेंडरिंग गी सुनिश्चत करने आस्तै एह् टैग बूटस्ट्रैप दे सारे दस्तावेजें ते उदाहरणें च शामल ऐ.
होर मती जानकारी आस्तै इस StackOverflow सवाल गी दिक्खो .
इंटरनेट एक्सप्लोरर 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-backdrop
z-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
क्लास एह् सुनिश्चत करग जे लिंक इक बारी केंद्रत होने पर (दृष्टि आह् ले कीबोर्ड बरतूनी आस्तै) दिक्खने च औंदा ऐ।
क्रोम च लम्मी अवधि आह् ली खामियें/बगें दे कारण ( क्रोमियम बग ट्रैकर च मुद्दा 262171 दिक्खो ) ते इंटरनेट एक्सप्लोरर ( पृष्ठ च लिंक ते फोकस क्रम पर एह् लेख दिक्खो ), तुसेंगी इस गल्लै गी सुनिश्चत करना होग जे तुंदे स्किप लिंक दा लक्ष्य ऐ जोड़ने कन्नै कम से कम प्रोग्रामेटिक रूप कन्नै फोकस करने योग्य ऐ tabindex="-1"
.
इसदे अलावा, तुस लक्ष्य पर इक दिक्खने आह् ले फोकस संकेत गी स्पश्ट रूप कन्नै दबाना चांह् दे ओ (खासकर कीजे क्रोम इसलै तत्वें पर ध्यान बी सेट करदा ऐ tabindex="-1"
जिसलै उनेंगी माउस कन्नै क्लिक कीता जंदा ऐ) कन्नै #content:focus { outline: none; }
.
ध्यान रक्खो जे एह् बग कुसै बी होर इन-पेज लिंक गी बी प्रभावित करग जेह् ड़ी तुंदी साइट बरत करदी ऐ , जेह् ड़ी कीबोर्ड बरतूनी आस्तै बेकार होई जंदी ऐ . तुस होर सारे नामांकत एंकर / टुकड़े पन्छानने आह् ले जेह् ड़े लिंक लक्ष्य दे रूप च कम्म करदे न च इसी जनेही स्टॉप-गैप फिक्स जोड़ने पर विचार करी सकदे ओ.
<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 ट्विटर ऐ। छोटे-छोटे टुकड़े च उबालिये इसगी निम्नलिखित शर्तें कन्नै वर्णन कीता जाई सकदा ऐ ।
होर मती जानकारी आस्तै पूरा बूटस्ट्रैप लाइसेंस प्रोजेक्ट रिपोजिटरी च स्थित ऐ .
समुदाय दे सदस्यें बूटस्ट्रैप दे दस्तावेजें दा बक्ख-बक्ख भाशाएं च अनुवाद कीता ऐ। कुसै गी बी आधिकारिक तौर पर समर्थन नेईं कीता जंदा ते ओह् हमेशा अद्यतन नेईं होई सकदे।
अस अनुवादें गी व्यवस्थित करने जां मेजबानी करने च मदद नेईं करदे, अस सिर्फ उंदे कन्नै लिंक करदे आं।
कोई नमां या बेहतर अनुवाद खत्म कीता ऐ? साढ़ी सूची च जोड़ने लेई इक पुल रिक्वेस्ट खोलो।