从右到左支持Twitter引导3

There have been questions about this before: Twitter Bootstrap CSS that support from RTL languages

以前也有过这样的问题:Twitter引导CSS支持RTL语言。

But all the answers are good for Bootstrap 2.x

但是所有的答案都适用于Bootstrap 2.x

I'm working on a project that is in Arabic (rtl), and I need Bootstrap 3.x right to left.

我正在做一个阿拉伯语(rtl)的项目，我需要Bootstrap 3。x右到左。

Does anybody know a fix for that?

有人知道解决方法吗?

9 个解决方案

#1

1. I highly recommend bootstrap-rtl. It is built over Bootstrap core, and rtl support is added as it is a bootstrap theme. This would make your code more maintainable as you can always update your core bootstrap files. CDN

   我强烈推荐bootstrap-rtl。它构建在引导核心之上，rtl支持作为引导主题添加。这将使代码更易于维护，因为您始终可以更新核心引导文件。CDN

2. Another option to use this stand-alone library, It also comes with few awesome Arabic fonts.

   使用这个独立库的另一个选择是，它也有一些很棒的阿拉伯字体。

#2

You can find it here: RTL Bootstrap v3.2.0.

您可以在这里找到它:RTL引导v3.2.0。

#3

This is Another Project: www.nuget.org/packages/Twitter.Bootstrap.RTL

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

#4

Bootstrap Persian version of the site http://rbootstrap.ir/ Ver.2.3.2

Bootstrap波斯版本的网站http://rbootstrap。红外/ Ver.2.3.2

#5

in every version of bootstrap,you can do it manually

在每个版本的bootstrap中，您都可以手工完成。

1. set rtl direction to your body
2. 把rtl定位到你的身体
3. in bootstrap.css file, look for ".col-sm-9{float:left}" expression,change it to float:right
4. 在引导。css文件，查找。cole -sm-9{float:left}"表达式，将其更改为float:right

this do most things that you want for rtl

这可以完成大多数您想要的rtl

#6

I found this very helpful, check it: http://cdnjs.com/libraries/bootstrap-rtl

我发现这非常有用，请检查:http://cdnjs.com/libraries/bootstrap-rtl

#7

If you want Bootstrap 3 support for RTL and LTR on your site, you can modify CSS rules "on the fly", attached here is a function, it modifies the major classes for Bootstrap 3 like 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), there are many more classes to be modified but i needed only those.

如果你想要引导3支持RTL和LTR在你的网站上,您可以修改CSS规则“动态”,附件是一个函数,它的主要类修改引导3像坳- sm(xs | | md | lg)-(1 - 12),col - sm(xs | | md | lg)推- - - - - -(1 - 12),col - sm(xs | | md | lg)拉(1 - 12),col - sm(xs | | md | lg)抵消——(1 - 12),有更多的类被修改,但是我需要的只有那些。

All you need to do is call the function layout.setDirection('rtl') or layout.setDirection('ltr') and it will change the CSS Rules for Bootstrap 3 grid system.

只需调用函数layout.setDirection('rtl')或layout.setDirection('ltr')，它就会改变引导3网格系统的CSS规则。

Should work on all browsers (IE>=9).

应该在所有浏览器上工作(即>=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;
                }
            }
        }

#8

finally, I can find a new version for the right to left bootstrap. share here for use by all:

最后，我可以为从右到左的引导找到一个新版本。分享这里供大家使用:

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

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

GitHub link:

GitHub链接:

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

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

thank you parsmizban.com for creating and share.

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

#9

you can use my project i create bootstrap 3 rtl with sass and gulp so you can easely customize it https://github.com/z-avanes/bootstrap3-rtl

您可以使用我的项目i创建带sass和gulp的bootstrap3 rtl，以便轻松地定制它https://github.com/z-avanes/bootstrap3-rtl