Prise en charge de droite à gauche pour Twitter Bootstrap 3

Il y a eu des questions à ce sujet auparavant: Twitter Bootstrap CSS prenant en charge les langages RTL

Mais toutes les réponses sont bonnes pour Bootstrap 2.x

Je travaille sur un projet en arabe (rtl) et j'ai besoin de Bootstrap 3.x de droite à gauche.

Quelqu'un connaît-il une solution à cela?

1. Je recommande fortement bootstrap-rtl . Il est construit sur le noyau Bootstrap, et le support rtl est ajouté car il s'agit d'un thème bootstrap. Cela rendrait votre code plus maintenable car vous pouvez toujours mettre à jour vos fichiers d'amorçage de base. CDN

2. Une autre option pour utiliser cette bibliothèque autonome , elle est également livrée avec quelques polices arabes impressionnantes.

Vous pouvez le trouver ici: RTL Bootstrap v3.2.0 .

Bootstrap version persane du site http://rbootstrap.ir/ Ver.2.3.2

Ceci est un autre projet: www.nuget.org/packages/Twitter.Bootstrap.RTL

dans chaque version de bootstrap, vous pouvez le faire manuellement

1. définir la direction rtl de votre corps
2. dans le fichier bootstrap.css, recherchez l'expression ".col-sm-9 {float: left}", changez-la en float: right

cela fait la plupart des choses que vous voulez pour rtl

enfin, je peux trouver une nouvelle version pour le bootstrap de droite à gauche. partager ici pour une utilisation par tous:

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

Lien GitHub:

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

merci parsmizban.com pour la création et le partage.

J'ai trouvé cela très utile, vérifiez-le: http://cdnjs.com/libraries/bootstrap-rtl

Si vous souhaitez que Bootstrap 3 supporte RTL et LTR sur votre site, vous pouvez modifier les règles CSS "à la volée", ci-joint une fonction, elle modifie les classes majeures pour Bootstrap 3 comme 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), il y a beaucoup plus de classes à modifier mais je n'avais besoin que de celles-ci.

Tout ce que vous avez à faire est d'appeler la fonction layout.setDirection('rtl')ou layout.setDirection('ltr')et cela changera les règles CSS du système de grille Bootstrap 3.

Devrait fonctionner sur tous les navigateurs (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;
                }
            }
        }

vous pouvez utiliser mon projet, je crée bootstrap 3 rtl avec sass et gulp afin que vous puissiez facilement le personnaliser https://github.com/z-avanes/bootstrap3-rtl

Nous annonçons l' AryaBootstrap ,

La dernière version est basée sur bootstrap 4.3.1

AryaBootstrap est un bootstrap avec un support d'alignement de double mise en page et, utilisé pour la conception Web LTR et RTL.

ajoutez "dir" au html, c'est la seule action que vous devez faire.

Consultez le site Web AryaBootstrap à l' adresse : http://abs.aryavandidad.com/

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