De la dreapta la Stânga suport pentru Twitter Bootstrap 3

Au fost întrebări despre acest lucru înainte: https://stackoverflow.com/questions/10545594/twitter-bootstrap-css-that-support-from-rtl-languages

Dar toate raspunsurile sunt bune pentru Bootstrap 2.x

Am'm lucrează la un proiect care este în limba arabă (rtl), și am nevoie de Bootstrap 3.x de la dreapta la stânga.

Stie cineva un fix pentru asta?

Community
Întrebarea editată 23 mai 2017 в 12:34
Programare
html5 css twitter-bootstrap-3 twitter-bootstrap
1 noiembrie 2013 в 4:05
Fără vizualizări
Soluția

  1. Am foarte recomanda bootstrap-rtl. Acesta este construit pe Bootstrap core și suport rtl este adăugat ca este o temă bootstrap. Acest lucru ar face codul întreținut mai mult ca tine poate actualiza mereu bootstrap de bază fișiere. CDN

  2. O altă opțiune pentru a utiliza această stand-alone biblioteca, de asemenea, vine cu câteva awesome fonturi arabe.

Hakan Fıstık
Răspuns editat 16 ianuarie 2017 в 12:06
Comentarii (0)

Bootstrap persan versiune a site-ului http://rbootstrap.ir/ Ver.2.3.2

Comentarii (0)

Acesta este un Alt Proiect: www.nuget.org/packages/Twitter.Bootstrap.RTL

Comentarii (0)

în fiecare versiune de bootstrap,puteți face manual

  1. set rtl direcția pentru corpul tau
  2. în bootstrap.fișier css, uita-te pentru ".col-sm-9{float:left}" de exprimare,schimba-l la float:right

acest lucru face cele mai multe lucruri pe care doriți pentru rtl

Comentarii (1)

în cele din urmă, am putea gasi o noua versiune de la dreapta la stânga bootstrap. cota de aici pentru utilizare de către toți:

bootstrap-3-3-7-rtl și RTL Bootstrap 4.0.0-alfa.6.1

Link-ul GitHub:

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

multumesc parsmizban.com pentru a crea și partaja.

Comentarii (1)

Dacă doriți Bootstrap 3 suport pentru RTL și LTR pe site-ul dvs., puteți modifica reguli CSS "pe zbor", atașat aici este o funcție, modifică clase majore pentru procesul de Bootstrap 3 col-(xs|sm|md|lg)-(1-12), col-(xs|sm|md|lg)-push-(1-12), col-(xs|sm|md|lg)-trage-(1-12), col-(xs|sm|md|lg)-offset(1-12), sunt mult mai multe clase de a fi modificate, dar am nevoie doar acele.

Tot ce trebuie să faceți este să sunați la funcția layout.setDirection('rtl') " sau " layout.setDirection('l')` și se va schimba Reguli CSS pentru Bootstrap 3 sistem grilă.

Ar trebui să funcționeze pe toate browserele (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;
                }
            }
        }
Comentarii (0)

Am găsit acest lucru foarte util, verifica: http://cdnjs.com/libraries/bootstrap-rtl

Comentarii (0)

Anunțăm AryaBootstrap,

Ultima versiune este bazat pe bootstrap 4.3.1

AryaBootstrap este un bootstrap cu dublu aspect alinia sprijin și, folosit pentru LTR și RTL web design.

adăugați "dir" pentru a html, asta e singura acțiune ce trebuie sa faci.

Checkout AryaBootstrap-Ul la: http://abs.aryavandidad.com/

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

Comentarii (0)

puteți folosi proiectul meu am crea bootstrap 3 rtl cu sass și înghițitură astfel încât să puteți easely personaliza https://github.com/z-avanes/bootstrap3-rtl

Comentarii (1)