ब्राउजर् तथा उपकरण
आधुनिकतः पुरातनपर्यन्तं ब्राउजर्-यन्त्राणां विषये ज्ञातव्यम्, ये Bootstrap द्वारा समर्थिताः सन्ति, यत्र प्रत्येकस्य कृते ज्ञाताः विचित्रताः, दोषाः च सन्ति ।
समर्थित ब्राउज़र
बूटस्ट्रैप् सर्वेषां प्रमुखब्राउजर्-मञ्चानां नवीनतमं, स्थिरं विमोचनं समर्थयति । विण्डोज इत्यत्र वयं Internet Explorer 10-11 / Microsoft Edge इत्यस्य समर्थनं कुर्मः ।
वैकल्पिक ब्राउजर् ये WebKit, Blink, अथवा Gecko इत्यस्य नवीनतमं संस्करणं उपयुञ्जते, ते प्रत्यक्षतया वा मञ्चस्य web view API मार्गेण वा, ते स्पष्टतया समर्थिताः न सन्ति। तथापि, Bootstrap (अधिकांशप्रसङ्गेषु) एतेषु ब्राउजर्-मध्ये अपि सम्यक् प्रदर्शयितव्यं कार्यं च कर्तव्यम् । अधिकविशिष्टसमर्थनसूचना अधः प्रदत्ता अस्ति।
अस्माकं समर्थितब्राउजर्-परिधिं तेषां संस्करणं च भवान् अस्माकं.browserslistrc file :
# https://github.com/browserslist/browserslist#readme
>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30
वयं CSS उपसर्गद्वारा अभिप्रेतं ब्राउजर् समर्थनं नियन्त्रयितुं Autoprefixer इत्यस्य उपयोगं कुर्मः, यत् एतेषां ब्राउजर् संस्करणानाम् प्रबन्धनाय Browserslist इत्यस्य उपयोगं करोति । एतानि साधनानि भवतः परियोजनासु कथं एकीकृत्य स्थापयितुं तेषां दस्तावेजानां परामर्शं कुर्वन्तु ।
मोबाईल उपकरण
सामान्यतया, Bootstrap प्रत्येकस्य प्रमुखमञ्चस्य पूर्वनिर्धारितब्राउजरस्य नवीनतमसंस्करणं समर्थयति । ध्यानं कुर्वन्तु यत् प्रॉक्सी ब्राउजर् (यथा Opera Mini, Opera Mobile इत्यस्य Turbo मोड, UC Browser Mini, Amazon Silk) समर्थिताः न सन्ति ।
| क्रोम इति | फायरफॉक्स इति | सफारी | Android ब्राउज़र एवं वेबव्यू | माइक्रोसॉफ्ट एज | |
|---|---|---|---|---|---|
| एण्ड्रॉयड् इति | समर्थित | समर्थित | न/अ | Android v5.0+ समर्थितम् | समर्थित |
| iOS इति | समर्थित | समर्थित | समर्थित | न/अ | समर्थित |
| विण्डोज १० मोबाईल | न/अ | न/अ | न/अ | न/अ | समर्थित |
डेस्कटॉप ब्राउज़र
तथैव अधिकांशस्य डेस्कटॉप् ब्राउजर् इत्यस्य नवीनतमसंस्करणं समर्थितम् अस्ति ।
| क्रोम इति | फायरफॉक्स इति | अन्तर्जाल एक्स्प्लोरर | माइक्रोसॉफ्ट एज | ओपेरा | सफारी | |
|---|---|---|---|---|---|---|
| मैक | समर्थित | समर्थित | न/अ | समर्थित | समर्थित | समर्थित |
| विण्डोजः | समर्थित | समर्थित | समर्थित, IE10+ | समर्थित | समर्थित | न समर्थितम् |
Firefox कृते, नवीनतमस्य सामान्यस्थिरविमोचनस्य अतिरिक्तं, वयं Firefox इत्यस्य नवीनतमस्य विस्तारितसमर्थनविमोचनस्य (ESR) संस्करणस्य अपि समर्थनं कुर्मः ।
अनधिकृतरूपेण, Bootstrap इत्येतत् Chromium तथा Chrome for Linux, Firefox for Linux, Internet Explorer 9 इत्येतयोः मध्ये पर्याप्तं सुन्दरं दृश्यते, व्यवहारं च कर्तव्यम्, यद्यपि ते आधिकारिकतया समर्थिताः न सन्ति
Bootstrap इत्यस्य केषाञ्चन ब्राउजर्-दोषाणां सूचीयाः कृते अस्माकं Wall of browser bugs पश्यन्तु ।
अन्तर्जाल एक्स्प्लोरर
Internet Explorer 10+ समर्थितम् अस्ति; IE9 and down इति न भवति। कृपया अवगच्छन्तु यत् केचन CSS3 गुणाः HTML5 तत्त्वानि च IE10 मध्ये पूर्णतया समर्थिताः न सन्ति, अथवा पूर्णकार्यक्षमतायै उपसर्गयुक्तगुणानां आवश्यकता वर्तते । CSS3 तथा HTML5 विशेषतानां ब्राउजर् समर्थनविषये विवरणार्थं Can I use... इति पश्यन्तु । यदि भवतां कृते IE8-9 समर्थनस्य आवश्यकता अस्ति तर्हि Bootstrap 3 इत्यस्य उपयोगं कुर्वन्तु ।
मोबाईल पर मोडल एवं ड्रॉपडाउन
ओवरफ्लो एवं स्क्रॉलिंग
overflow: hidden;on the element इत्यस्य समर्थनं <body>iOS तथा Android इत्यत्र अत्यन्तं सीमितम् अस्ति । तदर्थं यदा भवान् तेषु द्वयोः अपि यन्त्रयोः ब्राउजर् मध्ये मोडल् इत्यस्य उपरि अधः वा स्क्रॉलं करोति तदा <body>सामग्री स्क्रॉल कर्तुं आरभेत । Chrome दोष #175502 ( Chrome v40 मध्ये निवारितम्) तथा WebKit दोष #153852 पश्यन्तु ।
iOS पाठक्षेत्राणि तथा स्क्रॉलिंग्
<input>iOS 9.2 इत्यस्मात् आरभ्य, यदा कश्चन मोडल् उद्घाटितः भवति, यदि स्क्रॉल-इशारस्य आरम्भिकः स्पर्शः पाठ्यस्य अथवा a -इत्यस्य सीमायाः अन्तः अस्ति <textarea>, तर्हि <body>मोडालस्य अधः विद्यमाना सामग्री मोडलस्य एव स्थाने स्क्रॉल-कृता भविष्यति वेबकिट दोष #153856 देखें ।
नवबार ड्रॉपडाउन्स
.dropdown-backdropz-indexing इत्यस्य जटिलतायाः कारणात् nav इत्यस्मिन् iOS इत्यत्र तत्त्वं न उपयुज्यते । एवं, navbars मध्ये dropdowns बन्दं कर्तुं, भवद्भिः प्रत्यक्षतया dropdown element (अथवा अन्यः कोऽपि element यः iOS मध्ये click event प्रज्वालयति ) क्लिक् कर्तव्यः ।
ब्राउज़र जूमिंग
पृष्ठस्य जूमिंग् अनिवार्यतया केषुचित् घटकेषु रेण्डरिंग आर्टिफैक्ट् प्रस्तुतं करोति, Bootstrap इत्यत्र अपि च शेषजालस्य मध्ये । मुद्देः आधारेण वयं तत् समाधातुं शक्नुमः (प्रथमं अन्वेषणं कुर्वन्तु ततः आवश्यकतानुसारं मुद्दाम् उद्घाटयन्तु)। तथापि वयं एतान् उपेक्षितुं प्रवृत्ताः स्मः यतः तेषु प्रायः हैकी-कार्यपरिहारात् परं प्रत्यक्षं समाधानं नास्ति ।
चिपचिपा :hover/ :focusiOS पर
यद्यपि :hoverअधिकांशस्पर्शयन्त्रेषु सम्भवं नास्ति तथापि iOS एतत् व्यवहारं अनुकरणं करोति, यस्य परिणामेण “चिपचिपा” होवरशैल्याः भवन्ति ये एकं तत्त्वं टैप् कृत्वा स्थास्यन्ति । एताः होवरशैल्याः केवलं तदा एव निष्कासिताः भवन्ति यदा उपयोक्तारः अन्यं तत्त्वं ट्याप् कुर्वन्ति । एषः व्यवहारः बहुधा अनिष्टः इति मन्यते, एण्ड्रॉयड् अथवा विण्डोज-यन्त्रेषु समस्या न इति दृश्यते ।
अस्माकं v4 अल्फा तथा बीटा विमोचनेषु सम्पूर्णे वयं अपूर्णं तथा च एकं मीडिया-क्वेरी-शिम-मध्ये विकल्पार्थं कोडं समावेशितवन्तः टिप्पणीं कृतवन्तः यत् होवरिंग् अनुकरणं कुर्वन्ति स्पर्श-यन्त्र-ब्राउजर्-मध्ये होवर-शैल्याः अक्षमीकरणं करिष्यति |. इदं कार्यं कदापि पूर्णतया सम्पन्नं वा सक्षमं वा न जातम्, परन्तु पूर्णतया भङ्गं परिहरितुं वयं एतत् शिमं निराकृत्य छद्मवर्गाणां कृते मिक्सिन्-इत्येतत् शॉर्टकट्-रूपेण स्थापयितुं विकल्पितवन्तः।
मुद्रणम्
केषुचित् आधुनिकब्राउजर्-मध्ये अपि मुद्रणं विचित्रं भवितुम् अर्हति ।
सफारी v8.0 इत्यस्मात् आरभ्य, नियत-विस्तार- .containerवर्गस्य उपयोगेन सफारी मुद्रणकाले असामान्यतया लघु-अक्षर-आकारस्य उपयोगं कर्तुं शक्नोति । अधिकविवरणार्थं मुद्दा #14868 तथा WebKit दोष #138192 पश्यन्तु । एकं सम्भाव्यं कार्यपरिहारं निम्नलिखितम् CSS अस्ति ।
@media print {
.container {
width: auto;
}
}
Android स्टॉक ब्राउज़र
Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.
Select menu
On <select> elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. (See this StackOverflow question for details.) Use the snippet of code below to remove the offending CSS and render the <select> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.
<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>
Want to see an example? Check out this JS Bin demo.
Validators
In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren’t yet fully standardized, but these are used purely for progressive enhancement.
These validation warnings don’t matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don’t interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.
अस्माकं HTML दस्तावेजेषु अपि तथैव कतिपयस्य Firefox दोषस्य कृते अस्माकं कार्यपरिहारस्य समावेशस्य कारणेन केचन तुच्छाः अपरिणामिकाः च HTML प्रमाणीकरणचेतावनीः सन्ति |.