डावनलोड करचें

बूटस्ट्रॅप (सद्या v3.4.1) कडेन बेगीन सुरू करपाचे कांय सोपे मार्ग आसात, दरेक वेगळ्या कुशळटाय पातळेक आनी वापर प्रकरणाक आकर्शीत करता. तुमच्या खाशेल्या गरजे प्रमाण कितें तें पळोवपा खातीर वाचात.

jsDelivr हें नांव

jsDelivr हांगा आशिल्ले लोक कृपा करून Bootstrap च्या CSS आनी JavaScript खातीर CDN आदार दितात. फकत हे 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 वापरून Bootstrap ची Less, CSS, JavaScript, आनी फॉन्ट स्थापीत करूंक आनी वेवस्थापन करूंक शकतात :

bower install bootstrap

npm च्या आदारान स्थापन करचें

तुमी npm वापरून Bootstrap स्थापीत करूंक शकतात :

npm install bootstrap@3

require('bootstrap')Bootstrap च्या सगळ्या jQuery प्लगइनांक jQuery वस्तूचेर लोड करतले. मॉड्यूल bootstrapस्वता कांयच निर्यात करिना. /js/*.jsपॅकेजीच्या वयल्या पांवड्यावेल्या निर्देशिका खाला फायली लोड करून तुमी Bootstrap च्या jQuery प्लगइनांक वैयक्तीकपणान हाताळणीन लोड करूंक शकतात .

Bootstrap's package.jsonहातूंत सकयल दिल्ल्या कळाखाला कांय अतिरिक्त मेटाडेटा आसा:

• less- बूटस्ट्रॅपाच्या मुखेल कमी स्त्रोत फायलीक मार्ग
• style- मुलभूत मांडावळी वापरून पूर्वसंकलित केल्ल्या बूटस्ट्रॅपाच्या बिगर-मिनफायड CSS चो मार्ग (पसंतीची कसलीच ना)

Composer कडेन स्थापन करचें

तुमी Composer वापरून Bootstrap ची Less, CSS, JavaScript, आनी फॉन्ट स्थापीत करूंक आनी वेवस्थापन करूंक शकतात :

composer require twbs/bootstrap

Less/Sass खातीर ऑटोप्रिफिक्सर जाय

बूटस्ट्रॅप CSS विक्रेत्याच्या उपसर्गांकडेन वेव्हार करपाखातीर Autoprefixer वापरता . तुमी Bootstrap ताच्या Less/Sass स्त्रोता वयल्यान संकलित करतात आनी आमची Gruntfile वापरनात जाल्यार, तुमकां स्वता तुमच्या बिल्ड प्रक्रियेंत Autoprefixer एकठांय करचो पडटलो. तुमी पूर्वसंकलित बूटस्ट्रॅप वापरतात वा आमची Gruntfile वापरतात जाल्यार, तुमकां हाचो हुस्को करपाची गरज ना कारण Autoprefixer आमच्या Gruntfile मदीं पयलींच एकत्रीत केला.

कितें आस्पावलां

बूटस्ट्रॅप दोन रुपांनी डाउनलोड करपाक मेळटा, जाचे भितर तुमकां सकयल दिल्ल्यो निर्देशिका आनी फायली मेळटलीं, तार्कीक रितीन सामान्य संसाधनांचो गट करप आनी संकलित आनी ल्हान केल्ले दोनूय बदल पुरवण करप.

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

एकदां डाउनलोड केल्या उपरांत, (संकलित केल्ली) बूटस्ट्रॅपाची रचणूक पळोवपाक संकुचीत फोल्डर अनझिप करात. तुमकां अशें कितें तरी दिसतलें:

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

हो Bootstrap चो सगळ्यांत मुळावो प्रकार: लागीं लागीं खंयच्याय वेब प्रकल्पांत बेगीन ड्रॉप-इन वापरा खातीर पूर्वसंकलित फायली. आमी संकलित CSS आनी JS ( bootstrap.*), तशेंच संकलित आनी लघुकृत CSS आनी JS ( bootstrap.min.*) पुरवण करतात. CSS स्त्रोत नकाशे ( bootstrap.*.map) कांय ब्राउझरांच्या विकसक साधनां वांगडा वापरपाखातीर उपलब्ध आसात. Glyphicons च्या फॉन्टांचो आस्पाव केला, तशेंच पर्यायी Bootstrap थीम आसा.

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

Bootstrap स्त्रोत कोड डाउनलोडांत पूर्वसंकलित CSS, JavaScript, आनी फॉन्ट मालमत्ता, स्त्रोत Less, JavaScript, आनी दस्तावेजीकरणा वांगडा आसपावीत केल्या. चड विशिश्टपणान, तातूंत सकयल दिल्ल्या आनी हेर गजालींचो आस्पाव आसा:

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

less/, js/, आनी हे fonts/आमच्या CSS, JS, आनी चिन्न फॉन्टांखातीर (अनुक्रमान) स्त्रोत कोड आसात. dist/वयर पूर्वसंकलित डाउनलोड विभागांत दिल्लें सगळें फोल्डरांत आसपावीत केलां . फोल्डरांत आमच्या दस्तावेजीकरणाखातीर, आनी बूटस्ट्रॅप वापराचो docs/स्त्रोत कोड आसपावीत केला . examples/ताचे भायर, हेर खंयचीय समाविष्ट केल्ली फायल पॅकेजीं, परवानो म्हायती, आनी विकासा खातीर आदार पुरवण करता.

CSS आनी जावास्क्रिप्ट संकलित करप

बूटस्ट्रॅप आपल्या बिल्ड प्रणालीखातीर 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 आदेश

grunt dist(फक्त CSS आनी JavaScript संकलित करात)

संकलित /dist/आनी ल्हान केल्ल्या CSS आनी JavaScript फायलींनी निर्देशिका परतून तयार करता. बूटस्ट्रॅप वापरपी म्हूण, ही सामान्यपणान तुमकां जाय आशिल्ली आदेश आसा.

grunt watch(पळोवप)

Less स्त्रोत फायली पळयता आनी जेन्ना तुमी बदल जतनाय घेतात तेन्ना आपसूक तीं CSS कडेन परतून संकलित करता.

grunt test(चांचण्यो चलोवप) .

JSHint चालीक लायता आनी Karma च्या उपकाराक लागून खऱ्या ब्राउझरांनी QUnit चांचण्यो चालीक लायता .

grunt docs(docs मालमत्ता तयार करप & चांचणी करप)

CSS, JavaScript, आनी हेर मालमत्ता तयार करता आनी चांचणी करता जी वरवीं दस्तावेजीकरण थळाव्यान चालीक लायतना वापरतात bundle exec jekyll serve.

grunt(एकदम सगळें बांदून चांचण्यो चलोवच्यो)

CSS आनी JavaScript संकलित करता आनी ल्हान करता, दस्तावेजीकरण संकेतथळ तयार करता, डॉक्स आड HTML5 प्रमाणक चालीक लायता, Customizer मालमत्ता परतून तयार करता, आनी हेर. जेकिलाची गरज आसा . चड करून फकत तुमी बूटस्ट्रॅपाचेरच हॅकिंग करतात जाल्यार गरजेचें.

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

तुमकां अवलंबन प्रतिष्ठापीत करपाक वा Grunt आदेश चालीक लावपाक समस्या येवंक जाय जाल्यार, पयलीं /node_modules/npm कडल्यान तयार केल्ली निर्देशिका काडून उडोवची. मागीर, परतून चालीक लावचें npm install.

मुळावें साचा

ह्या मुळाव्या HTML साच्यान सुरवात करात, वा हीं उदाहरणां बदलात . तुमी आमचे साचे आनी उदाहरणां सानुकूल करतले, तुमच्या गरजे प्रमाणें अनुकूल करतले अशी आस्त बाळगता.

उण्यांत उण्या Bootstrap दस्तावेजा वांगडा काम करपाक सुरवात करपाक सकयल दिल्लो 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>

उदाहरणां

Bootstrap च्या जायत्या घटकां सयत वयर दिल्ल्या मुळाव्या साच्याचेर तयार करात. तुमच्या वैयक्तीक प्रकल्पाच्या गरजे प्रमाणें Bootstrap सानुकूल करपाक आनी अनुकूल करपाक आमी तुमकां प्रोत्साहन दितात.

बूटस्ट्रॅप रिपॉझिटरी डाउनलोड करून सकयल दिल्ल्या दर एका उदाहरणाखातीर स्त्रोत कोड मेळोवचो . उदाहरणां docs/examples/निर्देशिकेंत मेळटात.

चौकटीचो वापर करून

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

मुळाव्यो गजाली सोडून कांयच ना: एक कंटेनरा वांगडा CSS आनी JavaScript संकलित केला.

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

दृश्य वाडयल्ल्या अणभवाक पर्यायी Bootstrap थीम लोड करात.

जाळीं

चारय थर, नेस्टिंग, आनी हेर आशिल्ल्या ग्रिड मांडावळींचीं जायतीं उदाहरणां.

जंबोट्रॉन हें नांव

नवबार आनी कांय मुळाव्या जाळी स्तंभांनी जंबोट्रॉन भोंवतणी बांदात.

संकुचीत जंबोट्रॉन

मुलभूत कंटेनर आनी जंबोट्रॉन संकुचीत करून चड सानुकूल पान तयार करात.

नवबर कृतींत

नवबर हें नांव

कांय अतिरिक्त सामुग्री वांगडा नवबार आसपावीत करपी सुपर बेसिक टेम्पलेट.

स्थिर शीर्ष नवबार

कांय अतिरिक्त सामुग्री वांगडा स्थिर टॉप नावबार आशिल्लो सुपर बेसिक टेम्पलेट.

नवबार थारायिल्लें

कांय अतिरिक्त सामुग्री वांगडा स्थिर टॉप नावबार आशिल्लो सुपर बेसिक टेम्पलेट.

सानुकूल घटक

कव्हर

सादें आनी सोबीत मुखेल पान तयार करपाखातीर एक पानाचो साचा.

हिंडोळ

नवबार आनी हिंडोला पसंतीचे करात, मागीर कांय नवे घटक जोडात.

ब्लॉग केला

सानुकूल नेव्हिगेशन, हेडर, आनी प्रकार आशिल्ली सादी दोन स्तंभ ब्लॉग मांडावळ.

डॅशबोर्ड

स्थिर सायडबार आनी नवबार आशिल्ल्या प्रशासन डॅशबोर्डाची मुळावी रचणूक.

सायन-इन करचें पान

फॉर्मांत साद्या सायन खातीर सानुकूल फॉर्म मांडावळ आनी डिझायन.

न्याय्य नव

न्याय्य दुवे आशिल्ली सानुकूल नवबार तयार करात. तकली वयर काडटा! चड सफारी इश्टागत करपी न्हय.

चिकट पाद लेख

जेन्ना सामुग्री ताचे परस ल्हान आसता तेन्ना व्यूपोर्टाच्या तळाक तळटीत जोडात.

नवबार आशिल्लें चिकट पाद लेख

व्ह्यूपोर्टाच्या सकयल एक तळटीत जोडात आनी वयर एक स्थिर नवबार आसा.

प्रयोग करतात

बिगर प्रतिसाद दिवपी बूटस्ट्रॅप

आमच्या डॉक्स प्रमाणें Bootstrap ची प्रतिसाद सहज अक्षम करात .

ऑफ कॅनव्हास

Bootstrap कडेन वापरपाखातीर टॉगल करपाक येवपी ऑफ-कॅनव्हास नेव्हिगेशन मेनू तयार करात.

साधनां

बूटलिंट हें नांव

बूटलिंट हें अधिकृत बूटस्ट्रॅप एचटीएमएल लिंटर साधन आसा. तो आपोआप Bootstrap वापरपी वॅबपानांनी जायत्यो सामान्य HTML चुको तपासता जे फामाद "व्हॅनिला" पद्दतीन करतात. Vanilla Bootstrap च्या घटकांक/विजेटांक DOM च्या तांच्या भागांक कांय संरचनां प्रमाणें आसपाक जाय. बूटस्ट्रॅप घटकांच्या प्रसंगांनी योग्य रितीन-रचणूक केल्ली HTML आसा काय ना तें बूटलिंट तपासता. तुमच्या Bootstrap वेब विकास साधनसाखळींत Bootlint जोडपाचो विचार करात जेणे करून खंयचीच सामान्य चूक तुमच्या प्रकल्पाची विकास मंद करची न्हय.

समुदाय

बूटस्ट्रॅपाच्या विकासा विशीं अद्ययावत रावचें आनी ह्या उपकारक साधनां वरवीं समाजा मेरेन पावचें.

• द ऑफिशियल बूटस्ट्रॅप ब्लॉग वाचात आनी सबस्क्राइब करात .
• irc.freenode.netसर्वरांत, ##bootstrap चॅनलांत , IRC वापरून सहकारी बूटस्ट्रॅपरां कडेन गप्पा मारात .
• Bootstrap वापरपाक मदती खातीर, टॅग वापरून StackOverflowtwitter-bootstrap-3 चेर विचारात .
• चडांत चड सोद घेवपा खातीर npmbootstrap वा तत्सम वितरण यंत्रणे वरवीं वितरीत करतना Bootstrap कार्यक्षमताय बदलपी वा जोडपी पॅकेजींचेर विकसकांनी कीवर्ड वापरपाक जाय .
• बूटस्ट्रॅप एक्स्पोंत बूटस्ट्रॅपा वांगडा बांदपी लोकांचीं प्रेरणादायक उदाहरणां सोदून काडात .

तशेंच ताज्या गॉसिप आनी अद्भुत संगीत व्हिडियो खातीर तुमी ट्विटराचेर @getbootstrap हांकां फॉलो करूंक शकतात .

प्रतिसाद दिवप अक्षम करप

बूटस्ट्रॅप आपसूक तुमचीं पानां वेगवेगळ्या स्क्रीन आकारां खातीर अनुकूल करता. हांगां हें वैशिश्ट्य कशें अक्षम करचें म्हणजे तुमचें पान ह्या प्रतिसाद नाशिल्ल्या उदाहरणा प्रमाणें काम करता .

पान प्रतिसाद अक्षम करपाच्यो पावलां

1. CSS डॉक्सांत<meta> उल्लेख केल्लो व्यूपोर्ट वगडावचो
2. widthएकूच रुंदाय आशिल्ल्या दरेक ग्रिड टियर खातीर on the ओव्हररायड करात .container, देखीक width: 970px !important;हें मुलभूत Bootstrap CSS उपरांत येता हाची खात्री करात. तुमी पर्यायीपणान !importantमाध्यम क्वेरी वा कांय निवडक-फू कडेन टाळूंक शकतात.
3. navbars वापरत जाल्यार, सगळो navbar कोसळपी आनी विस्तारपी वागणूक काडून उडोवची.
4. ग्रिड मांडावळी खातीर, .col-xs-*मध्यम/व्हडल्यां भायर, वा ताचे सुवातेर वर्ग वापरात. काळजी करूंक नाकात, अतिरिक्त-ल्हान डिव्हायस ग्रिड सगळ्या रिझोल्यूशनांक स्केल करता.

तुमकां अजूनय IE8 खातीर Respond.js जाय पडटलो (आमचीं मिडिया क्वेरी अजूनय आसात आनी ताचेर प्रक्रिया करपाची गरज आशिल्ल्यान). हाका लागून बूटस्ट्रॅपाचे "मोबायल साइट" आंग अक्षम जातात.

प्रतिसाद अक्षम केल्लो बूटस्ट्रॅप साचा

आमी हीं पावलां एका उदाहरणाक लागू केल्यांत. विशिश्ट बदल चालीक लायिल्ले पळोवपाक ताचो स्त्रोत कोड वाचात.

प्रतिसाद नाशिल्लें उदाहरण पळयात

ब्राउझर आनी डिव्हायस समर्थन

बूटस्ट्रॅप नवीनतम डेस्कटॉप आनी मोबायल ब्राउझरांत सगळ्यांत बरे तरेन काम करपाक तयार केला, म्हळ्यार पोरने ब्राउझर कांय घटकांचे वेगवेगळे शैलीचे, जरी पुरायपणान कार्यक्षम आसले तरी, रेंडरींग दाखोवंक शकतात.

समर्थीत ब्राउझर

खासा करून, आमी सकयल दिल्ल्या ब्राउझर आनी प्लॅटफॉर्मांच्या नवीनतम आवृत्त्यांक तेंको दितात .

WebKit, Blink, वा Gecko ची नवीनतम आवृत्ती वापरपी पर्यायी ब्राउझर, थेट वा प्लॅटफॉर्माच्या वेब पळोवप API वरवीं, स्पश्टपणान समर्थीत नात. पूण, Bootstrap (चडशा प्रकरणांनी) ह्या ब्राउझरांनीय योग्य रितीन दाखोवंक आनी काम करपाक जाय. चड विशिश्ट आदार म्हायती सकयल दिल्या.

मोबायल साधनां

सादारणपणान, Bootstrap दरेका मुखेल प्लॅटफॉर्माच्या मुलभूत ब्राउझरांच्या नवीनतम आवृत्त्यांक तेंको दिता. लक्षांत दवरात की प्रॉक्सी ब्राउझर (देखीक Opera Mini, Opera Mobile चो Turbo मोड, UC Browser Mini, Amazon Silk) समर्थीत नात.

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

तेच प्रमाणें, चडशा डेस्कटॉप ब्राउझरांची नवीनतम आवृत्ती समर्थीत आसा.

Windows चेर, आमी Internet Explorer 8-11 चो समर्थन करतात .

Firefox खातीर, नवीनतम सामान्य स्थिर प्रकाशना वांगडाच, आमी Firefox च्या नवीनतम विस्तारीत आदार प्रकाशन (ESR) आवृत्तीकय तेंको दितात.

अनधिकृतपणान, बूटस्ट्रॅप क्रोमियम आनी क्रोम फॉर लिनक्स, फायरफॉक्स फॉर लिनक्स, आनी इंटरनॅट एक्सप्लोरर 7, तशेंच मायक्रोसॉफ्ट एजांत फावो त्या प्रमाणांत बरो दिसपाक जाय आनी वागपाक जाय, जरी तांकां अधिकृतपणान तेंको नासलो तरी.

बूटस्ट्रॅपाक झगडपाक जाय आशिल्ल्या कांय ब्राउझर बगांची वळेरी खातीर, पळयात आमची ब्राउझर बगांची वण्टी .

इंटरनॅट एक्सप्लोरर 8 आनी 9

Internet Explorer 8 आनी 9 हांकांय तेंको आसा, पूण, उपकार करून लक्षांत दवरात की कांय CSS3 गुणधर्म आनी HTML5 घटक ह्या ब्राउझरां कडल्यान पुरायपणान समर्थीत नात. ते भायर, Internet Explorer 8 कडेन माध्यम क्वेरी आदार सक्षम करपाक Respond.js वापरपाची गरज आसा.

CSS3 आनी HTML5 वैशिश्ट्यांच्या ब्राउझर आदाराचेर तपशीलां खातीर हांव वापरूंक शकता... भेट दिवची .

इंटरनॅट एक्सप्लोरर 8 आनी Respond.js

Internet Explorer 8 खातीर तुमच्या विकास आनी उत्पादन वातावरणांत Respond.js वापरतना सकयल दिल्ल्या सावधानतायेची जतनाय घेयात.

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

वेगळ्या (उप)डोमेनाचेर (देखीक, CDN चेर) होस्ट केल्ल्या CSS वांगडा Respond.js वापरपाक कांय अतिरिक्त सेटअप जाय पडटा. तपशीलां खातीर Respond.js डॉक्स पळयात.

Respond.js आनीfile://

ब्राउझर सुरक्षा नेमांक लागून, Respond.js प्रोटोकॉल वरवीं पळयल्ल्या पानांचेर काम करीना file://(जशें थळावी HTML फायल उगडटना). IE8 त प्रतिसाद दिवपी वैशिश्ट्यांची चांचणी करपाक, HTTP(S) वरवीं तुमचीं पानां पळयात. तपशीलां खातीर Respond.js डॉक्स पळयात.

Respond.js आनी@import

Respond.js वरवीं संदर्भ दिल्ल्या CSS कडेन काम करीना @import. खासा करून, कांय Drupal संरचना वापरपाक वळखतात @import. तपशीलां खातीर Respond.js डॉक्स पळयात.

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

IE8 , , , वा box-sizing: border-box;कडेन जोडल्यार पुरायपणान तेंको दिना . त्या कारणा खातीर, v3.0.1 सावन, आमी आतां s चेर वापरनात.min-widthmax-widthmin-heightmax-heightmax-width.container

इंटरनॅट एक्सप्लोरर 8 आनी @font-face

IE8 कडेन कांय प्रस्न आसात @font-faceजेन्ना जोडटात तेन्ना :before. बूटस्ट्रॅप त्या संयोजनाचो वापर आपल्या ग्लिफिकॉन्स वांगडा करता. जर पान कॅश केला, आनी विंडोचेर माऊस नासतना लोड केला (म्हळ्यार रिफ्रेश बटण दामचें वा iframe त कितेंय लोड करचें) जाल्यार फॉन्ट लोड जावचे पयलीं पान रेंडर जाता. पानाचेर (बॉडी) होवर केल्यार कांय चिन्नां दाखयतले आनी उरिल्ल्या चिन्नांचेर होवर केल्यार तींय दाखयतले. तपशीलां खातीर अंक #13863 पळयात.

आयई सुसंगती मोड

पोरन्या Internet Explorer सुसंगती मोडांत बूटस्ट्रॅप समर्थीत ना. तुमी IE खातीर नवीनतम रेंडरींग मोड वापरतात हाची खात्री करपाक, <meta>तुमच्या पानांनी योग्य टॅग समाविष्ट करपाचो विचार करात:

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

डिबगिंग साधनां उगडून दस्तावेज मोडाची खात्री करात: दामचो F12आनी "दस्तावेज मोड" तपासात.

Internet Explorer च्या दरेक समर्थीत आवृत्तींत शक्य तितले बरे रेंडरींग सुनिश्चीत करपाक हो टॅग Bootstrap च्या सगळ्या दस्तावेजीकरणांत आनी उदाहरणांनी समाविष्ट केला.

चड म्हायती खातीर हो StackOverflow प्रस्न पळयात .

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

Internet Explorer 10 डिव्हायस रुंदायेक viewport रुंदाये पासून वेगळी करीना , आनी अशे तरेन Bootstrap च्या CSS त माध्यम क्वेरी योग्य रितीन लागू करिना. सादारणपणान तुमी फकत हें सुदारपाक CSS चो बेगीन स्निपेट जोडटले:

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

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

@-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)
}

चड म्हायती खातीर आनी वापर मार्गदर्शक तत्वां खातीर, Windows Phone 8 आनी Device-Width वाचात .

एक heads up म्हूण, आमी हें Bootstrap च्या सगळ्या दस्तावेजीकरणांत आनी उदाहरणांनी एक प्रदर्शन म्हणून समाविष्ट करतात.

सफारी टक्के गोल करप

OS X खातीर v7.1 आनी iOS v8.0 खातीर Safari च्या आवृत्त्यांच्या रेंडरिंग इंजिनाक आमच्या .col-*-1ग्रिड वर्गांत वापरिल्ल्या दशांश सुवातींच्या संख्येंत कांय त्रास जालो. देखून तुमचे कडेन 12 वैयक्तीक ग्रिड स्तंभ आसले जाल्यार, हेर स्तंभ वळींच्या तुळेंत ते ल्हान आयले हें तुमकां दिसतलें. Safari/iOS अपग्रेड करपा वांगडाच, तुमचे कडेन उपाय करपा खातीर कांय पर्याय आसात:

• .pull-rightहार्ड-उजवें संरेखण मेळोवपाक तुमच्या निमाण्या ग्रिड स्तंभांत जोडात
• सफारी खातीर परिपूर्ण गोल करपाक मेळपाक तुमची टक्केवारी हाताळणी ट्वीक करात (पयल्या पर्याया परस चड कठीण)

मोडल, नवबार, आनी आभासी कीबोर्ड

ओव्हरफ्लो आनी स्क्रोल करप

overflow: hiddenon the element खातीर आदार <body>iOS आनी Android त सामको मर्यादीत आसा. ते खातीर, जेन्ना तुमी त्या खंयच्याय डिव्हायसाच्या ब्राउझरांतल्या मोडलाच्या वयल्या वा सकयल्या भागांतल्यान स्क्रोल करतात, तेन्ना <body>सामुग्री स्क्रोल करपाक लागतली. Chrome बग #175502 ( Chrome v40 त निवळ केला) आनी WebKit बग #153852 पळयात .

iOS मजकूर क्षेत्रां आनी स्क्रोल करप

<input>iOS 9.3 सावन, मोडल उक्तो आसतना, स्क्रोल हावभावाचो सुरवातीचो स्पर्श मजकूर वा a च्या मर्यादे भितर आसल्यार <textarea>, <body>मोडाला सकयल आशिल्ली सामग्री मोडलाच्याच बदला स्क्रोल जातली. वेबकिट बग #153856 पळयात .

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

तशेंच, लक्षांत दवरात की तुमी स्थिर नॅव्हबार वापरतात वा मोडाला भितर इनपुट वापरतात जाल्यार, iOS कडेन रेंडरींग बग आसा जो आभासी कीबोर्ड ट्रिगर करतना स्थिर घटकांची सुवात अद्ययावत करिना. हाचे खातीर कांय उपाय position: absoluteयेवजण्यो हाताळणीन स्थिती दुरुस्त करपाचो यत्न करपाक तुमच्या घटकांचें रुपांतर करप वा फोकसाचेर टाइमर आवाहन करप हांचो आस्पाव जाता. हें Bootstrap कडल्यान हाताळना, देखून तुमच्या ऍप्लिकेशनाक खंयचो उपाय बरो आसा तें थारावप तुमचेर थारता.

नवबार ड्रॉपडावन

z-indexing च्या गुंतागुंतीक लागून nav च्या iOS चेर .dropdown-backdropघटक वापरनात. अशे तरेन, navbars मदीं ड्रॉपडावन बंद करपाक, तुमी थेट ड्रॉपडावन घटकाचेर क्लिक करचो पडटलो (वा हेर खंयचोय घटक जो iOS त क्लिक घडणूक फायर करतलो ).

ब्राउझर झूम करप

पृष्ठ झूम करप अपरिहार्यपणान कांय घटकांत रेंडरींग आर्टिफॅक्ट सादर करता, बूटस्ट्रॅप आनी उरिल्ल्या वेबांत. मुद्द्याचेर आदारून आमी तो सुदारूंक शकतले (पयलीं सोद घेयात आनी मागीर गरज पडल्यार मुद्दो उगडात). पूण, आमी ह्या कडेन दुर्लक्ष करपाची प्रवृत्ती आसता कारण तांकां चड करून हॅकी वर्कअराउंड सोडल्यार हेर कसलोच थेट उपाय नासता.

चिकट :hover/ :focusमोबायलाचेर

चडशा टचस्क्रीनांचेर खरे होव्हरिंग शक्य नासलें तरी, चडशे मोबायल ब्राउझर होव्हरिंग समर्थनाचें अनुकरण करतात आनी :hover"चिकट" करतात. म्हणल्यार, :hoverशैली एका घटकाक टॅप केल्या उपरांत लागू करपाक लागतात आनी वापरपी हेर खंयच्याय घटकाक टॅप केल्या उपरांतच लागू करपाक बंद करतात. हाका लागून Bootstrap ची :hoverस्थिती अशा ब्राउझरांचेर अनिष्ट "अडकून" जावंक शकता. कांय मोबायल ब्राउझरूय :focusअशेच तरेन चिकट करतात. अशो शैली पुरायपणान काडून उडोवपा बगर सध्या ह्या प्रस्नां खातीर सादें उपाय ना.

छापणावळ करप

कांय आधुनीक ब्राउझरांत लेगीत छापणावळ विचित्र आसूं येता.

खासा करून, Chrome v32 प्रमाणें आनी मार्जिन मांडावळींची पर्वा करिनासतना, Chrome वॅबपान छापतना माध्यम क्वेरी सोडोवपाक भौतिक कागद आकारा परस लक्षणीय रितीन अरुंद व्ह्यूपोर्ट रुंदायेचो वापर करता. हाचो परिणाम म्हळ्यार मुद्रण करतना Bootstrap ची अतिरिक्त-ल्हान ग्रिड अनपेक्षीतपणान सक्रिय जावंक शकता. कांय तपशीलां खातीर मुद्दो #12078 आनी Chrome बग #273306 पळयात. सुचयल्ले उपाय: १.

• अतिरिक्त-ल्हान ग्रिड आलिंगन दिवचें आनी ताचे खाला तुमचें पान मान्य दिसता हाची खात्री करात.
• @screen-*तुमचो मुद्रक कागद अतिरिक्त-ल्हान परस व्हड मानपाक मेळचो म्हूण कमी चयापचयाचीं मोलां पसंतीचीं करात .
• फकत मुद्रण माध्यमाखातीर ग्रिड आकार ब्रेकपॉइंट बदलपाक सानुकूल माध्यम क्वेरी जोडात.

तशेंच, Safari v8.0 च्या प्रमाणें, स्थिर-रुंदायेच्या .containers कडेन Safari मुद्रण करतना असामान्य ल्हान फॉन्ट आकार वापरपाक कारण जावंक शकता. चड तपशीलां खातीर # 14868 आनी WebKit बग #138192 पळयात. हाचेखातीर एक संभाव्य उपाय म्हळ्यार सकयल दिल्लो CSS जोडप:

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

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

बॉक्सांतल्यान भायर, Android 4.1 (आनी कांय नवी प्रकाशनां लेगीत दिसता) ब्राउझर ऍप्लिकेशना वांगडा निवडीचो मुलभूत वेब ब्राउझर म्हणून धाडटात (Chrome च्या विरुद्ध). दुर्दैवान, ब्राउझर ऍप्लिकेशनांत जायते बग आनी सामान्यपणान CSS कडेन विसंगती आसात.

मेनू निवडात

घटकांचेर , जर एक आनी/वा लागू <select>केला जाल्यार Android स्टॉक ब्राउझर बाजू नियंत्रण दाखोवचो ना . ( तपशीलां खातीर हो StackOverflow प्रस्न पळयात.) आक्षेपार्ह CSS काडून उडोवपाक आनी Android स्टॉक ब्राउझराचेर the unstyled घटक म्हणून रेंडर करपाक सकयल दिल्ल्या कोडाचे स्निपेट वापरात. वापरपी एजंट सुंगटां मारप Chrome, Safari, आनी Mozilla ब्राउझरांत हस्तक्षेप टाळटा.border-radiusborder<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 ब्राउझर हॅक वापरता. ह्या हॅकांक लागून CSS प्रमाणकांक ते अवैध आसात अशी कागाळ करप समजून घेवपासारकें आसा. एक दोन सुवातींनी, आमी ब्लीडिंग-एज CSS वैशिश्ट्यांय वापरतात जीं अजून पुरायपणान प्रमाणीत करूंक नात, पूण हीं शुध्दपणान प्रगतीशील वाडोवपा खातीर वापरतात.

आमच्या CSS चो बिगर-हॅकी भाग पुरायपणान प्रमाणीत करता आनी हॅकी भाग बिगर-हॅकी भागाच्या योग्य कार्यांत हस्तक्षेप करिनात देखून ह्या प्रमाणीकरण शिटकावणींक वेव्हारांत कसलोच फरक पडना, देखून आमी मुद्दाम ह्या खाशेल्या शिटकावणीं कडेन दुर्लक्ष कित्याक करतात.

आमच्या HTML डॉक्सांत तशेंच कांय तुच्छ आनी निरर्थक HTML प्रमाणीकरण शिटकावणी आसात कारण आमच्या एका खाशेल्या Firefox बगा खातीर एक वर्कअराउंड आस्पाव केला .

तिसऱ्या पक्षाक आदार दिवप

आमी अधिकृतपणान खंयच्याय तिसऱ्या पक्षाच्या प्लगइन वा ऍड-ऑनाक तेंको दिना तरी, तुमच्या प्रकल्पांत संभाव्य समस्या टाळपाक मदत करपाक आमी कांय उपेगी सल्लो दितात.

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

कांय तिसऱ्या पक्षाच्या सॉफ्टवॅर, Google Maps आनी Google सानुकूल सोद इंजिन सयत, Bootstrap कडेन संघर्श करतात कारण * { box-sizing: border-box; }, एक नेम जो अशें करता तो paddingघटकाच्या निमाण्या गणीत केल्ल्या रुंदायेचेर परिणाम करिना. CSS Tricks हांगा बॉक्स मॉडेल आनी आकार दिवपा विशीं चड जाणून घेयात .

संदर्भाचेर आदारून, तुमी गरज पडल्यार अधिलिखित करूंक शकतात (पर्याय 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();
}

सुलभताय

बूटस्ट्रॅप सामान्य वेब मानकांचें पालन करता आनी-उण्यांत उणो अतिरिक्त यत्न करून-AT वापरपी लोकांक सुलभ अशीं सायटी तयार करपाक वापरूं येता .

नेव्हिगेशन वगडावचें

तुमच्या नेव्हिगेशनांत जायत्यो दुवे आसल्यार आनी DOM त मुखेल सामुग्री पयलीं येता जाल्यार, Skip to main contentनेव्हिगेशनाच्या आदीं दुवो जोडात (साद्या स्पश्टीकरणा खातीर, नेव्हिगेशन दुवे वगडावपाचेर हो A11Y प्रकल्प लेख पळयात ). वर्ग वापरल्यार .sr-onlyवगडावप दुवो दृश्टीन लिपयतलो, आनी .sr-only-focusableवर्ग एकदां केंद्रीत जातकच दुवो दिसतलो हाची खात्री करतलो (दृष्टी आशिल्ल्या कीबोर्ड वापरप्यां खातीर).

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

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

शीर्षकां ( <h1>- <h6>) नेस्ट करतना, तुमचो प्राथमीक दस्तावेज शीर्षक एक आसपाक जाय <h1>. उपरांतच्या शीर्षकांनी तार्कीक वापर करचो <h2>- .<h6> अशे तरेन स्क्रीन रीडर तुमच्या पानांक आशय कोश्टक तयार करूंक शकतात.

HTML CodeSniffer आनी Penn State ची AccessAbility हांगा चड जाणून घेयात .

रंग विपरीतताय

सद्या, बूटस्ट्रॅपांत उपलब्ध आशिल्ले कांय मुलभूत रंग संयोजन (देखीक वेगवेगळे शैलीचे बटण वर्ग, मुळाव्या कोड ब्लॉकांखातीर वापरिल्ले कांय कोड हायलाइट करपी रंग , .bg-primary संदर्भ पार्श्वभूंय मदतगार वर्ग, आनी धव्या पार्श्वभूमीचेर वापरल्यार मुलभूत दुवो रंग) विपरीतताय प्रमाण उणें आसता ( शिफारस केल्ल्या प्रमाणा सकयल ४.५:१ ). हाका लागून उण्या नदर आशिल्ल्या वा रंग कुड्डे आशिल्ल्या वापरप्यांक समस्या निर्माण जावंक शकतात. ह्या मुलभूत रंगांनी तांचे विपरीतताय आनी वाचपाची तांक वाडोवपाखातीर बदल करचे पडूं येतात.

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

• सुलभताय समस्या वळखुपा खातीर "HTML Codesniffer" बुकमार्कलेट
• Chrome चें सुलभताय विकसक साधनां विस्तार
• रंग विपरीत विश्लेशक
• ए11वाय प्रकल्पाचो
• एमडीएन सुलभताय दस्तावेजीकरण

परवान्याचे प्रस्न

बूटस्ट्रॅप एमआयटी परवान्या खाला सोडला आनी ताचो कॉपीराइट 2019 ट्विटर आसा. ल्हान ल्हान कुडक्यांनी उकडून दवरल्यार ताचें वर्णन सकयल दिल्ल्या अटींनी करूं येता.

तातूंत तुमकां अशें करचें पडटा:

• तुमच्या कामांत वापरतना परवानो आनी कॉपीराइट सुचोवणी Bootstrap च्या CSS आनी JavaScript फायलींनी आस्पाव केल्ली दवरात

तातूंत तुमकां परवानगी दिता:

• वैयक्तीक, खाजगी, कंपनी अंतर्गत, वा वेवसायीक उद्देशां खातीर Bootstrap, पुराय वा अंशतः, मुक्तपणान डाउनलोड करात आनी वापरात
• तुमी तयार केल्ल्या पॅकेजींत वा वितरणांत Bootstrap वापरात
• स्त्रोत कोडांत बदल करचो
• परवान्यांत आस्पाव नाशिल्ल्या तिसऱ्या पक्षांक Bootstrap बदलपाक आनी वितरीत करपाक उपपरवानो दिवचो

तातूंत तुमकां बंदी घाल्या:

• बूटस्ट्रॅप हमी नासतना दिल्ल्यान लेखक आनी परवानो मालकांक नुकसान भरपाये खातीर जापसालदार धरात
• Bootstrap च्या निर्मात्यांक वा कॉपीराइट धारकांक जापसालदार धरात
• योग्य एट्रिब्यूशन नासतना बूटस्ट्रॅपाचो खंयचोय तुकडो परतून वितरीत करचो
• Twitter कडेन आशिल्लीं खंयचींय चिन्नां खंयच्याय तरेन वापरात, जीं Twitter तुमच्या वितरणाक मान्यताय दिता अशें सांगूं येता वा सुचयता
• तुमी प्रस्नांतलें Twitter सॉफ्टवॅर तयार केलां अशें सांगपी वा सुचवपी खंयच्याय तरेन Twitter कडेन आशिल्ले खंयचेय चिन्न वापरात

तातूंत तुमकां अशी गरज ना:

• Bootstrap चो स्वताचो स्रोत, वा तुमी तातूंत केल्ल्या खंयच्याय बदलांचो, तुमी एकठांय करूंक शकतात त्या खंयच्याय पुनर्वितरणांत तातूंत आसपावीत करात
• तुमी बूटस्ट्रॅपांत केल्ले बदल परतून बूटस्ट्रॅप प्रकल्पांत सादर करात (जरी असो प्रतिसाद प्रोत्साहन दितात)

चड म्हायती खातीर पुराय बूटस्ट्रॅप परवानो प्रकल्प रिपॉझिटरींत आसा.

अणकार करतात

समुदाय वांगड्यांनी Bootstrap च्या दस्तावेजीकरणाचें वेगवेगळ्या भाशांनी अणकारीत केलां. कोणाक अधिकृतपणान तेंको ना आनी ते सदांच अद्ययावत नासूं येतात.

• बूटस्ट्रॅप 中文文档 (चीनी)
• बूटस्ट्रॅप på डॅन्स्क (डॅनीश)
• बूटस्ट्रॅप एन फ्रांसे (फ्रेंच)
• बूटस्ट्रॅप आफ ड्यूश (जर्मन)
• इटालियन (इटालियन) भाशेंत बूटस्ट्रॅप
• बूटस्ट्रॅप 한국어 (कोरियन)
• बूटस्ट्रॅप एम पोर्तुगेज दो ब्राझील (ब्राझीली पोर्तुगीज)
• बूटस्ट्रॅप по-русски (रशियन)
• बूटस्ट्रॅप एन स्पॅनिश (स्पेनीश)
• Türkçe बूटस्ट्रॅप (तुर्की) 1.5.
• बूटस्ट्रॅप українською (युक्रेनियन)
• बूटस्ट्रॅप bằng tiếng Việt (व्हिएतनामी)

आमी अणकार संघटीत करपाक वा येजमानकी दिवपाक मदत करिनात, आमी फकत तांकां लिंक करतात.

नवो वा ताचे परस बरो अणकार सोंपयला? आमच्या वळेरेंत जोडपाक एक पुल विनंती उगडात.