Ada pertanyaan tentang ini sebelumnya: Twitter Bootstrap CSS yang mendukung dari bahasa RTL
Tetapi semua jawaban bagus untuk Bootstrap 2.x
Saya sedang mengerjakan proyek berbahasa Arab (rtl), dan saya membutuhkan Bootstrap 3.x dari kanan ke kiri.
Apakah ada yang tahu cara memperbaikinya?
Jawaban:
Saya sangat merekomendasikan bootstrap-rtl . Itu dibangun di atas inti Bootstrap, dan dukungan rtl ditambahkan karena ini adalah tema bootstrap. Ini akan membuat kode Anda lebih mudah dipelihara karena Anda selalu dapat memperbarui file bootstrap inti Anda. CDN
Opsi lain untuk menggunakan pustaka yang berdiri sendiri ini , Ini juga dilengkapi dengan beberapa font Arab yang mengagumkan.
Anda dapat menemukannya di sini: RTL Bootstrap v3.2.0 .
Bootstrap versi Persia dari situs http://rbootstrap.ir/ Ver.2.3.2
Ini adalah Proyek Lain: www.nuget.org/packages/Twitter.Bootstrap.RTL
di setiap versi bootstrap, Anda dapat melakukannya secara manual
ini melakukan banyak hal yang Anda inginkan untuk rtl
akhirnya, saya dapat menemukan versi baru untuk bootstrap kanan ke kiri. bagikan di sini untuk digunakan oleh semua:
bootstrap-3-3-7-rtl dan RTL Bootstrap 4.0.0-alpha.6.1
Tautan GitHub:
https://github.com/parsmizban/RTL-Bootstrap
terima kasih parsmizban.com untuk membuat dan berbagi.
Saya menemukan ini sangat membantu, periksa: http://cdnjs.com/libraries/bootstrap-rtl
Jika Anda menginginkan dukungan Bootstrap 3 untuk RTL dan LTR di situs Anda, Anda dapat memodifikasi aturan CSS "dengan cepat", yang dilampirkan di sini adalah fungsi, ini memodifikasi kelas utama untuk Bootstrap 3 seperti 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), ada lebih banyak kelas yang harus dimodifikasi tetapi saya hanya membutuhkan itu.
Yang perlu Anda lakukan hanyalah memanggil fungsi tersebut layout.setDirection('rtl')atau layout.setDirection('ltr')dan itu akan mengubah Aturan CSS untuk sistem grid Bootstrap 3.
Harus bekerja di semua browser (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;
}
}
}Anda dapat menggunakan proyek saya, saya membuat bootstrap 3 rtl dengan sass dan gulp sehingga Anda dapat menyesuaikannya dengan mudah https://github.com/z-avanes/bootstrap3-rtl
Kami Mengumumkan AryaBootstrap ,
Versi terakhir didasarkan pada bootstrap 4.3.1
AryaBootstrap adalah bootstrap dengan dukungan penyelarasan tata letak ganda dan, digunakan untuk desain web LTR dan RTL.
tambahkan "dir" ke html, itulah satu-satunya tindakan yang perlu Anda lakukan.
Lihat Situs AryaBootstrap di: http://abs.aryavandidad.com/
AryaBootstrap di GitHub: https://github.com/mRizvandi/AryaBootstrap