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