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?
Réponses:
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
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
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