इससे पहले इस बारे में सवाल किए गए हैं: ट्विटर बूटस्ट्रैप सीएसएस जो आरटीएल भाषाओं का समर्थन करता है
लेकिन बूटस्ट्रैप 2.x के लिए सभी उत्तर अच्छे हैं
मैं एक ऐसी परियोजना पर काम कर रहा हूँ जो अरबी (rtl) में है, और मुझे बूटस्ट्रैप 3.x दाएँ से बाएँ की आवश्यकता है।
किसी को भी इसके लिए एक तय पता है?
जवाबों:
मैं बूटस्ट्रैप-आरटीएल की अत्यधिक अनुशंसा करता हूं । यह बूटस्ट्रैप कोर पर बनाया गया है, और rtl समर्थन जोड़ा गया है क्योंकि यह बूटस्ट्रैप थीम है। यह आपके कोड को और अधिक रखरखाव योग्य बना देगा क्योंकि आप अपनी कोर बूटस्ट्रैप फ़ाइलों को हमेशा अपडेट कर सकते हैं। CDN
इस स्टैंड-अलोन लाइब्रेरी का उपयोग करने का एक अन्य विकल्प , यह भी कुछ भयानक अरबी फोंट के साथ आता है।
आप इसे यहां पा सकते हैं: RTL बूटस्ट्रैप v3.2.0 ।
साइट का बूटस्ट्रैप फ़ारसी संस्करण http://rbootstrap.ir/ Ver.2.3.2
यह एक और परियोजना है: www.nuget.org/packages/Twitter.Bootstrap.RTL
बूटस्ट्रैप के हर संस्करण में, आप इसे मैन्युअल रूप से कर सकते हैं
यह ज्यादातर चीजें हैं जो आप rtl के लिए चाहते हैं
अंत में, मैं बाएं बूटस्ट्रैप के दाईं ओर एक नया संस्करण पा सकता हूं। सभी द्वारा उपयोग के लिए यहाँ साझा करें:
बूटस्ट्रैप-3-3-7-आरटीएल और आरटीएल बूटस्ट्रैप 4.0.0-अल्फा.6.1
गिटहब लिंक:
https://github.com/parsmizban/RTL-Bootstrap
बनाने और साझा करने के लिए धन्यवाद parsmizban.com ।
मुझे यह बहुत मददगार लगा, इसे देखें: http://cdnjs.com/lbooks/bootstrap-rtl
यदि आप अपनी साइट पर RTL और LTR के लिए बूटस्ट्रैप 3 समर्थन चाहते हैं, तो आप CSS नियमों को "मक्खी पर" संशोधित कर सकते हैं, यहाँ संलग्न एक फ़ंक्शन है, यह बूटस्ट्रैप 3 के लिए प्रमुख वर्गों को संशोधित करता है जैसे col- (xs | sm | md। Lg) ) - (1-12), col- (xs | sm | md | lg) -push- (1-12), col- (xs | sm | md | lg) -pull- (1-12), col- (xs | sm | md | lg) -offset- (१-१२), कई और कक्षाएं संशोधित की जानी हैं, लेकिन मुझे केवल उन्हीं की जरूरत है।
आपको बस फ़ंक्शन को कॉल करने की आवश्यकता है layout.setDirection('rtl')याlayout.setDirection('ltr') यह बूटस्ट्रैप 3 ग्रिड सिस्टम के लिए सीएसएस नियम बदल देगा।
सभी ब्राउज़रों पर काम करना चाहिए (IE> = 9)।
var layout = {};
layout.setDirection = function (direction) {
layout.rtl = (direction === 'rtl');
document.getElementsByTagName("html")[0].style.direction = direction;
var styleSheets = document.styleSheets;
var modifyRule = function (rule) {
if (rule.style.getPropertyValue(layout.rtl ? 'left' : 'right') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-push-\d\d*/)) {
rule.style.setProperty((layout.rtl ? 'right' : 'left'), rule.style.getPropertyValue((layout.rtl ? 'left' : 'right')));
rule.style.removeProperty((layout.rtl ? 'left' : 'right'));
}
if (rule.style.getPropertyValue(layout.rtl ? 'right' : 'left') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-pull-\d\d*/)) {
rule.style.setProperty((layout.rtl ? 'left' : 'right'), rule.style.getPropertyValue((layout.rtl ? 'right' : 'left')));
rule.style.removeProperty((layout.rtl ? 'right' : 'left'));
}
if (rule.style.getPropertyValue(layout.rtl ? 'margin-left' : 'margin-right') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-offset-\d\d*/)) {
rule.style.setProperty((layout.rtl ? 'margin-right' : 'margin-left'), rule.style.getPropertyValue((layout.rtl ? 'margin-left' : 'margin-right')));
rule.style.removeProperty((layout.rtl ? 'margin-left' : 'margin-right'));
}
if (rule.style.getPropertyValue('float') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-\d\d*/)) {
rule.style.setProperty('float', (layout.rtl ? 'right' : 'left'));
}
};
try {
for (var i = 0; i < styleSheets.length; i++) {
var rules = styleSheets[i].cssRules || styleSheets[i].rules;
if (rules) {
for (var j = 0; j < rules.length; j++) {
if (rules[j].type === 4) {
var mediaRules = rules[j].cssRules || rules[j].rules
for (var y = 0; y < mediaRules.length; y++) {
modifyRule(mediaRules[y]);
}
}
if (rules[j].type === 1) {
modifyRule(rules[j]);
}
}
}
}
} catch (e) {
// Firefox might throw a SecurityError exception but it will work
if (e.name !== 'SecurityError') {
throw e;
}
}
}आप sass और gulp के साथ बूटस्ट्रैप 3 rtl बनाने के लिए मेरे प्रोजेक्ट का उपयोग कर सकते हैं ताकि आप इसे आसानी से https://github.com/z-avanes/bootstrap3-rtl अनुकूलित कर सकें
हम आर्यबूटस्ट्रैप की घोषणा करते हैं ,
अंतिम संस्करण बूटस्ट्रैप 4.3.1 पर आधारित है
आर्यबूटस्ट्रैप दोहरे लेआउट संरेखित समर्थन के साथ बूटस्ट्रैप है और, एलटीआर और आरटीएल वेब डिज़ाइन के लिए उपयोग किया जाता है।
html में "dir" जोड़ें, केवल वही क्रिया करें जो आपको करने की आवश्यकता है।
आर्यबूटस्ट्रैप वेबसाइट पर चेकआउट करें: http://abs.aryavandidad.com/
GitHub पर आर्यबूटस्ट्रैप: https://github.com/mRizvandi/AryaBootstrap