Kanan ke Kiri dukungan untuk Twitter Bootstrap 3
Ada pertanyaan tentang ini sebelumnya: https://stackoverflow.com/questions/10545594/twitter-bootstrap-css-that-support-from-rtl-languages
Tapi semua jawaban yang baik untuk Bootstrap 2.x
I'm bekerja pada sebuah proyek yang dalam bahasa arab (rtl), dan saya perlu Bootstrap 3.x kanan ke kiri.
Apakah ada yang tahu untuk memperbaiki itu?
-
Saya sangat merekomendasikan bootstrap-rtl. Hal ini dibangun di atas Bootstrap core, dan dukungan rtl ditambahkan seperti itu adalah tema bootstrap. Ini akan membuat kode anda lebih banyak dipelihara sebagai anda selalu dapat memperbarui core bootstrap file. CDN
-
Pilihan lain untuk menggunakan ini stand-alone perpustakaan, Hal ini juga dilengkapi dengan beberapa awesome font Arabic.
dalam setiap versi dari bootstrap,anda dapat melakukannya secara manual
- set rtl arah untuk tubuh anda
- di bootstrap.file css, mencari ".col-sm-9{float:left}" ekspresi,perubahan itu untuk float:right
ini melakukan sebagian besar hal-hal yang anda inginkan untuk rtl
akhirnya, saya dapat menemukan versi baru untuk kanan ke kiri bootstrap. berbagi di sini untuk digunakan oleh semua:
bootstrap-3-3-7-rtl dan RTL Bootstrap 4.0.0-alpha.6.1
GitHub link:
https://github.com/parsmizban/RTL-Bootstrap
terima kasih parsmizban.com untuk membuat dan berbagi.
Jika anda ingin Bootstrap 3 dukungan untuk RTL LTR dan di situs anda, anda dapat mengubah aturan CSS "on the fly", yang terpasang di sini adalah fungsi, 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)-tarik-(1-12), col-(xs|sm|md|lg)-offset-(1-12), ada lebih banyak kelas yang akan dimodifikasi tapi saya hanya membutuhkan orang-orang.
Semua yang perlu anda lakukan adalah memanggil fungsi tata letak.setDirection('rtl') atau tata letak.setDirection('ltr') dan itu akan mengubah Aturan CSS untuk Bootstrap 3 sistem grid.
Harus bekerja pada 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;
}
}
}
Kami Mengumumkan AryaBootstrap,
Versi terakhir didasarkan pada bootstrap 4.3.1
AryaBootstrap adalah bootstrap dengan dual tata letak menyelaraskan dukungan dan digunakan untuk LTR dan RTL desain web.
tambahkan "dir" untuk html, thats satu-satunya tindakan yang perlu anda lakukan.
Pelajari AryaBootstrap Website di: http://abs.aryavandidad.com/
AryaBootstrap di GitHub: https://github.com/mRizvandi/AryaBootstrap
anda dapat menggunakan proyek saya saya membuat bootstrap 3 rtl dengan sass dan menelan sehingga anda dapat easely menyesuaikan https://github.com/z-avanes/bootstrap3-rtl
