以前にも質問がありました。 https://stackoverflow.com/questions/10545594/twitter-bootstrap-css-that-support-from-rtl-languages
しかし、すべての回答はBootstrap 2.xに適しています。
私はアラビア語(rtl)のプロジェクトに取り組んでおり、Bootstrap 3.xの右から左が必要です。
どなたか修正方法をご存じないでしょうか?
1.お勧めは bootstrap-rtl です。これはBootstrapコアの上に構築されており、Bootstrapテーマであるためrtlのサポートが追加されています。これにより、常にコアのBootstrapファイルを更新することができるので、コードの保守性が高まります。CDNです。
2.また、このスタンドアロン・ライブラリを使用する方法もありますが、いくつかの素晴らしいアラビア語フォントが付属しています。
最後に、右から左のブートストラップの新しいバージョンを見つけることができます。 ここで共有して、すべての人が使用してください。
bootstrap-3-3-7-rtl。 と。 RTLブートストラップ4.0.0-alpha.6.1。
GitHubリンク:
https://github.com/parsmizban/RTL-Bootstrap。
parsmizban.comを作成して共有していただきありがとうございます。
Bootstrap 3をサイトでRTLおよびLTRのサポートにしたい場合。, CSSルールとクォートを変更できます。;オンザフライ&クォート。; ここに添付されている機能です。, bootstrap 3の主要なクラスをcol-のように変更します。(xs | sm | md | lg。)-。(1-12。) col-。(xs | sm | md | lg。)-押す-。(1-12。) col-。(xs | sm | md | lg。)-プル-。(1-12。) col-。(xs | sm | md | lg。)-オフセット-。(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;
}
}
}
AryaBootstrap を発表します。
最後のバージョンはブートストラップ4.3.1 に基づいています。
AryaBootstrapは、デュアルレイアウトのアラインサポートを備えたブートストラップで、使用されています。 LTRおよびRTL Webデザイン用。
htmlに「dir」を追加します。これは、実行する必要がある唯一のアクションです。
AryaBootstrap Webサイトをチェックしてください。 http://abs.aryavandidad.com/。
GitHubのAryaBootstrap:https://github.com/mRizvandi/AryaBootstrap。