it-swarm.com.de

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

Zu diesem Thema gab es bereits Fragen: Twitter Bootstrap CSS, das RTL-Sprachen unterstützt

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

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

Kennt jemand eine Lösung dafür?

118
Bishoy
  1. Ich kann bootstrap-rtl nur empfehlen. Es basiert auf dem Kern von Bootstrap und die RTL-Unterstützung wurde hinzugefügt, da es sich um ein bootstrap) - Thema handelt. Dies würde Ihren Code wartungsfreundlicher machen, da Sie ihn jederzeit aktualisieren können core bootstrap files. CDN

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

164
Muhammad Reda

Sie finden es hier: RTL Bootstrap v3.2. .

11
Mohamad Kaakati

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

6
user197508

endlich kann ich eine neue Version für das Bootstrap von rechts nach links finden. teile es 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 parsmizban.com für das Erstellen und Teilen.

6
Hamid Naghipour

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

6
Mr.Mamadkhan

in jeder Version von Bootstrap können Sie dies manuell tun

  1. setze die Richtung auf deinen Körper
  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

5
Mohsen.Sharify

Wenn Sie möchten, dass Bootstrap 3 RTL und LTR auf Ihrer Site unterstützt, können Sie die CSS-Regeln "on the fly" ändern. Dies ist eine Funktion, die die Hauptklassen für Bootstrap 3 wie 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), es müssen viel mehr Klassen modifiziert werden, aber ich brauchte nur diese.

Sie müssen nur die Funktion layout.setDirection('rtl') oder layout.setDirection('ltr') aufrufen, und die CSS-Regeln für Bootstrap 3 grid system werden geändert.

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;
                }
            }
        }
3
Eldar

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

3
Omar Alahmed

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 =

0
zareh

Wir kündigen den AryaBootstrap an,

Die letzte Version basiert auf bootstrap 4.3.1

AryaBootstrap ist ein bootstrap mit Dual Layout Align-Unterstützung und wird für LTR- und RTL-Webdesign verwendet.

füge "dir" zu html hinzu, das ist die einzige Aktion, die du tun musst.

Besuchen Sie die AryaBootstrap-Website unter: http://abs.aryavandidad.com/

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

0
mRizvandi