Đã có câu hỏi về điều này trước đây: Twitter Bootstrap CSS hỗ trợ từ các ngôn ngữ RTL
Nhưng tất cả các câu trả lời đều tốt cho Bootstrap 2.x
Tôi đang làm việc trên một dự án bằng tiếng Ả Rập (rtl) và tôi cần Bootstrap 3.x từ phải sang trái.
Có ai biết một sửa chữa cho điều đó?
Câu trả lời:
Tôi thực sự khuyên bạn nên dùng bootstrap-rtl . Nó được xây dựng trên lõi Bootstrap và hỗ trợ rtl được thêm vào vì nó là một chủ đề bootstrap. Điều này sẽ làm cho mã của bạn dễ bảo trì hơn vì bạn luôn có thể cập nhật các tệp bootstrap cốt lõi của mình. CDN
Một tùy chọn khác để sử dụng thư viện độc lập này , Nó cũng đi kèm với một số phông chữ Ả Rập tuyệt vời.
Bạn có thể tìm thấy nó ở đây: RTL Bootstrap v3.2.0 .
Bootstrap phiên bản tiếng Ba Tư của trang web http://rbootstrap.ir/ Ver.2.3.2
Đây là một dự án khác: www.nuget.org/packages/Twitter.Bootstrap.RTL
trong mọi phiên bản bootstrap, bạn có thể thực hiện theo cách thủ công
cái này làm hầu hết những điều bạn muốn cho rtl
cuối cùng, tôi có thể tìm thấy một phiên bản mới cho bootstrap từ phải sang trái. chia sẻ ở đây để mọi người sử dụng:
bootstrap-3-3-7-rtl và RTL Bootstrap 4.0.0-alpha.6.1
Liên kết GitHub:
https://github.com/parsmizban/RTL-Bootstrap
cảm ơn bạn parsmizban.com đã tạo và chia sẻ.
Tôi thấy điều này rất hữu ích, hãy kiểm tra nó: http://cdnjs.com/libraries/bootstrap-rtl
Nếu bạn muốn Bootstrap 3 hỗ trợ RTL và LTR trên trang web của mình, bạn có thể sửa đổi quy tắc CSS "ngay lập tức", đính kèm đây là một hàm, nó sửa đổi các lớp chính cho Bootstrap 3 như 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), có nhiều lớp khác cần được sửa đổi nhưng tôi chỉ cần những lớp đó.
Tất cả những gì bạn cần làm là gọi hàm layout.setDirection('rtl')hoặc layout.setDirection('ltr')nó sẽ thay đổi Quy tắc CSS cho hệ thống lưới Bootstrap 3.
Hoạt động trên mọi trình duyệt (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;
}
}
}bạn có thể sử dụng dự án của tôi, tôi tạo bootstrap 3 rtl với sass và gulp để bạn có thể dễ dàng tùy chỉnh nó https://github.com/z-avanes/bootstrap3-rtl
Chúng tôi công bố AryaBootstrap ,
Phiên bản cuối cùng dựa trên bootstrap 4.3.1
AryaBootstrap là một bootstrap có hỗ trợ căn chỉnh bố cục kép và được sử dụng cho thiết kế web LTR và RTL.
thêm "dir" vào html, đó là hành động duy nhất bạn cần làm.
Kiểm tra Trang web AryaBootstrap tại: http://abs.aryavandidad.com/
AryaBootstrap tại GitHub: https://github.com/mRizvandi/AryaBootstrap