web-dev-qa-db-ja.com

Twitterの右から左へのサポートBootstrap 3

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

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

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

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

csshtml5twitter-bootstraptwitter-bootstrap-3
118
Bishoy

  1. bootstrap-rtlを強くお勧めします。 Bootstrapコア上に構築され、bootstrapテーマであるため、rtlサポートが追加されます。これにより、コアbootstrapファイルを常に更新できるため、コードのメンテナンス性が向上します。 CDN

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

164
Muhammad Reda

ここで見つけることができます： RTL Bootstrap v3.2. 。

11
Mohamad Kaakati

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

6
user197508

サイトのブートストラップペルシア語バージョン http://rbootstrap.ir/ Ver.2.3.2

6
Mr.Mamadkhan

ブートストラップのすべてのバージョンで、手動で実行できます

  1. あなたの体にRTL方向を設定します
  2. bootstrap.cssファイルで、「。col-sm-9 {float：left}」式を探し、float：rightに変更します

これは、RTLに必要なほとんどのことを行います

5
Mohsen.Sharify

最後に、右から左へのブートストラップ用の新しいバージョンを見つけることができます。すべての人が使用できるようにここで共有します

bootstrap-3-3-7-rtlおよびRTL Bootstrap 4.0.0-alpha.6.1

GitHubリンク：

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

ありがとう parsmizban.com 作成および共有してください。

5
Hamid Naghipour

サイトでRTLとLTRのBootstrap 3サポートが必要な場合は、CSSルールを「オンザフライ」で変更できます。ここに添付されている関数は、Bootstrapの主要クラスを変更します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')を呼び出すだけで、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;
                }
            }
        }
3
Eldar

これは非常に役立つことがわかったので、確認してください： http://cdnjs.com/libraries/bootstrap-rtl

3
Omar Alahmed

私のプロジェクトを使用して、bootstrap 3 RTLをsassとgulpで作成して、簡単にカスタマイズできるようにします https://github.com/z-avanes/bootstrap3-rtl

0
zareh

AryaBootstrap、

最後のバージョンはbootstrap 4.3.1に基づいています

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

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

AryaBootstrapのWebサイトをチェックアウトします： http://abs.aryavandidad.com/

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

0
mRizvandi