Obsługa od prawej do lewej dla Twitter Bootstrap 3

Odpowiedzi:

165
  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.

Muhammad Reda
źródło
6

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

Mohsen Sharify
źródło
1
To było bardzo pomocne
Nick M
6

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.

Hamid Naghipour
źródło
Ten jest najlepszy!
Wazime,
3

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;
                }
            }
        }
Eldar
źródło
0

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

zareh
źródło
Dobrze jest przynieść integracyjną część kodu, a nie tylko skopiować link
Lorenzo Belfanti
0

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

mRizvandi
źródło