Bununla ilgili daha önce sorular olmuştu: RTL dillerini destekleyen Twitter Bootstrap CSS
Ancak tüm yanıtlar Bootstrap 2.x için iyidir
Arapça (rtl) bir proje üzerinde çalışıyorum ve sağdan sola Bootstrap 3.x'e ihtiyacım var.
Bunun için bir düzeltme bilen var mı?
Yanıtlar:
Bootstrap-rtl'yi şiddetle tavsiye ederim . Bootstrap çekirdeği üzerine inşa edilmiştir ve bir bootstrap teması olduğu için rtl desteği eklenmiştir. Bu, çekirdek önyükleme dosyalarınızı her zaman güncelleyebildiğiniz için kodunuzu daha sürdürülebilir hale getirir. CDN
Bu bağımsız kitaplığı kullanmak için başka bir seçenek , birkaç harika Arapça yazı tipiyle birlikte gelir.
Burada bulabilirsiniz: RTL Bootstrap v3.2.0 .
Bootstrap Sitenin Farsça versiyonu http://rbootstrap.ir/ Ver.2.3.2
Bu Başka Bir Proje: www.nuget.org/packages/Twitter.Bootstrap.RTL
her bootstrap sürümünde bunu manuel olarak yapabilirsiniz
bu, rtl için istediğin çoğu şeyi yapar
son olarak, sağdan sola önyükleme için yeni bir sürüm bulabilirim. herkesin kullanımı için burada paylaşın:
bootstrap-3-3-7-rtl ve RTL Bootstrap 4.0.0-alpha.6.1
GitHub bağlantısı:
https://github.com/parsmizban/RTL-Bootstrap
oluşturduğunuz ve paylaştığınız için teşekkürler parsmizban.com .
Bunu çok yararlı buldum, kontrol edin: http://cdnjs.com/libraries/bootstrap-rtl
Sitenizde RTL ve LTR için Bootstrap 3 desteği istiyorsanız, CSS kurallarını "anında" değiştirebilirsiniz, buraya bir işlev eklenmiştir, col- (xs | sm | md | lg gibi Bootstrap 3 için ana sınıfları değiştirir ) - (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), değiştirilecek daha birçok sınıf var ama sadece bunlara ihtiyacım vardı.
Tek yapmanız gereken tek şey işlev çağrısı olduğu layout.setDirection('rtl')veya layout.setDirection('ltr')ve Bootstrap 3 ızgara sistemi için CSS Kuralları değişecektir.
Tüm tarayıcılarda çalışmalıdır (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;
}
}
}projemi kullanabilirsiniz sass ve gulp ile bootstrap 3 rtl oluşturuyorum böylece kolayca özelleştirebilirsiniz https://github.com/z-avanes/bootstrap3-rtl
Biz duyurun AryaBootstrap ,
Son sürüm, bootstrap 4.3.1'e dayanmaktadır.
AryaBootstrap, LTR ve RTL web tasarımı için kullanılan, çift düzen hizalama desteğine sahip bir önyükleme bandıdır.
html'ye "dir" ekleyin, yapmanız gereken tek işlem budur.
AryaBootstrap Web sitesini ziyaret edin: http://abs.aryavandidad.com/
GitHub'da AryaBootstrap: https://github.com/mRizvandi/AryaBootstrap