Dukungan Kanan ke Kiri untuk Twitter Bootstrap 3

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?

1. 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

2. 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

1. atur arah rtl ke tubuh Anda
2. di file bootstrap.css cari ekspresi ".col-sm-9 {float: left}", ubah ke float: right

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