Obsługa od prawej do lewej dla Twitter Bootstrap 3

Wcześniej pojawiały się pytania na ten temat: Twitter Bootstrap CSS, który obsługuje języki RTL

Ale wszystkie odpowiedzi są dobre dla Bootstrap 2.x

Pracuję nad projektem w języku arabskim (rtl) i potrzebuję Bootstrap 3.x od prawej do lewej.

Czy ktoś zna rozwiązanie tego problemu?

1. Bardzo polecam bootstrap-rtl . Jest zbudowany na rdzeniu Bootstrap, a obsługa rtl jest dodana, ponieważ jest to motyw bootstrap. Uczyniłoby to twój kod łatwiejszym w utrzymaniu, ponieważ zawsze możesz zaktualizować podstawowe pliki bootstrap. CDN

2. Inna opcja korzystania z tej samodzielnej biblioteki , zawiera również kilka niesamowitych arabskich czcionek.

Możesz go znaleźć tutaj: RTL Bootstrap v3.2.0 .

Perska wersja Bootstrap witryny http://rbootstrap.ir/ Ver.2.3.2

To jest inny projekt: www.nuget.org/packages/Twitter.Bootstrap.RTL

w każdej wersji bootstrap można to zrobić ręcznie

1. ustaw kierunek rtl na swoje ciało
2. w pliku bootstrap.css poszukaj wyrażenia „.col-sm-9 {float: left}”, zmień je na float: right

to robi większość rzeczy, które chcesz dla rtl

wreszcie mogę znaleźć nową wersję dla prawego i lewego paska ładującego. udostępnij tutaj do użytku wszystkich:

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

Link do GitHub:

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

dziękuję parsmizban.com za tworzenie i udostępnianie.

Uznałem to za bardzo pomocne, sprawdź to: http://cdnjs.com/libraries/bootstrap-rtl

Jeśli chcesz, aby Bootstrap 3 obsługiwał RTL i LTR na swojej stronie, możesz modyfikować reguły CSS "w locie", załączona tutaj funkcja modyfikuje główne klasy Bootstrap 3, takie jak 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), jest o wiele więcej klas do zmodyfikowania, ale potrzebowałem tylko tych.

Wszystko, co musisz zrobić, to wywołać funkcję layout.setDirection('rtl')lub, layout.setDirection('ltr')a zmieni ona reguły CSS dla systemu siatki Bootstrap 3.

Powinien działać na wszystkich przeglądarkach (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;
                }
            }
        }

możesz użyć mojego projektu, tworzę bootstrap 3 rtl z sassem i gulpem, dzięki czemu możesz go łatwo dostosować https://github.com/z-avanes/bootstrap3-rtl

Ogłaszamy wprowadzenie AryaBootstrap ,

Ostatnia wersja jest oparta na bootstrap 4.3.1

AryaBootstrap to bootstrap z obsługą podwójnego wyrównywania układu i używany do projektowania stron internetowych LTR i RTL.

dodaj „dir” do html, to jedyna czynność, jaką musisz wykonać.

Sprawdź stronę AryaBootstrap pod adresem : http://abs.aryavandidad.com/

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