123

これについては以前に質問がありました: RTL 言語をサポートする Twitter Bootstrap CSS

しかし、すべての答えは Bootstrap 2.x に適しています。

私はアラビア語 (rtl) のプロジェクトに取り組んでおり、右から左に Bootstrap 3.x が必要です。

誰かがそれに対する修正を知っていますか?

4

10 に答える 10

168

  1. bootstrap-rtlを強くお勧めします。これは Bootstrap コア上に構築されており、bootstrap テーマであるため rtl サポートが追加されています。これにより、コア ブートストラップ ファイルをいつでも更新できるため、コードの保守性が向上します。CDN

  2. このスタンドアロン ライブラリを使用するもう 1 つのオプションです。素晴らしいアラビア語フォントもいくつか付属しています。

于 2013-11-01T16:11:51.873 に答える
8

Bootstrap サイトのペルシャ語版http://rbootstrap.ir/ Ver.2.3.2

于 2015-06-22T19:30:57.050 に答える
6

これは別のプロジェクトです: www.nuget.org/packages/Twitter.Bootstrap.RTL

于 2014-02-03T22:23:36.197 に答える
3

サイトで RTL および LTR の Bootstrap 3 サポートが必要な場合は、CSS ルールを「その場で」変更できます。ここに関数が添付されています。これは、col-(xs|sm|md|lg のように Bootstrap 3 の主要なクラスを変更します。 )-(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')orlayout.setDirection('ltr')を呼び出すだけで、Bootstrap 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;
                }
            }
        }
于 2015-05-30T19:57:39.663 に答える
0

AryaBootstrapを発表します。

最後のバージョンは、ブートストラップ 4.3.1 に基づいています。

AryaBootstrap は、デュアル レイアウト アライン サポートを備えたブートストラップで、LTR および RTL Web デザインに使用されます。

「dir」を html に追加します。これが、実行する必要がある唯一のアクションです。

次の AryaBootstrap Web サイトをチェックしてください: http://abs.aryavandidad.com/

GitHub の AryaBootstrap: https://github.com/mRizvandi/AryaBootstrap

于 2019-02-28T08:02:51.237 に答える