Supporto da destra a sinistra per Twitter Bootstrap 3

Ci sono state domande su questo prima: Twitter Bootstrap CSS che supporta i linguaggi RTL

Ma tutte le risposte sono buone per Bootstrap 2.x

Sto lavorando a un progetto in arabo (rtl) e ho bisogno di Bootstrap 3.x da destra a sinistra.

Qualcuno sa una soluzione per questo?

1. Consiglio vivamente bootstrap-rtl . È costruito sul core Bootstrap e viene aggiunto il supporto rtl in quanto è un tema bootstrap. Ciò renderebbe il tuo codice più manutenibile poiché puoi sempre aggiornare i tuoi file di bootstrap principali. CDN

2. Un'altra opzione per utilizzare questa libreria autonoma , include anche alcuni fantastici caratteri arabi.

Puoi trovarlo qui: RTL Bootstrap v3.2.0 .

Bootstrap versione persiana del sito http://rbootstrap.ir/ Ver.2.3.2

Questo è un altro progetto: www.nuget.org/packages/Twitter.Bootstrap.RTL

in ogni versione di bootstrap, puoi farlo manualmente

1. imposta la direzione rtl sul tuo corpo
2. nel file bootstrap.css, cerca l'espressione ".col-sm-9 {float: left}", cambiala in float: right

questo fa la maggior parte delle cose che vuoi per rtl

finalmente posso trovare una nuova versione per il bootstrap da destra a sinistra. condividi qui per l'utilizzo da parte di tutti:

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

Collegamento GitHub:

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

grazie parsmizban.com per la creazione e la condivisione.

L'ho trovato molto utile, controlla: http://cdnjs.com/libraries/bootstrap-rtl

Se vuoi il supporto Bootstrap 3 per RTL e LTR sul tuo sito, puoi modificare le regole CSS "al volo", qui allegata c'è una funzione, che modifica le classi principali per Bootstrap 3 come 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), ci sono molte altre classi da modificare ma mi servivano solo quelle.

Tutto quello che devi fare è chiamare la funzione layout.setDirection('rtl')olayout.setDirection('ltr') e cambierà le regole CSS per il sistema a griglia Bootstrap 3.

Dovrebbe funzionare su tutti i browser (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;
                }
            }
        }

puoi usare il mio progetto creo bootstrap 3 rtl con sass e gulp così puoi personalizzarlo facilmente https://github.com/z-avanes/bootstrap3-rtl

Annunciamo AryaBootstrap ,

L'ultima versione è basata su bootstrap 4.3.1

AryaBootstrap è un bootstrap con supporto per l'allineamento del doppio layout e, utilizzato per il web design LTR e RTL.

aggiungi "dir" a html, questa è l'unica azione che devi fare.

Controlla il sito web di AryaBootstrap su: http://abs.aryavandidad.com/

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