Twitter Bootstrap 3에 대한 오른쪽에서 왼쪽 지원

Twitter Bootstrap 3에 대한 오른쪽에서 왼쪽 지원

---

이 전에 대한 질문이 계속있다 RTL 언어에서 트위터 부트 CSS 지원하는

그러나 모든 대답은 Bootstrap 2.x에 좋습니다.

아랍어 (rtl) 프로젝트를 진행 중이고 오른쪽에서 부트 스트랩 3.x가 필요합니다.

아무도 그에 대한 해결책을 알고 있습니까?

---

1. bootstrap-rtl을 적극 권장합니다. 부트 기반 코어 위에 구축 플랫폼 구축 지원이 추가되었습니다. 이렇게하면 항상 코어 부트 업그레이드 파일을 업데이트 할 수 있으므로 코드 유지 관리가 더 좋습니다. CDN

2. 이 독립형 라이브러리 를 사용하는 또 다른 옵션으로 멋진 아랍어 글꼴이 거의 없습니다.

---

RTL Bootstrap v3.2.0 에서 사용할 수 있습니다 .

---

이 또 다른 프로젝트입니다 : www.nuget.org/packages/Twitter.Bootstrap.RTL

---

사이트의 부트 신뢰할 수있는 페르시아어 버전 http://rbootstrap.ir/ Ver.2.3.2

---

모든 버전의 부트에서 수동으로 수행 할 수 있습니다.

1. 몸에 RTL 방향을 설정
2. bootstrap.css 파일에서 ".col-sm-9 {float : left}"식을 찾아 float : right로 변경하십시오.

이 당신이 원하는 대부분의 일을

---

마지막으로 오른쪽에서 부팅을위한 새 버전을 사용할 수 있습니다. 모두가 사용하기 위해 여기에 공유 :

부트 부트 -3-3-7-rtl 및 RTL 부트 부트 4.0.0-alpha.6.1

GitHub 링크 :

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

작성하고 공유해 주셔서 감사합니다. parsmizban.com

---

나는 이것이 매우 도움이된다는 것을 알았다. http://cdnjs.com/libraries/bootstrap-rtl

---

사이트에서 RTL 및 LTR에 대한 Bootstrap 3 지원을 원하는 경우 CSS 규칙을 "즉시"수정할 수 있습니다. 여기에 첨부 된 기능은 col- (xs | sm | md | lg와 같이 Bootstrap 3의 주요 클래스를 수정합니다.)-(1-12), col- (xs | sm | md | lg)-푸시-( 1-12), col- (xs | sm | md | lg)-풀-(1-12), col- (xs | sm | md | lg) -offset- (1-12), 수정해야 할 클래스가 더 많지만 클래스 만 필요했습니다.

이 할 필요 당신가 함수를 호출이다 layout.setDirection('rtl')또는 layout.setDirection('ltr')그것은 부트 스트랩 3 그리드 시스템에 대한 CSS 규칙을 변경합니다.

모든 브라우저에서 작동해야합니다 (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;
                }
            }
        }

---

내 프로젝트를 사용할 수 있습니다. .sass와 gulp로 부트 스트랩 3 rtl을 생성하면 쉽게 사용자 정의 할 수 있습니다. https://github.com/z-avanes/bootstrap3-rtl

---

AryaBootstrap을 발표합니다 .

마지막 버전은 부트 업그레이드 4.3.1을 기반으로합니다.

AryaBootstrap은 이중 레이아웃 정렬을 지원하는 부트 스트랩이며 LTR 및 RTL 웹 디자인에 사용됩니다.

html에 "dir"을 추가하십시오. 그게 당신이해야 할 유일한 작업입니다.

AryaBootstrap 웹 사이트 : http://abs.aryavandidad.com/

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

참고 URL : https://stackoverflow.com/questions/19730598/right-to-left-support-for-twitter-bootstrap-3