प्रारम्भ करना
Bootstrap इत्यस्य अवलोकनम्, कथं डाउनलोड् कर्तव्यम्, उपयोगः च कर्तव्यः, मूलभूताः टेम्पलेट्-उदाहरणानि, इत्यादीनि च ।
Bootstrap इत्यस्य अवलोकनम्, कथं डाउनलोड् कर्तव्यम्, उपयोगः च कर्तव्यः, मूलभूताः टेम्पलेट्-उदाहरणानि, इत्यादीनि च ।
बूटस्ट्रैप् (वर्तमानं v3.3.7) इत्यत्र शीघ्रं आरम्भं कर्तुं कतिपयानि सुलभानि उपायानि सन्ति, प्रत्येकं भिन्नं कौशलस्तरं उपयोगप्रकरणं च आकर्षयति । भवतः विशेषापेक्षाणां अनुरूपं किं भवति इति ज्ञातुं पठन्तु।
CSS, JavaScript, फन्ट् च संकलितं लघुकृतं च । न कोऽपि docs अथवा मूलस्रोतसञ्चिकाः समाविष्टाः सन्ति ।
Source Less, JavaScript, तथा font files, अस्माकं docs इत्यनेन सह । Less compiler इत्यस्य आवश्यकता अस्ति तथा च किञ्चित् setup इत्यस्य आवश्यकता अस्ति ।
Rails, Compass, अथवा Sass-only परियोजनासु सुलभसमावेशार्थं Bootstrap Less तः Sass मध्ये पोर्ट् कृतम् ।
jsDelivr इत्यत्र जनाः कृपया Bootstrap इत्यस्य CSS तथा JavaScript कृते CDN समर्थनं प्रदास्यन्ति। केवलं एतानि Bootstrap CDN लिङ्कानि उपयुज्यताम् ।
Bower इत्यस्य उपयोगेन Bootstrap इत्यस्य Less, CSS, JavaScript, फन्ट् च संस्थापयितुं प्रबन्धयितुं च शक्नुवन्ति :
npm इत्यस्य उपयोगेन Bootstrap इत्येतत् अपि संस्थापयितुं शक्नुवन्ति :
require('bootstrap')
Bootstrap इत्यस्य सर्वाणि jQuery प्लगिन्स् jQuery ऑब्जेक्ट् इत्यत्र लोड् करिष्यति । मॉड्यूल स्वयं bootstrap
किमपि निर्यातं न करोति । /js/*.js
संकुलस्य शीर्ष-स्तरीयनिर्देशिकायाः अधः सञ्चिकाः लोड् कृत्वा भवान् Bootstrap इत्यस्य jQuery प्लगिन्स् व्यक्तिगतरूपेण मैन्युअल् रूपेण लोड् कर्तुं शक्नोति ।
Bootstrap's package.json
इत्यत्र निम्नलिखितकुंजीनां अधः केचन अतिरिक्ताः मेटाडाटाः सन्ति ।
less
- Bootstrap इत्यस्य मुख्यस्य Less स्रोतसञ्चिकायाः मार्गःstyle
- Bootstrap इत्यस्य अ-मिनीफाइड् CSS इत्यस्य मार्गः यः पूर्वनिर्धारितसेटिंग्स् इत्यस्य उपयोगेन पूर्वसंकलितः अस्ति (अनुकूलनं नास्ति)Composer इत्यस्य उपयोगेन Bootstrap इत्यस्य Less, CSS, JavaScript, fonts इत्यादीनि अपि संस्थापयितुं प्रबन्धयितुं च शक्नुवन्ति :
Bootstrap CSS विक्रेता उपसर्गैः सह निबद्धुं Autoprefixer इत्यस्य उपयोगं करोति | यदि भवान् Bootstrap इत्यस्य Less/Sass स्रोतः संकलयति अस्माकं Gruntfile इत्यस्य उपयोगं न करोति तर्हि भवान् स्वयमेव स्वस्य निर्माणप्रक्रियायां Autoprefixer इत्यस्य एकीकरणं कर्तुं प्रवृत्तः भविष्यति । यदि भवान् पूर्वसंकलितं Bootstrap इत्यस्य उपयोगं करोति अथवा अस्माकं Gruntfile इत्यस्य उपयोगं करोति तर्हि भवान् एतस्य विषये चिन्तां कर्तुं न प्रयोजनम् यतः Autoprefixer अस्माकं Gruntfile इत्यस्मिन् पूर्वमेव एकीकृतः अस्ति ।
Bootstrap द्वयोः रूपयोः डाउनलोड् कर्तुं शक्यते, यस्य अन्तः भवान् निम्नलिखितनिर्देशिकाः सञ्चिकाश्च प्राप्स्यति, तार्किकरूपेण सामान्यसंसाधनानाम् समूहीकरणं कृत्वा संकलितं लघुकृतं च भिन्नतां प्रदास्यति
कृपया ज्ञातव्यं यत् सर्वेषु जावास्क्रिप्ट् प्लगिन्स् मध्ये jQuery इत्यस्य समावेशस्य आवश्यकता वर्तते , यथा starter template मध्ये दर्शितम् अस्ति । jQuery इत्यस्य के के संस्करणाः समर्थिताः सन्ति इति द्रष्टुं अस्माकं परामर्शं कुर्वन्तु ।bower.json
एकवारं डाउनलोड् कृत्वा, (संकलितं) Bootstrap इत्यस्य संरचनां द्रष्टुं संपीडितं पुटं अनजिप् कुर्वन्तु । भवन्तः एतादृशं किमपि पश्यन्ति-
इदं Bootstrap इत्यस्य मूलभूततमं रूपम् अस्ति: प्रायः कस्मिन् अपि जालप्रकल्पे त्वरित-ड्रॉप्-इन्-उपयोगाय पूर्वसंकलिताः सञ्चिकाः । वयं संकलितं CSS तथा JS ( bootstrap.*
), तथैव संकलितं लघुकृतं च CSS तथा JS ( bootstrap.min.*
) प्रदामः । CSS स्रोतनक्शाः ( bootstrap.*.map
) कतिपयैः ब्राउजर्-विकासक-उपकरणैः सह उपयोगाय उपलभ्यन्ते । Glyphicons इत्यस्मात् फॉन्ट्स् समाविष्टाः सन्ति, यथा वैकल्पिकं Bootstrap विषयः अपि ।
Bootstrap स्रोतसङ्केत-अवलोकने पूर्व-संकलित-CSS, JavaScript, font-सम्पत्तयः च, स्रोत Less, JavaScript, दस्तावेजीकरणं च समाविष्टाः सन्ति । विशेषतः अस्मिन् निम्नलिखितम् अधिकानि च समाविष्टानि सन्ति ।
, less/
, js/
तथा fonts/
अस्माकं CSS, JS, तथा च चिह्न-फॉन्ट् (क्रमशः) कृते स्रोत-सङ्केतः सन्ति । उपरि dist/
पूर्वसंकलित-अवलोकन-विभागे सूचीकृतं सर्वं पुटे अन्तर्भवति । फोल्डर् मध्ये अस्माकं दस्तावेजीकरणस्य, तथा च Bootstrap उपयोगस्य docs/
स्रोतसङ्केतः अन्तर्भवति । examples/
ततः परं अन्यः कोऽपि समाविष्टः सञ्चिका संकुलानाम्, अनुज्ञापत्रसूचनाः, विकासस्य च समर्थनं प्रदाति ।
बूटस्ट्रैप् स्वस्य निर्माणप्रणाल्याः कृते Grunt इत्यस्य उपयोगं करोति , यत्र फ्रेमवर्क् इत्यनेन सह कार्यं कर्तुं सुविधाजनकाः पद्धतयः सन्ति । इदं कथं वयं अस्माकं कोडं संकलयामः, परीक्षणं चालयामः, इत्यादीनि च।
Grunt संस्थापनार्थं प्रथमं node.js (यस्मिन् npm अन्तर्भवति) डाउनलोड् कृत्वा संस्थापनीयम् । npm इति node packaged modules इत्यस्य अर्थः अस्ति तथा च node.js इत्यस्य माध्यमेन विकासनिर्भरतां प्रबन्धयितुं एकः उपायः अस्ति ।
ततः आदेशपङ्क्तौ : १.grunt-cli
सह वैश्विकरूपेण संस्थापयन्तु npm install -g grunt-cli
./bootstrap/
, ततः चालयन्तु npm install
। npm सञ्चिकां दृष्ट्वा package.json
तत्र सूचीकृतानि आवश्यकानि स्थानीयनिर्भरतानि स्वयमेव संस्थापयिष्यति ।समाप्ते सति, भवान् आदेशपङ्क्तौ प्रदत्तान् विविधान् Grunt आदेशान् चालयितुं शक्नोति ।
grunt dist
(केवल CSS तथा JavaScript संकलित करें)/dist/
संकलितैः लघुकृतैः च CSS तथा JavaScript सञ्चिकाभिः सह निर्देशिकां पुनः जनयति । एकः Bootstrap उपयोक्तृत्वेन, सामान्यतया एषः आदेशः यः भवान् इच्छति ।
grunt watch
(घटी)Less स्रोतसञ्चिकाः पश्यति तथा च स्वयमेव तान् CSS मध्ये पुनः संकलयति यदा कदापि भवान् परिवर्तनं रक्षति ।
grunt test
(परीक्षां चालयन्तु) .JSHint चालयति तथा च PhantomJS मध्ये QUnit परीक्षणं हेडलेस् चालयति ।
grunt docs
(docs assets इत्यस्य निर्माणं परीक्षणं च कुर्वन्तु)CSS, JavaScript, अन्ये च सम्पत्तिः निर्माति परीक्षते च ये , मार्गेण स्थानीयरूपेण दस्तावेजीकरणं चालयति समये उपयुज्यन्ते bundle exec jekyll serve
।
grunt
(सर्वथा सर्वं निर्माय परीक्षणं चालयन्तु)CSS तथा JavaScript संकलितं लघुकरणं च करोति, दस्तावेजीकरणजालस्थलस्य निर्माणं करोति, docs विरुद्धं HTML5 validator चालयति, Customizer सम्पत्तिं पुनः जनयति, इत्यादीनि च जेकिल् आवश्यकम् . सामान्यतः केवलं आवश्यकं यदि भवान् Bootstrap इत्यत्र एव हैकिंग् करोति।
यदि भवान् निर्भरतां संस्थापनं वा Grunt आदेशान् चालयितुं वा समस्यां प्राप्नुयात् तर्हि प्रथमं /node_modules/
npm द्वारा उत्पन्नं निर्देशिकां विलोपयतु । ततः, पुनः चालयन्तु npm install
.
एतेन मूलभूत HTML टेम्पलेट् इत्यनेन आरभ्यताम्, अथवा एतानि उदाहरणानि परिवर्तयन्तु . वयम् आशास्महे यत् भवान् अस्माकं टेम्पलेट् उदाहरणानि च अनुकूलितं करिष्यति, तान् स्वस्य आवश्यकतानुसारं अनुकूलयिष्यति।
न्यूनतमेन Bootstrap दस्तावेजेन सह कार्यं आरभ्यतुं अधोलिखितं HTML प्रतिलिख्यताम् ।
Bootstrap इत्यस्य अनेकघटकैः सह उपरि मूलभूतसारूप्यस्य उपरि निर्माणं कुर्वन्तु । वयं भवन्तं प्रोत्साहयामः यत् भवतः व्यक्तिगतपरियोजनायाः आवश्यकतानुसारं Bootstrap इत्यस्य अनुकूलनं अनुकूलनं च कुर्वन्तु।
Bootstrap भण्डारं डाउनलोड् कृत्वा अधोलिखितस्य प्रत्येकस्य उदाहरणस्य स्रोतसङ्केतं प्राप्नुवन्तु | docs/examples/
उदाहरणानि निर्देशिकायां द्रष्टुं शक्यन्ते ।
अस्माकं docs प्रति Bootstrap इत्यस्य प्रतिक्रियाशीलतां सहजतया अक्षमं कुर्वन्तु .
Bootlint इति आधिकारिकं Bootstrap HTML linter tool अस्ति । इदं स्वयमेव जालपुटेषु अनेकाः सामान्याः HTML त्रुटयः परीक्षते ये Bootstrap इत्यस्य उपयोगं तुल्यरूपेण "वैनिला" प्रकारेण कुर्वन्ति । Vanilla Bootstrap इत्यस्य घटकानां/विजेट्-सम्बद्धानां DOM इत्यस्य तेषां भागानां कतिपयानां संरचनानां अनुरूपता आवश्यकी भवति । Bootlint परीक्षते यत् Bootstrap घटकानां उदाहरणेषु सम्यक्-संरचितं HTML अस्ति वा । भवतः Bootstrap जालविकाससाधनशृङ्खलायां Bootlint योजयितुं विचारयन्तु येन सामान्यदोषेषु कश्चन अपि भवतः परियोजनायाः विकासं मन्दं न करोति।
Bootstrap इत्यस्य विकासस्य विषये अद्यतनं भवन्तु तथा च एतैः सहायकसंसाधनैः समुदायं प्रति गच्छन्तु।
irc.freenode.net
सर्वरे IRC इत्यस्य उपयोगेन सहकारिभिः Bootstrappers इत्यनेन सह गपशपं कुर्वन्तु, ##bootstrap चैनल् मध्ये ।twitter-bootstrap-3
इत्यत्र पृच्छन्तु ।bootstrap
अथवा तत्सदृश-वितरण-तन्त्राणां माध्यमेन वितरणं कुर्वन् Bootstrap इत्यस्य कार्यक्षमतां परिवर्तयन्ति वा योजयन्ति वा इति संकुलेषु कीवर्डस्य उपयोगं कुर्वन्तुनवीनतमं गपशपं भयानकं संगीतविडियो च द्रष्टुं भवान् ट्विट्टरे @getbootstrap इत्यस्य अनुसरणं अपि कर्तुं शक्नोति ।
Bootstrap स्वयमेव भवतः पृष्ठानि विविधपर्दे आकाराणां कृते अनुकूलयति । अत्र एतत् विशेषतां कथं निष्क्रियं कर्तव्यं येन भवतः पृष्ठम् एतत् अप्रतिसादात्मकं उदाहरणं इव कार्यं करोति .
<meta>
मध्ये उल्लिखितं viewport परित्यजन्तुwidth
on the .container
अधिलिखतु, उदाहरणार्थं width: 970px !important;
सुनिश्चितं कुर्वन्तु यत् एतत् पूर्वनिर्धारित Bootstrap CSS इत्यस्य अनन्तरं आगच्छति । भवान् वैकल्पिकरूपेण !important
with media queries अथवा किञ्चित् selector-fu परिहर्तुं शक्नोति ।.col-xs-*
जालविन्यासानां कृते मध्यम/बृहत्तानां अतिरिक्तं, अथवा स्थाने वर्गाणां उपयोगं कुर्वन्तु । चिन्ता न कुर्वन्तु, अतिरिक्त-लघु-यन्त्रजालं सर्वेषु संकल्पेषु स्केल करोति ।भवद्भ्यः अद्यापि IE8 कृते Respond.js इत्यस्य आवश्यकता भविष्यति (यतोहि अस्माकं मीडिया-प्रश्नानि अद्यापि सन्ति, तेषां संसाधनं करणीयम् अस्ति) । एतेन Bootstrap इत्यस्य "mobile site" इति पक्षाः निष्क्रियाः भवन्ति ।
वयं एतानि पदानि एकस्मिन् उदाहरणे प्रयुक्तवन्तः। विशिष्टपरिवर्तनानि कार्यान्विताः द्रष्टुं तस्य स्रोतसङ्केतं पठन्तु ।
Bootstrap इत्यस्य प्राचीनसंस्करणात् v3.x प्रति प्रवासं कर्तुं पश्यन् वा? अस्माकं प्रवासमार्गदर्शिकां पश्यन्तु .
बूटस्ट्रैप् नवीनतम-डेस्कटॉप्-मोबाइल-ब्राउजर्-मध्ये सर्वोत्तम-कार्यं कर्तुं निर्मितम् अस्ति, अर्थात् प्राचीन-ब्राउजर्-इत्येतत् कतिपयानां घटकानां भिन्न-शैली-युक्तानि, यद्यपि पूर्णतया कार्यात्मकानि, प्रतिपादनानि प्रदर्शयितुं शक्नुवन्ति
विशेषतः वयं निम्नलिखित-ब्राउजर्-मञ्चानां नवीनतम-संस्करणानाम् समर्थनं कुर्मः ।
वैकल्पिक ब्राउजर् ये WebKit, Blink, अथवा Gecko इत्यस्य नवीनतमं संस्करणं उपयुञ्जते, ते प्रत्यक्षतया वा मञ्चस्य web view API मार्गेण वा, ते स्पष्टतया समर्थिताः न सन्ति। तथापि, Bootstrap (अधिकांशप्रसङ्गेषु) एतेषु ब्राउजर्-मध्ये अपि सम्यक् प्रदर्शयितव्यं कार्यं च कर्तव्यम् । अधिकविशिष्टसमर्थनसूचना अधः प्रदत्ता अस्ति।
सामान्यतया, Bootstrap प्रत्येकस्य प्रमुखमञ्चस्य पूर्वनिर्धारितब्राउजरस्य नवीनतमसंस्करणं समर्थयति । ध्यानं कुर्वन्तु यत् प्रॉक्सी ब्राउजर् (यथा Opera Mini, Opera Mobile इत्यस्य Turbo मोड, UC Browser Mini, Amazon Silk) समर्थिताः न सन्ति ।
क्रोम इति | फायरफॉक्स इति | सफारी | |
---|---|---|---|
एण्ड्रॉयड् इति | समर्थित | समर्थित | न/अ |
iOS इति | समर्थित | समर्थित | समर्थित |
तथैव अधिकांशस्य डेस्कटॉप् ब्राउजर् इत्यस्य नवीनतमसंस्करणं समर्थितम् अस्ति ।
क्रोम इति | फायरफॉक्स इति | अन्तर्जाल एक्स्प्लोरर | ओपेरा | सफारी | |
---|---|---|---|---|---|
मैक | समर्थित | समर्थित | न/अ | समर्थित | समर्थित |
विण्डोजः | समर्थित | समर्थित | समर्थित | समर्थित | न समर्थितम् |
विण्डोज इत्यत्र वयं Internet Explorer 8-11 इत्यस्य समर्थनं कुर्मः ।
Firefox कृते, नवीनतमस्य सामान्यस्थिरविमोचनस्य अतिरिक्तं, वयं Firefox इत्यस्य नवीनतमस्य विस्तारितसमर्थनविमोचनस्य (ESR) संस्करणस्य अपि समर्थनं कुर्मः ।
अनधिकृतरूपेण, Bootstrap इत्येतत् Chromium तथा Chrome for Linux, Firefox for Linux, Internet Explorer 7 इत्येतयोः कृते पर्याप्तं सुन्दरं दृश्यते, व्यवहारं च कर्तव्यम्, तथा च Microsoft Edge इत्यत्र, यद्यपि ते आधिकारिकतया समर्थिताः न सन्ति
Bootstrap इत्यस्य केषाञ्चन ब्राउजर्-दोषाणां सूचीयाः कृते अस्माकं Wall of browser bugs पश्यन्तु ।
Internet Explorer 8 तथा 9 अपि समर्थिताः सन्ति तथापि कृपया अवगच्छन्तु यत् केचन CSS3 गुणाः HTML5 तत्त्वानि च एतैः ब्राउजर्-द्वारा पूर्णतया समर्थिताः न सन्ति तदतिरिक्तं, Internet Explorer 8 इत्यत्र media query support सक्षमीकरणाय Respond.js इत्यस्य उपयोगः आवश्यकः अस्ति ।
गुणः | अन्तर्जाल एक्स्प्लोरर 8 | अन्तर्जाल एक्स्प्लोरर 9 |
---|---|---|
border-radius |
न समर्थितम् | समर्थित |
box-shadow |
न समर्थितम् | समर्थित |
transform |
न समर्थितम् | समर्थितम्, -ms उपसर्गसहितम् |
transition |
न समर्थितम् | |
placeholder |
न समर्थितम् |
CSS3 तथा HTML5 विशेषतानां ब्राउजर् समर्थनविषये विवरणार्थं Can I use... इति पश्यन्तु ।
Internet Explorer 8 कृते स्वस्य विकासे उत्पादनपर्यावरणेषु Respond.js इत्यस्य उपयोगं कुर्वन् निम्नलिखितसावधानीभ्यः सावधानाः भवन्तु ।
भिन्न (उप)डोमेन् (उदाहरणार्थं, CDN इत्यत्र) होस्ट् कृतं CSS इत्यनेन सह Respond.js इत्यस्य उपयोगाय किञ्चित् अतिरिक्तं सेटअप आवश्यकम् अस्ति । विस्तरेण ज्ञातुं Respond.js docs पश्यन्तु ।
file://
ब्राउजर् सुरक्षानियमानां कारणात्, Respond.js file://
प्रोटोकॉलद्वारा दृष्टैः पृष्ठैः सह कार्यं न करोति (यथा स्थानीय HTML सञ्चिकां उद्घाटयति समये) । IE8 इत्यस्मिन् प्रतिक्रियाशीलविशेषतानां परीक्षणार्थं HTTP(S) इत्यनेन स्वपृष्ठानि पश्यन्तु । विस्तरेण ज्ञातुं Respond.js docs पश्यन्तु ।
@import
Respond.js इत्यनेन सह सन्दर्भितं CSS इत्यनेन सह कार्यं न करोति यत् @import
. विशेषतः, केचन Drupal विन्यासाः उपयुज्यन्ते इति ज्ञायते @import
। विस्तरेण ज्ञातुं Respond.js docs पश्यन्तु ।
IE8 , , , अथवा box-sizing: border-box;
इत्यनेन सह संयुक्ते सति पूर्णतया समर्थनं न करोति । तदर्थं v3.0.1 तः वयं s इत्यत्र न पुनः उपयुञ्ज्महे ।min-width
max-width
min-height
max-height
max-width
.container
IE8 इत्यस्य केचन समस्याः सन्ति @font-face
यदा :before
. Bootstrap इत्येतत् संयोजनं स्वस्य Glyphicons इत्यनेन सह उपयुज्यते । यदि पृष्ठं संग्रहीतं भवति, तथा च विण्डो उपरि मूषकं विना लोड् भवति (अर्थात् refresh बटनं नुदन्तु अथवा iframe मध्ये किमपि लोड् कुर्वन्तु) तर्हि पृष्ठं font लोड् करणात् पूर्वं रेण्डर् भवति पृष्ठस्य (शरीरस्य) उपरि भ्रमन् केचन चिह्नानि दर्शयिष्यन्ति तथा च शेषचिह्नानां उपरि भ्रमन् तानि अपि दर्शयिष्यन्ति । विस्तरेण ज्ञातुं अंक #13863 पश्यन्तु।
पुरातन Internet Explorer संगतताविधाने बूटस्ट्रैप् समर्थितं नास्ति । IE कृते नवीनतमं प्रतिपादनविधिः उपयुज्यते इति सुनिश्चित्य, <meta>
स्वपृष्ठेषु समुचितं टैग् समावेशयितुं विचारयन्तु:
त्रुटिनिवारणसाधनं उद्घाट्य दस्तावेजविधिं पुष्टयन्तु: F12"दस्तावेजविधिः" नुत्वा पश्यन्तु ।
Internet Explorer इत्यस्य प्रत्येकस्मिन् समर्थितसंस्करणे सम्भवतः उत्तमं प्रतिपादनं सुनिश्चित्य Bootstrap इत्यस्य सर्वेषु दस्तावेजेषु उदाहरणेषु च एतत् टैग् समाविष्टम् अस्ति ।
अधिकसूचनार्थं एतत् StackOverflow प्रश्नं पश्यन्तु ।
Internet Explorer 10 यन्त्रविस्तारं viewport width इत्यस्मात् भिन्नं न करोति , तथा च Bootstrap इत्यस्य CSS मध्ये मीडियाप्रश्नानि सम्यक् न प्रयोजयति । सामान्यतया भवान् केवलं एतत् समाधातुं CSS इत्यस्य द्रुतं स्निपेट् योजयिष्यति स्म:
तथापि, एतत् Update 3 (उर्फ GDR3) इत्यस्मात् प्राचीनतरं Windows Phone 8 संस्करणं चालितानां उपकरणानां कृते कार्यं न करोति , यतः एतादृशानां उपकरणानां कारणेन संकीर्ण "फोन" दृश्यस्य स्थाने अधिकतया डेस्कटॉप् दृश्यं दर्शयति एतत् सम्बोधयितुं, भवद्भिः निम्नलिखितम् CSS तथा JavaScript समाविष्टं कर्तव्यं भविष्यति bug इत्यस्य परितः कार्यं कर्तुं ।
अधिकसूचनार्थं उपयोगमार्गदर्शिकानां च कृते Windows Phone 8 तथा Device-Width पठन्तु ।
एकः heads up इति रूपेण, वयं Bootstrap इत्यस्य सर्वेषु दस्तावेजेषु उदाहरणेषु च एतत् प्रदर्शनरूपेण समावेशयामः ।
.col-*-1
OS X कृते v7.1 तथा iOS v8.0 कृते सफारी इत्यस्मात् पूर्वं सफारी इत्यस्य संस्करणानाम् रेण्डरिंग् इञ्जिन् अस्माकं ग्रिड् वर्गेषु प्रयुक्तानां दशमलवस्थानानां संख्यायां किञ्चित् समस्या आसीत् अतः यदि भवतां समीपे १२ व्यक्तिगतजालस्तम्भाः आसन् तर्हि भवान् अवलोकयिष्यति यत् ते स्तम्भानां अन्यपङ्क्तयः अपेक्षया लघुः आगताः । Safari/iOS उन्नयनस्य अतिरिक्तं, भवतः समीपे कार्यपरिहारार्थं केचन विकल्पाः सन्ति:
.pull-right
कठिन-दक्षिण-संरेखणं प्राप्तुं स्वस्य अन्तिम-जाल-स्तम्भे योजयन्तुoverflow: hidden
on the element इत्यस्य समर्थनं <body>
iOS तथा Android इत्यत्र अत्यन्तं सीमितम् अस्ति । तदर्थं यदा भवान् तेषु द्वयोः अपि यन्त्रयोः ब्राउजर् मध्ये मोडल् इत्यस्य उपरि अधः वा स्क्रॉलं करोति तदा <body>
सामग्री स्क्रॉल कर्तुं आरभेत । Chrome दोष #175502 ( Chrome v40 मध्ये निवारितम्) तथा WebKit दोष #153852 पश्यन्तु ।
<input>
iOS 9.3 इत्यस्मात् आरभ्य, यदा कश्चन मोडल् उद्घाटितः भवति, यदि स्क्रॉल-इशारस्य आरम्भिकः स्पर्शः पाठ्यस्य अथवा a -इत्यस्य सीमायाः अन्तः अस्ति <textarea>
, तर्हि <body>
मोडालस्य अधः विद्यमाना सामग्री मोडलस्य एव स्थाने स्क्रॉल-कृता भविष्यति वेबकिट दोष #153856 देखें ।
अपि च, ध्यानं कुर्वन्तु यत् यदि भवान् नियतनवबारस्य उपयोगं करोति अथवा मोडालस्य अन्तः निवेशानां उपयोगं करोति तर्हि iOS इत्यत्र एकः रेण्डरिंग्-दोषः अस्ति यः वर्चुअल् कीबोर्ड्-प्रवर्तनस्य समये नियत-तत्त्वानां स्थितिं अद्यतनं न करोति अस्य कृते कतिचन कार्यपरिहाराः अन्तर्भवन्ति यत् भवतः तत्त्वानि परिवर्तयितुं position: absolute
वा फोकस-उपरि समयनिर्धारकं आह्वानं कृत्वा स्थितिं मैन्युअल् रूपेण सम्यक् कर्तुं प्रयत्नः भवति । इदं Bootstrap द्वारा न सम्पादितं भवति, अतः भवतः अनुप्रयोगाय कः समाधानः उत्तमः इति निर्णयः भवतः निर्णयः अस्ति ।
.dropdown-backdrop
z-indexing इत्यस्य जटिलतायाः कारणात् nav मध्ये iOS इत्यत्र तत्त्वं न उपयुज्यते । एवं, navbars मध्ये dropdowns बन्दं कर्तुं, भवद्भिः प्रत्यक्षतया dropdown element (अथवा अन्यः कोऽपि element यः iOS मध्ये click event प्रज्वालयति ) क्लिक् कर्तव्यः ।
पृष्ठजूमिंग् अनिवार्यतया केषुचित् घटकेषु रेण्डरिंग् आर्टिफैक्ट् प्रस्तुतं करोति, Bootstrap इत्यत्र अपि च शेषजालस्य मध्ये । मुद्देः आधारेण वयं तत् समाधातुं शक्नुमः (प्रथमं अन्वेषणं कुर्वन्तु ततः आवश्यकतानुसारं मुद्दाम् उद्घाटयन्तु)। तथापि, वयं एतान् उपेक्षितुं प्रवृत्ताः स्मः यतः तेषु प्रायः हैकी-कार्यपरिहारात् परं प्रत्यक्षं समाधानं नास्ति ।
:hover
/ :focus
मोबाइल परयद्यपि अधिकांशस्पर्शपट्टिकासु वास्तविकं होवरिंग् सम्भवं नास्ति तथापि अधिकांशः मोबाईल ब्राउजर् होवरिंग् समर्थनस्य अनुकरणं कृत्वा :hover
"चिपचिपा" करोति । अन्येषु शब्देषु, :hover
शैल्याः कस्यचित् तत्त्वस्य टैप् करणानन्तरं प्रयोक्तुं आरभन्ते तथा च उपयोक्ता अन्यस्य कस्यचित् तत्त्वस्य टैप् कृत्वा एव प्रयोक्तुं त्यजन्ति । एतेन :hover
एतादृशेषु ब्राउजर्-मध्ये Bootstrap इत्यस्य अवस्थाः अनिष्टतया "अटङ्किताः" भवितुम् अर्हन्ति । केचन मोबाईल-ब्राउजर् अपि :focus
तथैव चिपचिपा भवन्ति । एतादृशीनां शैलीनां पूर्णतया निष्कासनात् परं एतेषां विषयाणां कृते सम्प्रति कोऽपि सरलः कार्यपरिहारः नास्ति ।
केषुचित् आधुनिकब्राउजर्-मध्ये अपि मुद्रणं विचित्रं भवितुम् अर्हति ।
विशेषतः, Chrome v32 इत्यस्य रूपेण तथा च मार्जिनसेटिंग्स् इत्यस्य परवाहं विना, Chrome जालपुटस्य मुद्रणकाले मीडियाप्रश्नानां समाधानं कुर्वन् भौतिककागदस्य आकारात् महत्त्वपूर्णतया संकीर्णं दृश्यपोर्ट् विस्तारस्य उपयोगं करोति एतेन मुद्रणकाले Bootstrap इत्यस्य अतिरिक्त-लघु-जालस्य अप्रत्याशितरूपेण सक्रियता भवितुं शक्नोति । किञ्चित् विवरणार्थं मुद्दा #12078 तथा Chrome बग् #273306 पश्यन्तु। सुझाए गए उपाय : १.
@screen-*
येन भवतः मुद्रकपत्रं अतिरिक्त-लघु-अपेक्षया बृहत्तरं मन्यते ।अपि च, Safari v8.0 इत्यस्य रूपेण, fixed-width .container
s इत्यनेन मुद्रणकाले Safari इत्यस्य असामान्यरूपेण लघु font आकारस्य उपयोगः भवितुं शक्नोति । अधिकविवरणार्थं #14868 तथा WebKit bug #138192 पश्यन्तु । अस्य कृते एकं सम्भाव्यं कार्यपरिहारं निम्नलिखितम् CSS योजयितुं भवति ।
पेटीतः बहिः, Android 4.1 (तथा अपि केचन नवीनाः विमोचनाः प्रत्यक्षतया) Browser app इत्यनेन सह पसन्दस्य पूर्वनिर्धारितजालब्राउजररूपेण (Chrome इत्यस्य विरुद्धम्) निर्यातयन्ति दुर्भाग्येन Browser app इत्यस्मिन् सामान्यतया CSS इत्यनेन सह बहुधा दोषाः असङ्गतिः च अस्ति ।
तत्वेषु <select>
, Android स्टॉक ब्राउज़रः पार्श्वनियन्त्रणानि न प्रदर्शयिष्यति यदि एकः अस्ति border-radius
तथा/वा border
प्रयुक्तः अस्ति। (विवरणार्थं एतत् StackOverflow प्रश्नं पश्यन्तु।) आपत्तिजनकं CSS निष्कासयितुं अधोलिखितस्य कोडस्य स्निपेटस्य उपयोगं कुर्वन्तु तथा <select>
च Android स्टॉक ब्राउजरे the as an unstyled element render. उपयोक्तृ-एजेण्ट-स्निफिंग्-करणेन Chrome, Safari, Mozilla ब्राउजर्-मध्ये हस्तक्षेपः परिहरति ।
उदाहरणं द्रष्टुम् इच्छति वा ? एतत् JS Bin डेमो पश्यन्तु।
पुरातनं तथा दोषपूर्णं ब्राउजर् मध्ये उत्तमं सम्भवं अनुभवं प्रदातुं Bootstrap ब्राउजर् मध्ये एव दोषाणां परितः कार्यं कर्तुं कतिपयेषु ब्राउजर् संस्करणेषु विशेष CSS लक्ष्यं कर्तुं अनेकस्थानेषु CSS ब्राउज़र हैक्स् इत्यस्य उपयोगं करोति एते हैक्स् अवगम्यते यत् CSS प्रमाणकर्तृभ्यः ते अमान्यम् इति शिकायतुं प्रवृत्ताः भवन्ति। दम्पती स्थानेषु वयं रक्तस्राव-धार-CSS-विशेषतानां अपि उपयोगं कुर्मः ये अद्यापि पूर्णतया मानकीकृताः न सन्ति, परन्तु एतानि केवलं प्रगतिशील-वर्धनार्थं उपयुज्यन्ते ।
एतानि प्रमाणीकरणचेतावनी व्यवहारे महत्त्वं न ददति यतः अस्माकं CSS इत्यस्य गैर-हैकी भागः पूर्णतया प्रमाणीकरणं करोति तथा च हैकी भागाः गैर-हैकी भागस्य सम्यक् कार्ये बाधां न जनयन्ति, अतः वयं एतानि विशेषाणि चेतावनीनि किमर्थं जानी-बुझकर अवहेलयामः।
अस्माकं HTML दस्तावेजेषु अपि तथैव कतिपयस्य Firefox दोषस्य कृते अस्माकं कार्यपरिहारस्य समावेशस्य कारणेन केचन तुच्छाः अपरिणामिकाः च HTML प्रमाणीकरणचेतावनीः सन्ति |.
यद्यपि वयं आधिकारिकतया कस्यापि तृतीयपक्षस्य प्लगिन्स् अथवा ऐड-ऑन्स् इत्यस्य समर्थनं न कुर्मः तथापि भवतः परियोजनासु सम्भाव्यसमस्यानां परिहाराय सहायतार्थं किञ्चित् उपयोगी सल्लाहं प्रदामः।
Google Maps तथा Google Custom Search Engine सहितं केचन तृतीयपक्षस्य सॉफ्टवेयरं Bootstrap इत्यनेन सह विग्रहं कुर्वन्ति due to * { box-sizing: border-box; }
, एकः नियमः यः एतत् करोति सः padding
कस्यचित् तत्त्वस्य अन्तिमगणितविस्तारं न प्रभावितं करोति CSS Tricks इत्यत्र बॉक्स मॉडल् तथा साइजिंग् विषये अधिकं ज्ञातुं शक्नुवन्ति .
सन्दर्भानुसारं, भवान् यथा-आवश्यकं (विकल्पः १) अधिलिखितुं शक्नोति अथवा सम्पूर्णप्रदेशानां कृते पेटी-आकारं पुनः सेट् कर्तुं शक्नोति (विकल्पः २) ।
Bootstrap सामान्यजालमानकानां अनुसरणं करोति तथा च—न्यूनतमं अतिरिक्तप्रयत्नेन— AT इत्यस्य उपयोगं कुर्वतां कृते सुलभानि साइट्-स्थानानि निर्मातुं उपयोक्तुं शक्यते ।
यदि भवतां नेविगेशन इत्यत्र बहवः लिङ्काः सन्ति तथा च DOM मध्ये मुख्यसामग्रीतः पूर्वं आगच्छति तर्हि नेविगेशनात् Skip to main content
पूर्वं लिङ्क् योजयन्तु (सरलव्याख्यानार्थं, skip navigation links इत्यस्य विषये एतत् A11Y Project लेखं पश्यन्तु ) वर्गस्य उपयोगेन .sr-only
skip लिङ्क् दृग्गतरूपेण गोपनीयं भविष्यति, तथा च .sr-only-focusable
वर्गः सुनिश्चितं करिष्यति यत् एकवारं केन्द्रीकृते लिङ्कः दृश्यमानः भवति (दृष्टियुक्तानां कीबोर्ड-उपयोक्तृणां कृते) ।
Chrome इत्यस्मिन् दीर्घकालीनदोषाणां/दोषाणां कारणात् ( Chromium bug tracker इत्यस्मिन् मुद्दा 262171 पश्यन्तु ) तथा च Internet Explorer ( पृष्ठे अन्तः लिङ्क् तथा फोकस क्रमेण एतत् लेखं पश्यन्तु ), भवन्तः सुनिश्चितं कर्तुं प्रवृत्ताः भविष्यन्ति यत् भवतः skip link इत्यस्य लक्ष्यम् अस्ति योजयित्वा न्यूनातिन्यूनं प्रोग्रामेटिकरूपेण केन्द्रीकरणीयः अस्ति tabindex="-1"
.
तदतिरिक्तं, भवान् लक्ष्ये दृश्यमानं फोकस-सूचकं स्पष्टतया दमनं कर्तुम् इच्छति (विशेषतः यतः Chrome सम्प्रति अपि तत्त्वेषु ध्यानं सेट् करोति tabindex="-1"
यदा ते मूषकेन क्लिक् भवन्ति) #content:focus { outline: none; }
सह
ध्यानं कुर्वन्तु यत् एषः दोषः अन्येषां पृष्ठान्तर्गतलिङ्कानां अपि प्रभावं करिष्यति यत् भवतः साइट् उपयुज्यते, येन कीबोर्ड-उपयोक्तृणां कृते ते व्यर्थाः भविष्यन्ति । अन्येषु सर्वेषु नामितेषु लंगरेषु / खण्डपरिचयेषु समानं stop-gap fix योजयितुं विचारयितुं शक्नुवन्ति ये लिङ्कलक्ष्यरूपेण कार्यं कुर्वन्ति ।
शीर्षकाणि ( <h1>
- <h6>
) नेस्ट् करणसमये भवतः प्राथमिकदस्तावेजशीर्षकं <h1>
. तदनन्तरं शीर्षकेषु तार्किकरूपेण उपयोगः करणीयः <h2>
- <h6>
यथा स्क्रीनरीडर् भवतः पृष्ठानां कृते सामग्रीसारणीं निर्मातुम् अर्हति ।
HTML CodeSniffer तथा Penn State इत्यस्य AccessAbility इत्यत्र अधिकं ज्ञातुं शक्नुवन्ति ।
सम्प्रति, Bootstrap मध्ये उपलभ्यमानाः केचन पूर्वनिर्धारितवर्णसंयोजनाः (यथा विविधशैलीयुक्ताः बटनवर्गाः , मूलभूतसङ्केतखण्डानां कृते प्रयुक्ताः केचन कोडप्रकाशनवर्णाः , .bg-primary
सन्दर्भपृष्ठभूमिसहायकवर्गः , तथा च श्वेतपृष्ठभूमिषु प्रयुक्ते पूर्वनिर्धारितलिङ्कवर्णः) न्यूनविपरीततानुपातः भवति ( ४.५:१ अनुशंसितअनुपातात् अधः ) । एतेन न्यूनदृष्टियुक्तानां वा वर्णान्धानां वा उपयोक्तृणां समस्या भवितुम् अर्हति । एतेषां पूर्वनिर्धारितवर्णानां विपरीततां पठनीयतां च वर्धयितुं परिवर्तनस्य आवश्यकता भवेत् ।
बूटस्ट्रैप् MIT अनुज्ञापत्रस्य अन्तर्गतं विमोचितम् अस्ति तथा च प्रतिलिपिधर्मः 2016 Twitter अस्ति। लघुखण्डेषु क्वाथं कृत्वा निम्नलिखितशर्तैः वर्णयितुं शक्यते ।
अधिकसूचनार्थं पूर्णं Bootstrap अनुज्ञापत्रं परियोजनाभण्डारे स्थितम् अस्ति ।
समुदायस्य सदस्यैः Bootstrap इत्यस्य दस्तावेजीकरणं विविधभाषासु अनुवादितम् अस्ति । कोऽपि आधिकारिकतया समर्थितः नास्ति तथा च ते सर्वदा अद्यतनं न भवेयुः।
वयं अनुवादानाम् आयोजने वा आतिथ्यं कर्तुं वा साहाय्यं न कुर्मः, केवलं तेषां लिङ्क् कुर्मः।
नूतनः अथवा उत्तमः अनुवादः समाप्तः? अस्माकं सूचीयां योजयितुं पुल अनुरोधं उद्घाटयन्तु।