Unterstützung von rechts nach links für Twitter Bootstrap 3

Es gab bereits Fragen dazu: Twitter Bootstrap CSS, das RTL-Sprachen unterstützt

Aber alle Antworten sind gut für Bootstrap 2.x.

Ich arbeite an einem Projekt auf Arabisch (rtl) und benötige Bootstrap 3.x von rechts nach links.

Kennt jemand eine Lösung dafür?

1. Ich kann bootstrap-rtl nur empfehlen . Es basiert auf dem Bootstrap-Kern und die RTL-Unterstützung wird hinzugefügt, da es sich um ein Bootstrap-Thema handelt. Dies würde Ihren Code wartbarer machen, da Sie Ihre Kern-Bootstrap-Dateien jederzeit aktualisieren können. CDN

2. Eine weitere Option, um diese eigenständige Bibliothek zu verwenden . Sie enthält auch einige fantastische arabische Schriftarten.

Sie finden es hier: RTL Bootstrap v3.2.0 .

Bootstrap Persische Version der Site http://rbootstrap.ir/ Ver.2.3.2

Dies ist ein weiteres Projekt: www.nuget.org/packages/Twitter.Bootstrap.RTL

In jeder Bootstrap-Version können Sie dies manuell tun

1. Stellen Sie die RTL-Richtung auf Ihren Körper ein
2. Suchen Sie in der Datei bootstrap.css nach dem Ausdruck ".col-sm-9 {float: left}" und ändern Sie ihn in float: right

Dies macht die meisten Dinge, die Sie für RTL wollen

Endlich kann ich eine neue Version für den Bootstrap von rechts nach links finden. Teilen Sie hier für alle:

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

GitHub Link:

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

Vielen Dank an parsmizban.com für das Erstellen und Teilen.

Ich fand das sehr hilfreich, überprüfen Sie es: http://cdnjs.com/libraries/bootstrap-rtl

Wenn Sie Bootstrap 3-Unterstützung für RTL und LTR auf Ihrer Site wünschen, können Sie CSS-Regeln "on the fly" ändern. Hier ist eine Funktion beigefügt, die die Hauptklassen für Bootstrap 3 wie col- (xs | sm | md | lg) ändert ) - (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), es gibt viel mehr Klassen, die geändert werden müssen, aber ich brauchte nur diese.

Sie müssen lediglich die Funktion aufrufen layout.setDirection('rtl')oder layout.setDirection('ltr')die CSS-Regeln für das Bootstrap 3-Rastersystem ändern.

Sollte auf allen Browsern funktionieren (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;
                }
            }
        }

Sie können mein Projekt verwenden, ich erstelle Bootstrap 3 RTL mit Sass und Gulp, so dass Sie es einfach anpassen können https://github.com/z-avanes/bootstrap3-rtl

Wir kündigen den AryaBootstrap an ,

Die letzte Version basiert auf Bootstrap 4.3.1

AryaBootstrap ist ein Bootstrap mit Unterstützung für die Ausrichtung von zwei Layouts und wird für das LTR- und RTL-Webdesign verwendet.

Fügen Sie "dir" zu HTML hinzu, das ist die einzige Aktion, die Sie ausführen müssen.

Überprüfen Sie die AryaBootstrap-Website unter: http://abs.aryavandidad.com/

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