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

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

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

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

Кто-нибудь знает об этом?

ОТВЕТЫ

Ответ 1

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

  • Еще одна возможность использовать автономную библиотеку она также содержит несколько удивительных арабских шрифтов.

Ответ 5

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

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

это делает большинство вещей, которые вы хотите для rtl

Ответ 7

Если вы хотите, чтобы 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;
                }
            }
        }

Ответ 8

Наконец, я могу найти новую версию для правого левого бутстрапа. поделиться здесь для использования всеми:

самозагрузки-3-3-7-РТЛ а также RTL Bootstrap 4.0.0-alpha.6.1

Ссылка GitHub:

https://github.com/parsmizban/RTL-Bootstrap

Благодарим вас parsmizban.com для создания и совместного использования.

Ответ 9

вы можете использовать мой проект Я создаю bootstrap 3 rtl с sass и gulp, чтобы вы могли легко настроить его https://github.com/z-avanes/bootstrap3-rtl