Suporte da direita para a esquerda no Twitter Bootstrap 3

Já houve perguntas sobre isso: CSS de Bootstrap do Twitter compatível com linguagens RTL

Mas todas as respostas são boas para o Bootstrap 2.x

Estou trabalhando em um projeto que está em árabe (rtl) e preciso do Bootstrap 3.x da direita para a esquerda.

Alguém sabe uma solução para isso?

1. Eu recomendo o bootstrap-rtl . Ele é construído sobre o núcleo do Bootstrap e o suporte a rtl é adicionado, pois é um tema de bootstrap. Isso tornaria seu código mais sustentável, pois você sempre pode atualizar seus arquivos principais de inicialização. CDN

2. Outra opção para usar esta biblioteca autônoma , também vem com algumas fontes árabes impressionantes.

Você pode encontrá-lo aqui: RTL Bootstrap v3.2.0 .

Versão persa de bootstrap do site http://rbootstrap.ir/ Ver.2.3.2

Este é outro projeto: www.nuget.org/packages/Twitter.Bootstrap.RTL

em todas as versões do bootstrap, você pode fazê-lo manualmente

1. definir direção rtl para o seu corpo
2. no arquivo bootstrap.css, procure pela expressão ".col-sm-9 {float: left}" e altere para float: right

isso faz a maioria das coisas que você deseja para rtl

finalmente, posso encontrar uma nova versão para o bootstrap da direita para a esquerda. compartilhe aqui para uso de todos:

bootstrap-3-3-7-rtl e RTL Bootstrap 4.0.0-alpha.6.1

Link do GitHub:

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

obrigado parsmizban.com por criar e compartilhar.

Achei isso muito útil, verifique: http://cdnjs.com/libraries/bootstrap-rtl

Se você deseja o suporte do Bootstrap 3 para RTL e LTR no seu site, pode modificar as regras CSS "on the fly", anexada aqui é uma função, que modifica as principais classes do Bootstrap 3 como 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), existem muitas outras classes a serem modificadas, mas eu precisava apenas delas.

Tudo o que você precisa fazer é chamar a função layout.setDirection('rtl')ou layout.setDirection('ltr')e ela mudará as regras de CSS do sistema de grade do Bootstrap 3.

Deve funcionar em todos os navegadores (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;
                }
            }
        }

você pode usar meu projeto, eu crio o bootstrap 3 rtl com sass e gulp para que você possa personalizá-lo facilmente https://github.com/z-avanes/bootstrap3-rtl

Anunciamos o AryaBootstrap ,

A última versão é baseada no bootstrap 4.3.1

O AryaBootstrap é um bootstrap com suporte a alinhamento de layout duplo e usado para web design LTR e RTL.

adicione "dir" ao html, essa é a única ação que você precisa executar.

Confira o site da AryaBootstrap em: http://abs.aryavandidad.com/

AryaBootstrap no GitHub: https://github.com/mRizvandi/AryaBootstrap