Soporte de derecha a izquierda para Twitter Bootstrap 3

Ha habido preguntas sobre esto antes: Twitter Bootstrap CSS que admite lenguajes RTL

Pero todas las respuestas son buenas para Bootstrap 2.x

Estoy trabajando en un proyecto que está en árabe (rtl) y necesito Bootstrap 3.x de derecha a izquierda.

¿Alguien sabe una solución para eso?

1. Recomiendo encarecidamente bootstrap-rtl . Está construido sobre el núcleo de Bootstrap, y se agrega soporte rtl ya que es un tema de bootstrap. Esto haría que su código sea más fácil de mantener, ya que siempre puede actualizar sus archivos de arranque principales. CDN

2. Otra opción para usar esta biblioteca independiente , también viene con algunas fuentes árabes increíbles.

Puede encontrarlo aquí: RTL Bootstrap v3.2.0 .

Bootstrap versión persa del sitio http://rbootstrap.ir/ Ver.2.3.2

Este es otro proyecto: www.nuget.org/packages/Twitter.Bootstrap.RTL

en cada versión de bootstrap, puede hacerlo manualmente

1. establece la dirección rtl a tu cuerpo
2. en el archivo bootstrap.css, busque la expresión ".col-sm-9 {float: left}", cámbiela a float: right

esto hace la mayoría de las cosas que quieres para rtl

finalmente, puedo encontrar una nueva versión para el bootstrap de derecha a izquierda. compartir aquí para que lo usen todos:

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

Enlace de GitHub:

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

gracias parsmizban.com por crear y compartir.

Encontré esto muy útil, compruébalo: http://cdnjs.com/libraries/bootstrap-rtl

Si desea que Bootstrap 3 sea compatible con RTL y LTR en su sitio, puede modificar las reglas CSS "sobre la marcha". Aquí se adjunta una función que modifica las clases principales de 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), hay muchas más clases para modificar, pero solo las necesitaba.

Todo lo que necesita hacer es llamar a la función layout.setDirection('rtl')o layout.setDirection('ltr')cambiará las reglas CSS para el sistema de cuadrícula Bootstrap 3.

Debería funcionar en todos los 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;
                }
            }
        }

puedes usar mi proyecto, creo bootstrap 3 rtl con sass y gulp para que puedas personalizarlo fácilmente https://github.com/z-avanes/bootstrap3-rtl

Anunciamos el AryaBootstrap ,

La última versión se basa en bootstrap 4.3.1

AryaBootstrap es un bootstrap con soporte de alineación de diseño dual y, utilizado para el diseño web LTR y RTL.

agregue "dir" a html, esa es la única acción que necesita hacer.

Visite el sitio web de AryaBootstrap en: http://abs.aryavandidad.com/

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