이전에 이에 대한 질문이있었습니다. RTL 언어에서 지원하는 Twitter Bootstrap CSS
그러나 모든 답변은 Bootstrap 2.x에 적합합니다.
아랍어 (rtl)로 된 프로젝트를 진행 중이며 오른쪽에서 왼쪽으로 Bootstrap 3.x가 필요합니다.
아무도 그것에 대한 해결책을 알고 있습니까?
이전에 이에 대한 질문이있었습니다. RTL 언어에서 지원하는 Twitter Bootstrap CSS
그러나 모든 답변은 Bootstrap 2.x에 적합합니다.
아랍어 (rtl)로 된 프로젝트를 진행 중이며 오른쪽에서 왼쪽으로 Bootstrap 3.x가 필요합니다.
아무도 그것에 대한 해결책을 알고 있습니까?
답변:
나는 bootstrap-rtl을 적극 권장 합니다. 부트 스트랩 코어 위에 구축되었으며 부트 스트랩 테마이므로 rtl 지원이 추가되었습니다. 이렇게하면 코어 부트 스트랩 파일을 항상 업데이트 할 수 있으므로 코드를보다 쉽게 유지할 수 있습니다. CDN
이 독립 실행 형 라이브러리 를 사용하는 또 다른 옵션 은 몇 가지 멋진 아랍어 글꼴과 함께 제공됩니다.
여기에서 찾을 수 있습니다 : RTL Bootstrap v3.2.0 .
사이트의 부트 스트랩 페르시아어 버전 http://rbootstrap.ir/ Ver.2.3.2
이것은 또 다른 프로젝트입니다 : www.nuget.org/packages/Twitter.Bootstrap.RTL
모든 버전의 부트 스트랩에서 수동으로 수행 할 수 있습니다.
이것은 rtl에 대해 원하는 대부분의 작업을 수행합니다.
마지막으로 오른쪽에서 왼쪽으로 부트 스트랩을위한 새 버전을 찾을 수 있습니다. 모두가 사용할 수 있도록 여기에 공유 :
bootstrap-3-3-7-rtl 및 RTL Bootstrap 4.0.0-alpha.6.1
GitHub 링크 :
https://github.com/parsmizban/RTL-Bootstrap
만들고 공유 해주신 parsmizban.com 에게 감사드립니다 .
나는 이것이 매우 유용하다는 것을 알았습니다. http://cdnjs.com/libraries/bootstrap-rtl
사이트에서 RTL 및 LTR에 대한 부트 스트랩 3 지원을 원하는 경우 CSS 규칙을 "즉시"수정할 수 있습니다. 여기에 첨부 된 함수는 col- (xs | sm | md | lg와 같은 부트 스트랩 3의 주요 클래스를 수정합니다. )-(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), 수정해야 할 클래스가 더 많이 있지만 그 클래스 만 필요했습니다.
당신이 할 필요가 함수를 호출이다 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