web-dev-qa-db-fra.com

Prise en charge de droite à gauche pour Twitter Bootstrap 3

Il y avait eu des questions à ce sujet auparavant: Twitter Bootstrap CSS supporté par les langues RTL

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

Je travaille sur un projet en arabe (RTL) et il me faut Bootstrap 3.x de droite à gauche.

Est-ce que quelqu'un connaît un correctif pour cela?

csshtml5twitter-bootstraptwitter-bootstrap-3
118
Bishoy

  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 facile à gérer car vous pouvez toujours mettre à jour vos fichiers de base bootstrap. CDN

  2. Une autre option pour utiliser ceci bibliothèque autonome , est également fournie avec quelques superbes polices arabes.

164
Muhammad Reda

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

11
Mohamad Kaakati

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

6
user197508

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.

6
Hamid Naghipour

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

6
Mr.Mamadkhan

dans chaque version de bootstrap, vous pouvez le faire manuellement

  1. définir la direction RTL à votre corps
  2. dans le fichier bootstrap.css, recherchez l'expression ".col-sm-9 {float: left}", remplacez-le par float: right

cela fait la plupart des choses que vous voulez pour RTL

5
Mohsen.Sharify

Si vous souhaitez que Bootstrap 3 prenne en charge RTL et LTR sur votre site, vous pouvez modifier les règles CSS "à la volée". Ci-joint une fonction, il modifie les classes principales 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 j’en avais besoin.

Il suffit d’appeler la fonction layout.setDirection('rtl') ou layout.setDirection('ltr') pour modifier 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;
                }
            }
        }
3
Eldar

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

3
Omar Alahmed

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

0
zareh

Nous annonçons le AryaBootstrap ,

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

AryaBootstrap est un bootstrap avec double support d'alignement de présentation et utilisé pour la conception Web LTR et RTL.

ajoutez "dir" au code HTML, c’est la seule action que vous devez faire.

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

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

0
mRizvandi