Question

我们正在创建一个既可以使用Rtl又可以使用Ltr（En和Fa）的网站。

我们想使用tweeter bootstrap（3. *）。

我们的mvc是基于php制作的。

是否可以使用bootstrap，如果网站语言是fa，它的网格流顺序是Rtl，当语言是英语时使用Ltr？

通过语言，我的意思是：www.example.com/en或www.example.com/fa

当它是/ en时，我们必须使用引导程序，即Ltr（从左到右）

当它是/ fa时，我们必须使用Rstl（从右到左）的引导程序

我知道有一些我可以使用的引导程序主题是Rtl，但我如何同时使用rtl和ltr并在其中动态更改？（可能在页面刷新站点方向变为Rtl或Ltr !!）？

Answer 1

你可以“动态”修改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)，还有更多的类需要修改，但我只需要那些。< / p>

您需要做的只是调用函数layout.setDirection('rtl')或layout.setDirection('ltr')，它将更改CSS规则。

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

Answer 2

当float:left;代码具有float:right;时，只需将html更改为网格系统中的dir='rtl'。

这是css：

html[dir="rtl"] .row > .col-xs-1, html[dir="rtl"] .row > .col-xs-2, html[dir="rtl"] .row > .col-xs-3, html[dir="rtl"] .row > .col-xs-4, html[dir="rtl"] .row > .col-xs-5, html[dir="rtl"] .row > .col-xs-6, html[dir="rtl"] .row > .col-xs-7, html[dir="rtl"] .row > .col-xs-8, html[dir="rtl"] .row > .col-xs-9, html[dir="rtl"] .row > .col-xs-10, html[dir="rtl"] .row > .col-xs-11, html[dir="rtl"] .row > .col-xs-12 {
  float: right;
}
@media (min-width: 768px) {
  html[dir="rtl"] .row > .col-sm-1, html[dir="rtl"] .row > .col-sm-2, html[dir="rtl"] .row > .col-sm-3, html[dir="rtl"] .row > .col-sm-4, html[dir="rtl"] .row > .col-sm-5, html[dir="rtl"] .row > .col-sm-6, html[dir="rtl"] .row > .col-sm-7, html[dir="rtl"] .row > .col-sm-8, html[dir="rtl"] .row > .col-sm-9, html[dir="rtl"] .row > .col-sm-10, html[dir="rtl"] .row > .col-sm-11, html[dir="rtl"] .row > .col-sm-12 {
    float: right;
  }
}
@media (min-width: 992px) {
  html[dir="rtl"] .row > .col-md-1, html[dir="rtl"] .row > .col-md-2, html[dir="rtl"] .row > .col-md-3, html[dir="rtl"] .row > .col-md-4, html[dir="rtl"] .row > .col-md-5, html[dir="rtl"] .row > .col-md-6, html[dir="rtl"] .row > .col-md-7, html[dir="rtl"] .row > .col-md-8, html[dir="rtl"] .row > .col-md-9, html[dir="rtl"] .row > .col-md-10, html[dir="rtl"] .row > .col-md-11, html[dir="rtl"] .row > .col-md-12 {
    float: right;
  }
}
@media (min-width: 1170px) {
  html[dir="rtl"] .row > .col-lg-1, html[dir="rtl"] .row > .col-lg-2, html[dir="rtl"] .row > .col-lg-3, html[dir="rtl"] .row > .col-lg-4, html[dir="rtl"] .row > .col-lg-5, html[dir="rtl"] .row > .col-lg-6, html[dir="rtl"] .row > .col-lg-7, html[dir="rtl"] .row > .col-lg-8, html[dir="rtl"] .row > .col-lg-9, html[dir="rtl"] .row > .col-lg-10, html[dir="rtl"] .row > .col-lg-11, html[dir="rtl"] .row > .col-lg-12 {
    float: right;
  }
}

Answer 3

你试过翻转所有的浮动：左;浮动：在主要网格实体上，并作为Rtl专用CSS文件/覆盖？

Answer 4

我会给你一些提示，用JavaScript编写脚本，直到Bootstrap框架的特性版本中的原生支持。您可以在Tweeter Bootstrap中使用网格系统中的拉动和推动功能。用于改变网格的顺序。这是一个例子：

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

您可以创建一个脚本来检查语言，并为网格添加适当的推拉类。

动态更改引导网格方向（ltr到rtl或反向）

4 个答案: