css - icon - descargar bootstrap 3

Soporte de derecha a izquierda para Twitter Bootstrap 3

Question

Ha habido preguntas sobre esto antes: Twitter Bootstrap CSS que admite los idiomas 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?

Answer 1

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

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

Answer 2

Encontré esto muy útil, compruébalo: CDN

Answer 3

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

Answer 4

Puede encontrarlo aquí: RTL Bootstrap v3.2.0 .

Answer 5

Si quieres compatibilidad con Bootstrap 3 para RTL y LTR en tu sitio, puedes modificar las reglas de CSS "sobre la marcha", adjunta aquí una función, modifica las principales clases 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 necesitaba esas.

Todo lo que necesita hacer es llamar a la función layout.setDirection(''rtl'') o layout.setDirection(''ltr'') y cambiará las reglas de 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;
                }
            }
        }

Answer 6

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

Answer 7

en cada versión de bootstrap, puedes hacerlo manualmente

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

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

Answer 8

finalmente, puedo encontrar una nueva versión para el arranque de derecha a izquierda. compartir aquí para su uso por 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.

Answer 9

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