การสนับสนุนจากขวาไปซ้ายสำหรับ Twitter Bootstrap 3

มีคำถามเกี่ยวกับเรื่องนี้มาก่อน: Twitter Bootstrap CSS ที่รองรับภาษา RTL

แต่คำตอบทั้งหมดนั้นดีสำหรับ Bootstrap 2.x

ฉันกำลังทำโปรเจ็กต์ที่เป็นภาษาอาหรับ (rtl) และฉันต้องการ Bootstrap 3.x จากขวาไปซ้าย

มีใครรู้วิธีแก้ไขไหม

1. ผมขอแนะนำให้บูต-RTL มันถูกสร้างขึ้นบน Bootstrap core และมีการเพิ่มการรองรับ rtl เนื่องจากเป็นธีม bootstrap สิ่งนี้จะทำให้โค้ดของคุณสามารถบำรุงรักษาได้มากขึ้นเนื่องจากคุณสามารถอัปเดตไฟล์ bootstrap หลักได้ตลอดเวลา CDN

2. อีกทางเลือกหนึ่งในการใช้ไลบรารีแบบสแตนด์อะโลนนี้นอกจากนี้ยังมาพร้อมกับแบบอักษรภาษาอาหรับที่ยอดเยี่ยม

คุณสามารถค้นหาได้ที่นี่: RTL Bootstrap v3.2.0

Bootstrap เวอร์ชันเปอร์เซียของไซต์http://rbootstrap.ir/ Ver.2.3.2

นี่คือโครงการอื่น: www.nuget.org/packages/Twitter.Bootstrap.RTL

ใน bootstrap ทุกเวอร์ชันคุณสามารถทำได้ด้วยตนเอง

1. กำหนดทิศทาง rtl ให้กับร่างกายของคุณ
2. ในไฟล์ bootstrap.css ให้มองหานิพจน์ ".col-sm-9 {float: left}" เปลี่ยนเป็น float: right

สิ่งนี้ทำสิ่งส่วนใหญ่ที่คุณต้องการสำหรับ rtl

ในที่สุดฉันก็พบเวอร์ชั่นใหม่สำหรับ bootstrap ขวาไปซ้าย แบ่งปันที่นี่เพื่อใช้โดยทุกคน:

bootstrap-3-3-7-rtl และ RTL Bootstrap 4.0.0-alpha.6.1

ลิงก์ GitHub:

https://github.com/parsmizban/RTL-Bootstrap

ขอบคุณparsmizban.comสำหรับการสร้างและแบ่งปัน

ฉันพบว่าสิ่งนี้มีประโยชน์มากโปรดตรวจสอบ: http://cdnjs.com/libraries/bootstrap-rtl

หากคุณต้องการสนับสนุน Bootstrap 3 สำหรับ RTL และ LTR บนไซต์ของคุณคุณสามารถแก้ไขกฎ CSS "ได้ทันที" ซึ่งเป็นฟังก์ชันที่แนบมานี้จะปรับเปลี่ยนคลาสหลักสำหรับ Bootstrap 3 เช่น 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) มีคลาสอื่น ๆ อีกมากมายที่ต้องแก้ไข แต่ฉันต้องการเฉพาะคลาสนั้น

สิ่งที่คุณต้องทำคือเรียกใช้ฟังก์ชันlayout.setDirection('rtl')หรือlayout.setDirection('ltr')จะเปลี่ยนกฎ CSS สำหรับระบบกริด Bootstrap 3

ควรทำงานบนเบราว์เซอร์ทั้งหมด (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;
                }
            }
        }

คุณสามารถใช้โครงการของฉันฉันสร้าง bootstrap 3 rtl ด้วย sass และ gulp เพื่อให้คุณปรับแต่งได้อย่างง่ายดาย https://github.com/z-avanes/bootstrap3-rtl

เราประกาศAryaBootstrap ,

เวอร์ชันล่าสุดใช้ bootstrap 4.3.1

AryaBootstrap เป็น bootstrap ที่มีการสนับสนุนการจัดวางโครงร่างคู่และใช้สำหรับการออกแบบเว็บ LTR และ RTL

เพิ่ม "dir" ลงใน html นั่นคือการกระทำเดียวที่คุณต้องทำ

ชำระเงินที่เว็บไซต์ AryaBootstrap ที่: http://abs.aryavandidad.com/

AryaBootstrap ที่ GitHub: https://github.com/mRizvandi/AryaBootstrap