Были вопросы об этом раньше: Twitter Bootstrap CSS, поддерживающий языки RTL
Но все ответы хороши для Bootstrap 2.x
Я работаю над проектом, который находится на арабском языке (rtl), и мне нужен Bootstrap 3.x справа налево.
Кто-нибудь знает об этом?
Я настоятельно рекомендую bootstrap-rtl. Он построен поверх ядра Bootstrap, и добавлена поддержка rtl, поскольку это тема начальной загрузки. Это сделает ваш код более удобным для обслуживания, так как вы всегда можете обновлять свои файлы начальной загрузки. CDN
Еще одна возможность использовать автономную библиотеку она также содержит несколько удивительных арабских шрифтов.
Вы можете найти его здесь: RTL Bootstrap v3.2.0.
Это еще один проект: www.nuget.org/packages/Twitter.Bootstrap.RTL
Bootstrap Персидская версия сайта http://rbootstrap.ir/ Ver.2.3.2
в каждой версии бутстрапа вы можете сделать это вручную
это делает большинство вещей, которые вы хотите для rtl
Наконец, я могу найти новую версию для правого левого бутстрапа. поделиться здесь для использования всеми:
самозагрузки-3-3-7-РТЛ а также RTL Bootstrap 4.0.0-alpha.6.1
Ссылка GitHub:
https://github.com/parsmizban/RTL-Bootstrap
Благодарим вас parsmizban.com для создания и совместного использования.
Если вы хотите, чтобы Bootstrap 3 поддерживал RTL и LTR на вашем сайте, вы можете изменять правила CSS "на лету", здесь прилагается функция, она изменяет основные классы для Bootstrap 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- (1-12), существует еще много классов для изменения, но мне нужны только те.
Все, что вам нужно сделать, это вызвать функцию layout.setDirection('rtl')
или layout.setDirection('ltr')
, и она изменит правила CSS для сетки Bootstrap 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;
}
}
}
Я нашел это очень полезным, проверьте его: http://cdnjs.com/libraries/bootstrap-rtl
вы можете использовать мой проект Я создаю bootstrap 3 rtl с sass и gulp, чтобы вы могли легко настроить его https://github.com/z-avanes/bootstrap3-rtl