Soporte de derecha a izquierda para Twitter Bootstrap 3


Ha habido preguntas sobre esto antes: Twitter Bootstrap CSS que admiten 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 derecha a izquierda.

¿Alguien sabe una solución para eso?

Author: Community, 2013-11-01

9 answers

  1. Lo recomiendo encarecidamentebootstrap-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 core bootstrap. CDN

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

 157
Author: Muhammad Reda,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-16 12:06:56

Lo puedes encontrar aquí: RTL Bootstrap v3.2.0.

 11
Author: Mohamad Kaakati,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-18 13:02:43
 6
Author: user197508,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-03 22:23:36

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

 6
Author: Mr.Mamadkhan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-22 19:30:57

En cada versión de bootstrap,puede hacerlo manualmente

  1. establecer la dirección rtl a su cuerpo
  2. en bootstrap.archivo css, buscar ".col-sm-9{float: left} " expresión, cámbiala a float: right

Esto hace la mayoría de las cosas que desea para rtl

 5
Author: Mohsen.Sharify,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-19 10:45:14

Finalmente, puedo encontrar una nueva versión para el bootstrap de derecha a izquierda. compartir aquí para uso de 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 para crear y compartir.

 4
Author: Hamid Naghipour,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-15 10:50:01

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

 3
Author: Omar Alahmed,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-03 13:11:39

Si desea soporte de Bootstrap 3 para RTL y LTR en su sitio, puede modificar las reglas CSS "sobre la marcha", se adjunta aquí una función, modifica las clases principales para 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 ser modificadas, pero solo necesitaba esas.

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

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;
                }
            }
        }
 3
Author: Eldar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-30 19:57:39

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

 0
Author: zareh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-28 14:44:50