从右到左支持Twitter Bootstrap 3

119

以前对此有疑问：支持RTL语言的Twitter Bootstrap CSS

但是所有答案对于Bootstrap 2.x都是有好处的

我正在使用阿拉伯语（rtl）项目，并且我需要从右到左引导3.x。

有人知道解决办法吗？

— 比绍伊
source

165

我强烈建议bootstrap-rtl。它是基于Bootstrap核心构建的，并且由于它是引导主题而添加了rtl支持。这将使您的代码更具可维护性，因为您始终可以更新核心引导程序文件。CDN
使用此独立库的另一种选择，它还带有一些很棒的阿拉伯字体。

— 穆罕默德·雷达（Muhammad Reda）
source

11

您可以在这里找到它：RTL Bootstrap v3.2.0。

— 穆罕默德·卡卡蒂（Mohamad Kaakati）
source

8

网站的Bootstrap波斯版本http://rbootstrap.ir/ Ver.2.3.2

— 马马达先生
source

6

这是另一个项目： www.nuget.org/packages/Twitter.Bootstrap.RTL

— 用户197508
source

6

在每个版本的引导程序中，您都可以手动执行

将rtl方向设定为您的身体
在bootstrap.css文件中，查找“ .col-sm-9 {float：left}”表达式，将其更改为float：right

这可以为rtl做大多数您想要的事情

— Mohsen.Sharify
source

1

这非常有帮助

— Nick M

6

最后，我可以找到从右到左引导程序的新版本。分享给所有人使用：

bootstrap-3-3-7-rtl和RTL Bootstrap 4.0.0-alpha.6.1

GitHub链接：

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

感谢parsmizban.com的创建和分享。

— 哈米德·纳吉普尔
source

这是最好的！

— Wazime，

3

我发现这非常有帮助，请检查一下：http : //cdnjs.com/libraries/bootstrap-rtl

— 奥马尔·阿尔哈迈德（Omar Alahmed）
source

3

如果您希望站点上的Bootstrap 3支持RTL和LTR，则可以“即时”修改CSS规则，此处附带一个函数，它修改了Bootstrap 3的主要类，例如col-（xs | sm | md | lg ）-（1-12），col-（xs | sm | md | lg）-推-（1-12），col-（xs | sm | md | lg）-pull-（1-12），col- （xs | sm | md | lg）-offset-（1-12），还有很多要修改的类，但我只需要那些。

所有你需要做的就是调用函数layout.setDirection('rtl')或者layout.setDirection('ltr')它将改变自举3网格系统的CSS规则。

应该适用于所有浏览器（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;
                }
            }
        }

— 埃尔达
source

0

您可以使用我的项目我用sass和gulp创建bootstrap 3 rtl，因此可以轻松自定义它 https://github.com/z-avanes/bootstrap3-rtl

— 扎雷
source

“很好地引入了代码的集成部分，而不仅仅是复制链接

— Lorenzo Belfanti

0

我们宣布AryaBootstrap，

最新版本基于引导程序4.3.1

AryaBootstrap是具有双重布局对齐支持的引导程序，用于LTR和RTL网页设计。

在HTML中添加“ dir”，这是您唯一需要执行的操作。

在以下网址查看AryaBootstrap网站：http ://abs.aryavandidad.com/

GitHub上的AryaBootstrap：https：//github.com/mRizvandi/AryaBootstrap

— 里兹万迪
source