Поддержка справа налево для Twitter Bootstrap 3

Раньше были вопросы по этому поводу: Twitter Bootstrap CSS, поддерживающий языки RTL

Но все ответы хороши для Bootstrap 2.x

Я работаю над проектом на арабском языке (rtl), и мне нужен Bootstrap 3.x справа налево.

Кто-нибудь знает, как исправить это?

1. Я настоятельно рекомендую bootstrap-rtl . Он построен на ядре Bootstrap, и добавлена ​​поддержка rtl, поскольку это тема начальной загрузки. Это сделает ваш код более удобным в сопровождении, поскольку вы всегда можете обновить основные файлы начальной загрузки. CDN

2. Еще один вариант использования этой автономной библиотеки , в ней также есть несколько потрясающих арабских шрифтов.

Вы можете найти его здесь: RTL Bootstrap v3.2.0 .

Bootstrap персидская версия сайта http://rbootstrap.ir/ Ver.2.3.2

Это еще один проект: www.nuget.org/packages/Twitter.Bootstrap.RTL

в каждой версии бутстрапа вы можете сделать это вручную

1. установить направление RTL для вашего тела
2. в файле bootstrap.css найдите выражение ".col-sm-9 {float: left}", измените его на float: right

это делает большинство вещей, которые вы хотите для 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