शुरू करब
बूटस्ट्रैप केरऽ अवलोकन, डाउनलोड आरू उपयोग केना करलऽ जाय, बेसिक टेम्पलेट आरू उदाहरण, आरू बहुत कुछ.
बूटस्ट्रैप केरऽ अवलोकन, डाउनलोड आरू उपयोग केना करलऽ जाय, बेसिक टेम्पलेट आरू उदाहरण, आरू बहुत कुछ.
बूटस्ट्रैप (वर्तमान मे v3.4.1) मे जल्दी सं शुरू करय कें किछु आसान तरीका छै, प्रत्येक एकटा अलग कौशल स्तर आ उपयोग केस कें लेल आकर्षक छै. पढ़ू जे अहां के विशेष जरूरत के हिसाब सं की अछि.
संकलित आ लघुकृत सीएसएस, जावास्क्रिप्ट, आ फॉन्ट। कोनो डॉक्स अथवा मूल स्रोत फाइल शामिल नहि अछि.
स्रोत कम, जावास्क्रिप्ट, आ फॉन्ट फाइल, संगहि हमर डॉक्स। एकटा Less compiler आओर किछु सेटअप के आवश्यकता अछि.
बूटस्ट्रैप रेल, कम्पास, या Sass-only परियोजना मे आसानी सं शामिल करय कें लेल Less सं Sass मे पोर्ट करल गेलय.
jsDelivr पर लोक सब कृपापूर्वक बूटस्ट्रैप के सीएसएस आ जावास्क्रिप्ट के लेल सीडीएन समर्थन प्रदान करैत छथि. बस एहि jsDelivr लिंक क उपयोग करू।
अहां Bower कें उपयोग करयत Bootstrap कें Less, CSS, JavaScript, आ फॉन्ट कें इंस्टॉल आ प्रबंधित सेहो कयर सकय छी :
अहां npm क उपयोग कए बूटस्ट्रैप कए सेहो इंस्टॉल क सकैत छी :
require('bootstrap')
बूटस्ट्रैप क' सभ jQuery प्लगइन क' jQuery ऑब्जेक्ट पर लोड करत. मॉड्यूल स्वयं bootstrap
किछु निर्यात नहि करैत अछि. /js/*.js
अहां पैकेज कें शीर्ष-स्तरीय निर्देशिका कें तहत फाइल कें लोड करयत बूटस्ट्रैप कें jQuery प्लगइन कें व्यक्तिगत रूप सं मैन्युअल रूप सं लोड कयर सकय छी .
बूटस्ट्रैप कें package.json
निम्नलिखित कुंजीयक कें अंतर्गत किछ अतिरिक्त मेटाडाटा शामिल छै:
less
- बूटस्ट्रैप क मुख्य कम स्रोत फाइल क लेल पथstyle
- बूटस्ट्रैप क गैर-मिनीफाइड CSS क लेल पथ जे डिफ़ॉल्ट सेटिंग्स क उपयोग कए पूर्व संकलित कएल गेल अछि (कोनो अनुकूलन नहि)आप Composer क उपयोग कए Bootstrap क Less, CSS, JavaScript, आओर फॉन्ट कए सेहो इंस्टॉल आओर प्रबंधित क सकैत छी :
बूटस्ट्रैप CSS विक्रेता उपसर्गक संग निपटबाक लेल Autoprefixer क उपयोग करैत अछि . यदि आहाँ Bootstrap क॑ एकरऽ Less/Sass स्रोत स॑ संकलित करी रहलऽ छियै आरू हमरऽ Gruntfile क॑ उपयोग नै करी रहलऽ छियै, त॑ आहाँ क॑ खुद अपनऽ बिल्ड प्रक्रिया म॑ Autoprefixer क॑ एकीकृत करै के जरूरत होतै । यदि आहाँ पूर्वसंकलित बूटस्ट्रैप के उपयोग क रहल छी या हमर Gruntfile के उपयोग क रहल छी, त अहाँ के एहि बारे में चिंता करय के जरूरत नै अछि कियाक त Autoprefixer पहिने स हमर Gruntfile में एकीकृत अछि |
बूटस्ट्रैप दू रूप मे डाउनलोड करय योग्य छै, जइ कें भीतर अहां कें निम्नलिखित निर्देशिका आ फाइल मिलतय, जे तार्किक रूप सं आम संसाधनक कें समूहीकृत करयत छै आ संकलित आ लघुकृत दूनू भिन्नता प्रदान करयत छै.
कृपया ध्यान दिअ जे सभ जावास्क्रिप्ट प्लगइन केँ jQuery केँ शामिल करबाक आवश्यकता अछि, जेना कि स्टार्टर टेम्पलेट मे देखाओल गेल अछि . jQuery के कोन संस्करण समर्थित अछि से देखय लेल हमर परामर्श करू .bower.json
एक बेर डाउनलोड करला के बाद, (संकलित) बूटस्ट्रैप के संरचना देखय लेल संकुचित फोल्डर के अनजिप करू. किछु एहने देखब:
इ बूटस्ट्रैप कें सब सं बेसि बुनियादी रूप छै: लगभग कोनों वेब प्रोजेक्ट मे त्वरित ड्रॉप-इन उपयोग कें लेल पूर्व संकलित फाइल. हम संकलित सीएसएस आरू जेएस ( bootstrap.*
), साथ ही संकलित आरू लघुकृत सीएसएस आरू जेएस ( bootstrap.min.*
) प्रदान करय छै. CSS स्रोत नक्शा ( bootstrap.*.map
) कुछ ब्राउज़र कें डेवलपर उपकरणक कें साथ उपयोग कें लेल उपलब्ध छै. ग्लिफिकॉन्स के फॉन्ट शामिल छै, जेना कि वैकल्पिक बूटस्ट्रैप थीम छै.
बूटस्ट्रैप स्रोत कोड डाउनलोड म॑ पूर्व संकलित सीएसएस, जावास्क्रिप्ट, आरू फॉन्ट संपत्ति के साथ-साथ स्रोत कम, जावास्क्रिप्ट, आरू दस्तावेजीकरण शामिल छै. अधिक विशेष रूप स, एहि मे निम्नलिखित आओर बेसी शामिल अछि:
, less/
, js/
आरू fonts/
हमरऽ CSS, JS, आरू आइकन फॉन्ट (क्रमशः) के लेलऽ स्रोत कोड छै । dist/
फोल्डर मे ऊपर पूर्व संकलित डाउनलोड खंड मे सूचीबद्ध सब किछु शामिल अछि . docs/
फोल्डर मे हमर दस्तावेजीकरण क लेल स्रोत कोड शामिल अछि, आओर बूटस्ट्रैप examples/
उपयोग क. एकरा सं आगू, कोनों अन्य शामिल फाइल पैकेज, लाइसेंस जानकारी, आ विकास कें लेल समर्थन प्रदान करयत छै.
बूटस्ट्रैप अपनऽ बिल्ड सिस्टम लेली ग्रंट के उपयोग करै छै, जेकरा म॑ फ्रेमवर्क के साथ काम करै लेली सुविधाजनक तरीका छै. ई कोना हम अपन कोड संकलित करैत छी, टेस्ट चलाबैत छी, आओर बहुत किछु.
Grunt इंस्टॉल करय लेल, अहां के पहिने node.js (जाहि मे npm शामिल अछि) डाउनलोड आओर इंस्टॉल करय पड़त. npm नोड पैकेज्ड मॉड्यूल कें लेल खड़ा छै आ node.js कें माध्यम सं विकास निर्भरताक कें प्रबंधित करय कें एकटा तरीका छै.
तखन, कमांड लाइन सँ:grunt-cli
के साथ वैश्विक रूप स स्थापित करू npm install -g grunt-cli
./bootstrap/
डायरेक्टरी मे जाउ, फेर चलाउ npm install
. npm package.json
फाइल कें देखतय आ स्वचालित रूप सं ओतय सूचीबद्ध आवश्यक स्थानीय निर्भरता कें इंस्टॉल करतय.पूरा भेला पर, अहां कमांड लाइन सं देल गेल विभिन्न ग्रंट कमांड चला सकब.
grunt dist
(बस सीएसएस आ जावास्क्रिप्ट संकलित करू)/dist/
संकलित आ लघुकृत सीएसएस आ जावास्क्रिप्ट फाइल कें साथ निर्देशिका कें पुनर्जीवित करयत छै. बूटस्ट्रैप उपयोगकर्ता कें रूप मे, इ सामान्य रूप सं ओ कमांड छै जे अहां चाहय छी.
grunt watch
(देखू)Less स्रोत फाइल कें देखयत छै आ स्वचालित रूप सं ओकरा CSS मे पुनः संकलित करयत छै जखन कखनो अहां कोनों परिवर्तन सहेजय छी.
grunt test
(परीक्षण चलाउ) २.JSHint चलाबैत अछि आओर कर्म क बदौलत वास्तविक ब्राउज़र मे QUnit परीक्षण चलाबैत अछि .
grunt docs
(docs संपत्ति के निर्माण एवं परीक्षण)CSS, जावास्क्रिप्ट, आओर अन्य संपत्तियक कें निर्माण आ परीक्षण करयत छै जे दस्तावेजीकरण कें स्थानीय रूप सं चलाबैत समय कें माध्यम सं उपयोग कैल जायत छै bundle exec jekyll serve
.
grunt
(बिल्कुल सब किछु बनाउ आ टेस्ट चलाउ)CSS आरू जावास्क्रिप्ट क॑ संकलित आरू लघु बनाबै छै, दस्तावेजीकरण वेबसाइट बनाबै छै, डॉक्स के खिलाफ HTML5 वैलिडेटर चलाबै छै, कस्टमाइजर संपत्ति क॑ पुनर्जीवित करै छै, आरू बहुत कुछ. जेकिल के आवश्यकता अछि . आमतौर पर केवल तखन आवश्यक अछि जखन अहाँ स्वयं बूटस्ट्रैप पर हैकिंग क रहल छी.
यदि अहां कें निर्भरता कें इंस्टॉल करय मे या Grunt कमांड चलावय मे समस्या कें सामना करय कें चाही, त पहिने /node_modules/
npm दूवारा उत्पन्न निर्देशिका कें मेटा दिअ. तखन, पुनः चलाउ npm install
.
एहि मूल HTML टेम्पलेट सँ शुरू करू, अथवा एहि उदाहरण सभ केँ संशोधित करू . हम आशा करैत छी जे अहाँ हमर टेम्पलेट आ उदाहरण के अनुकूलित करब, ओकरा अपन जरूरत के अनुरूप अनुकूलित करब.
न्यूनतम बूटस्ट्रैप दस्तावेज के साथ काम शुरू करय लेल नीचा देल गेल HTML के कॉपी करू.
बूटस्ट्रैप के कई घटक के साथ उपरोक्त बेसिक टेम्पलेट पर निर्माण करू. हम अहां कें प्रोत्साहित करय छी की अहां कें व्यक्तिगत परियोजना कें जरूरतक कें अनुरूप बूटस्ट्रैप कें अनुकूलित आ अनुकूलित करूं.
बूटस्ट्रैप भंडार डाउनलोड कए नीचा देल गेल हर उदाहरण क लेल स्रोत कोड प्राप्त करू . उदाहरण docs/examples/
निर्देशिका मे भेटत।
बूटलिंट आधिकारिक बूटस्ट्रैप एचटीएमएल लिंटर टूल अछि. ई स्वचालित रूप स॑ वेबपेज म॑ कई आम एचटीएमएल गलती के जांच करै छै जे काफी "वेनिला" तरीका स॑ बूटस्ट्रैप के उपयोग करी रहलऽ छै । वेनिला बूटस्ट्रैप कें घटक/विजेट कें लेल डीओएम कें ओकर भागक कें किछु संरचना कें अनुरूप होनाय आवश्यक छै. बूटलिंट जांच करयत छै की बूटस्ट्रैप घटक कें इंस्टेंस मे सही ढंग सं संरचित HTML छै. अपन बूटस्ट्रैप वेब विकास टूलचेन मे बूटलिंट कें जोड़य पर विचार करूं ताकि कोनों आम गलती अहां कें प्रोजेक्ट कें विकास कें धीमा नहि करय.
बूटस्ट्रैप कें विकास कें बारे मे अपडेट रहूं आ अइ सहायक संसाधनक कें साथ समुदाय तइक पहुंचूं.
irc.freenode.net
सर्वर मे, ##bootstrap चैनल मे, IRC क उपयोग कए साथी बूटस्ट्रैपर क संग गपशप करू .twitter-bootstrap-3
पर पूछू .bootstrap
या समान वितरण तंत्र कें माध्यम सं वितरित करय कें समय बूटस्ट्रैप कें कार्यक्षमता कें संशोधित करय या जोड़य छै .नवीनतम गपशप आ लाजवाब म्यूजिक वीडियो के लेल ट्विटर पर @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 सुविधाक कें ब्राउज़र समर्थन कें बारे मे विस्तार सं जानय कें लेल Can I use... पर जाउ .
इंटरनेट एक्सप्लोरर 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;
जखन min-width
, max-width
, min-height
, अथवा max-height
. ओहि कारण स, v3.0.1 क रूप मे, हम आब s max-width
पर उपयोग नहि करैत छी .container
.
IE8 के संग किछु मुद्दा अछि @font-face
जखन :before
. बूटस्ट्रैप अपन ग्लिफिकॉन्स क संग ओहि संयोजन क उपयोग करैत अछि । यदि कोनों पन्ना कैश करलऽ जाय छै, आरू विंडो प॑ बिना माउस के लोड करलऽ जाय छै (अर्थात रिफ्रेश बटन दबाय क॑ या आईफ्रेम म॑ कुछ लोड करलऽ जाय छै) त॑ फॉन्ट लोड होय स॑ पहल॑ पन्ना रेंडर होय जाय छै । पृष्ठ (शरीर) पर मंडराइत रहला पर किछु आइकन देखाओल जायत आ शेष आइकन पर मंडराइत रहला पर ओहो देखाओल जायत । विस्तार स जानकारी लेल अंक #13863 देखू ।
पुरान इंटरनेट एक्सप्लोरर संगतता मोड मे बूटस्ट्रैप समर्थित नहि अछि. ई सुनिश्चित करै लेली कि आपने आईई लेली नवीनतम रेंडरिंग मोड के उपयोग करी रहलऽ छियै, <meta>
अपनऽ पन्ना म॑ उचित टैग क॑ शामिल करै प॑ विचार करऽ:
डिबगिंग उपकरण खोल क दस्तावेज मोड क पुष्टि करू: दबाउ F12आओर "दस्तावेज मोड" क जांच करू.
इंटरनेट एक्सप्लोरर कें प्रत्येक समर्थित संस्करण मे संभव सर्वोत्तम रेंडरिंग सुनिश्चित करय कें लेल इ टैग बूटस्ट्रैप कें सबटा दस्तावेज आ उदाहरणक मे शामिल छै.
अधिक जानकारी के लेल ई StackOverflow प्रश्न देखू .
इंटरनेट एक्सप्लोरर 10 डिवाइस चौड़ाई कें व्यूपोर्ट चौड़ाई सं अलग नहि करयत छै , आ अइ प्रकार बूटस्ट्रैप कें CSS मे मीडिया क्वेरी कें सही ढंग सं लागू नहि करयत छै. सामान्यतः अहाँ बस एकरा ठीक करबाक लेल CSS क एकटा त्वरित स्निपेट जोड़ब:
लेकिन, ई अपडेट 3 (उर्फ GDR3) स॑ पुरानऽ विंडोज फोन 8 संस्करण चलाबै वाला डिवाइसऽ लेली काम नै करै छै , कैन्हेंकि ई ऐन्हऽ डिवाइसऽ क॑ संकीर्ण "फोन" दृश्य के बजाय अधिकतर डेस्कटॉप दृश्य दिखाबै के कारण बनै छै । एकरा संबोधित करय लेल, बग के दूर करय लेल अहां के निम्नलिखित CSS आओर जावास्क्रिप्ट शामिल करय पड़त .
अधिक जानकारी आ उपयोग दिशा निर्देशक कें लेल, विंडोज फोन 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
z-indexing केरऽ जटिलता के कारण nav म॑ iOS प॑ ई तत्व के प्रयोग नै करलऽ जाय छै । एहि तरहें, नवबार मे ड्रॉपडाउन बंद करय लेल, अहां कें सीधा ड्रॉपडाउन तत्व (या कोनों अन्य तत्व जे आईओएस मे क्लिक घटना कें फायर करत ) पर क्लिक करय कें होयत.
पृष्ठ ज़ूमिंग अनिवार्य रूप स॑ कुछ घटकऽ म॑ रेंडरिंग आर्टिफैक्ट प्रस्तुत करै छै, बूटस्ट्रैप आरू बाकी वेब दूनू म॑ । मुद्दा के आधार पर हम सब एकरा ठीक क सकैत छी (पहिने खोजू आ फेर जरूरत पड़ला पर कोनो मुद्दा खोलू)। लेकिन, हम ई सब के अनदेखी करय के प्रवृत्ति रखैत छी कियाकि एकर प्रायः हैकी वर्कअराउंड के अलावा कोनो सीधा समाधान नै रहैत अछि.
:hover
/ :focus
मोबाइल परभले ही अधिकांश टचस्क्रीन पर वास्तविक होवरिंग संभव नै छै, लेकिन अधिकांश मोबाइल ब्राउज़र होवरिंग समर्थन के अनुकरण करै छै आरू :hover
"चिपचिपा" बनाबै छै. दोसरऽ शब्दऽ म॑ कहलऽ जाय त॑ :hover
स्टाइल कोनो तत्व क॑ टैप करला के बाद लागू होना शुरू होय जाय छै आरू उपयोगकर्ता केरऽ कोनो अन्य तत्व क॑ टैप करला के बाद ही लागू करना बंद होय जाय छै । एहि सँ बूटस्ट्रैप केर :hover
स्थिति एहन ब्राउज़र पर अवांछनीय रूप सँ "अटकल" भ' सकैत अछि. किछु मोबाइल ब्राउजर सेहो :focus
एहने चिपचिपा बना दैत अछि । एखन एहि मुद्दा सभक लेल एहन शैली सभ केँ पूर्ण रूप सँ हटाबय के अलावा कोनो सरल समाधान नहि अछि ।
किछु आधुनिक ब्राउज़र मे सेहो प्रिंटिंग चंचल भ सकैत अछि ।
विशेष रूप सं, क्रोम v32 कें रूप मे आ मार्जिन सेटिंग्स कें परवाह कैने बिना, क्रोम वेबपेज कें प्रिंट करय कें दौरान मीडिया क्वेरी कें हल करय कें समय भौतिक कागज कें आकार सं काफी संकीर्ण व्यूपोर्ट चौड़ाई कें उपयोग करय छै. एकर परिणामस्वरूप बूटस्ट्रैप कें अतिरिक्त-छोट ग्रिड कें प्रिंट करय कें समय अप्रत्याशित रूप सं सक्रिय भ सकय छै. किछु विवरणक लेल मुद्दा #12078 आओर क्रोम बग #273306 देखू. सुझाओल गेल उपाय: १.
@screen-*
ताकि अहां कें प्रिंटर पेपर अतिरिक्त-छोट सं पैघ मानल जै.साथ ही, सफारी v8.0 कें रूप मे, फिक्स्ड-विड्थ .container
s कें कारण सफारी कें प्रिंट करय कें समय असामान्य रूप सं छोट फॉन्ट आकार कें उपयोग करय सकय छै. अधिक जानकारी क लेल # 14868 आओर WebKit बग #138192 देखू. एकरऽ एगो संभावित समाधान निम्नलिखित CSS जोड़ना छै:
बॉक्स स॑ बाहर, एंड्रॉयड ४.१ (आरू कुछ नया रिलीज भी प्रत्यक्ष रूप स॑) ब्राउज़र ऐप के साथ पसंद केरऽ डिफ़ॉल्ट वेब ब्राउज़र के रूप म॑ भेजलऽ जाय छै (क्रोम के विपरीत) । दुर्भाग्यवश, ब्राउज़र ऐप में बहुत रास बग आ सामान्य रूप सं सीएसएस के संग असंगति अछि.
तत्वक पर <select>
, एंड्रॉयड स्टॉक ब्राउज़र साइड नियंत्रण प्रदर्शित नहि करतय अगर कोनों border-radius
आ/अथवा border
लागू कैल गेल छै. ( विवरण के लेलऽ ई StackOverflow प्रश्न<select>
देखऽ.) आपत्तिजनक CSS क॑ हटाबै लेली आरू एंड्रॉयड स्टॉक ब्राउज़र प॑ एक अनस्टाइल तत्व के रूप म॑ रेंडर करै लेली नीचें देलऽ गेलऽ कोड केरऽ स्निपेट के उपयोग करऽ . यूजर एजेंट सुंघला सं क्रोम, सफारी, आ मोजिला ब्राउज़र मे हस्तक्षेप सं बचल जायत छै.
एकटा उदाहरण देखय चाहैत छी? देखु ई जेएस बिन डेमो।
पुरान आरू बग्गी ब्राउज़र क॑ बेहतरीन संभव अनुभव प्रदान करै लेली बूटस्ट्रैप कई जगहऽ प॑ सीएसएस ब्राउज़र हैक के उपयोग करी क॑ कुछ ब्राउज़र संस्करणऽ क॑ विशेष सीएसएस क॑ लक्षित करै छै ताकि खुद ब्राउज़र म॑ बग के आसपास काम करलऽ जाय सक॑ । ई हैक सब समझै योग्य छै कि सीएसएस वैलिडेटरऽ क॑ शिकायत करै छै कि ई अमान्य छै । एक दू ठाम, हम ब्लीडिंग-एज सीएसएस फीचर के सेहो उपयोग करैत छी जे एखन धरि पूर्ण रूप सं मानकीकृत नहिं अछि, मुदा ई सब विशुद्ध रूप सं प्रगतिशील संवर्धन के लेल उपयोग कयल गेल अछि.
ई सत्यापन चेतावनी व्यवहार म॑ कोनो मायने नै रखै छै कैन्हेंकि हमरऽ सीएसएस केरऽ गैर-हैकी भाग पूरा तरह स॑ मान्यता दै छै आरू हैकी भाग गैर-हैकी भाग केरऽ सही कामकाज म॑ हस्तक्षेप नै करै छै, यही वजह स॑ हम्मं॑ जानबूझ क॑ ई विशेष चेतावनी क॑ अनदेखी करै छियै ।
हमरऽ एचटीएमएल डॉक्स म॑ ऐन्हऽ ही कुछ तुच्छ आरू बेमतलब एचटीएमएल सत्यापन चेतावनी छै जेकरऽ कारण छै कि हमरऽ एक निश्चित फायरफॉक्स बग लेली एगो वर्कअराउंड शामिल छै .
जखन कि हम आधिकारिक तौर पर कोनों थर्ड पार्टी प्लगइन या ऐड-ऑन कें समर्थन नहि करय छी, हम किछ उपयोगी सलाह जरूर प्रदान करय छी जे अहां कें प्रोजेक्ट मे संभावित मुद्दा सं बचय मे मदद करतय.
गूगल मैप्स आ गूगल कस्टम सर्च इंजन सहित किछ थर्ड पार्टी सॉफ्टवेयर, बूटस्ट्रैप सं टकराव कें कारण * { box-sizing: border-box; }
, एकटा नियम जे एकरा ऐना बनायत padding
छै कोनों तत्व कें अंतिम गणना चौड़ाई कें प्रभावित नहि करयत छै. बॉक्स मॉडल आ साइजिंग के बारे मे बेसी जानू CSS Tricks पर .
संदर्भ कें आधार पर, अहां जरूरत कें अनुसार ओवरराइड करय सकय छी (विकल्प 1) या पूरा क्षेत्रक कें लेल बॉक्स-आकार कें रीसेट करय सकय छी (विकल्प 2).
बूटस्ट्रैप आम वेब मानक कें पालन करयत छै आ-न्यूनतम अतिरिक्त प्रयास कें साथ-एहन साइट बनावा कें लेल उपयोग कैल जा सकय छै जे एटी कें उपयोग करय वाला कें लेल सुलभ छै .
यदि अहां कें नेविगेशन मे बहुत सं लिंक छै आ DOM मे मुख्य सामग्री सं पहिने आबै छै, Skip to main content
त नेविगेशन सं पहिने एकटा लिंक जोड़ूं (एकटा सरल व्याख्या कें लेल, नेविगेशन लिंक छोड़ूं पर इ A11Y प्रोजेक्ट लेख देखूं ). क्लास के उपयोग करला .sr-only
स॑ स्किप लिंक क॑ दृश्य रूप स॑ छिपाय देलऽ जैतै, आरू .sr-only-focusable
क्लास ई सुनिश्चित करतै कि लिंक एक बार केंद्रित होय के बाद (दृष्टि वाला कीबोर्ड उपयोगकर्ता लेली) दृश्यमान होय जाय छै ।
क्रोम म॑ लंबा समय स॑ कमी/बग के कारण (देखऽ क्रोमियम बग ट्रैकर म॑ मुद्दा 262171 ) आरू इंटरनेट एक्सप्लोरर (देखऽ ई लेख पन्ना म॑ लिंक आरू फोकस क्रम प॑ ), आहाँ क॑ ई सुनिश्चित करै के जरूरत होतै कि आपकऽ स्किप लिंक केरऽ लक्ष्य छै जोड़ि कए कम स कम प्रोग्रामेटिक रूप स फोकस करबा योग्य अछि tabindex="-1"
.
एकरऽ अलावा, आप लक्ष्य प॑ एक दृश्यमान फोकस संकेत क॑ स्पष्ट रूप स॑ दबाना चाहै सकै छियै (विशेष रूप स॑ कैन्हेंकि क्रोम वर्तमान म॑ तत्वऽ प॑ फोकस भी सेट करै छै tabindex="-1"
जब॑ ओकरा माउस स॑ क्लिक करलऽ जाय छै) के साथ #content:focus { outline: none; }
।
ध्यान रहे कि ई बग कोनो अन्य इन-पेज लिंक क॑ भी प्रभावित करतै जेकरा स॑ आपकऽ साइट उपयोग करी रहलऽ छै, जेकरा स॑ कीबोर्ड उपयोगकर्ता लेली बेकार होय जैतै । अहां अन्य सब नामित एंकर / टुकड़ा पहचानकर्ताक मे एकटा समान स्टॉप-गैप फिक्स जोड़य पर विचार कयर सकय छी जे लिंक लक्ष्य कें रूप मे काज करय छै.
हेडिंग ( <h1>
- <h6>
) केँ नेस्ट करबा काल, अहाँक प्राथमिक दस्तावेज हेडर एकटा <h1>
. बाद केरऽ हेडिंग म॑ तार्किक उपयोग करलऽ जाय <h2>
- <h6>
ऐन्हऽ कि स्क्रीन रीडर आपकऽ पन्ना लेली सामग्री तालिका के निर्माण करी सक॑ ।
HTML CodeSniffer आओर Penn State's AccessAbility पर बेसी जानू .
वर्तमान मे, बूटस्ट्रैप मे उपलब्ध किछ डिफ़ॉल्ट रंग संयोजन (जैना विभिन्न स्टाइल बटन वर्ग, बेसिक कोड ब्लॉक कें लेल उपयोग कैल जाय वाला किछु कोड हाइलाइटिंग रंग , .bg-primary
संदर्भ पृष्ठभूमि सहायक वर्ग, आ डिफ़ॉल्ट लिंक रंग जखन एकटा सफेद पृष्ठभूमि पर उपयोग कैल जायत छै) कम विपरीत अनुपात ( 4.5:1 कें अनुशंसित अनुपात सं नीचा ) होयत छै. अइ सं कम दृष्टि वाला उपयोगकर्ताक कें समस्या भ सकएय छै या जे रंग आन्हर छै. ई डिफ़ॉल्ट रंगऽ क॑ एकरऽ विपरीत आरू पठनीयता बढ़ाबै लेली संशोधित करै के जरूरत पड़॑ सकै छै ।
बूटस्ट्रैप एमआईटी लाइसेंस के तहत जारी करलऽ गेलऽ छै आरू एकरऽ कॉपीराइट २०१९ ट्विटर छै । छोट-छोट टुकड़ा तक उबालि कए एकर वर्णन निम्नलिखित शर्तक संग कएल जा सकैत अछि ।
अधिक जानकारी कें लेल पूरा बूटस्ट्रैप लाइसेंस परियोजना भंडार मे स्थित छै.
समुदाय कें सदस्यक बूटस्ट्रैप कें दस्तावेजीकरण कें विभिन्न भाषाक मे अनुवाद करलक छै. कियो आधिकारिक तौर पर समर्थित नहि अछि आ भ सकैत अछि जे ओ हमेशा अपडेट नहि होएत।
हम अनुवाद के आयोजन या होस्ट करय में मदद नै करैत छी, बस ओकरा सं लिंक करैत छी.
कोनो नव वा नीक अनुवाद समाप्त? एकरा हमर सूची मे जोड़बाक लेल एकटा पुल अनुरोध खोलू।