从右到左支持 Bootstrap 3

以前也有人对此提出过疑问: 支持 RTL 语言的 Bootstrap CSS

但是对于 Bootstrap 2.x 来说，所有的答案都是好的

我正在做一个阿拉伯语(rtl)的项目，我需要 Bootstrap 3.x 从右到左。

有人知道怎么解决吗？

102174 次浏览
小开
最佳答案

  1. 我强烈推荐 引导-rtl 引导-rtl 引导-rtl 引导-rtl 引导-rtl 。它是在 Bootstrap 核心上构建的，并且添加了 rtl 支持，因为它是一个 Bootstrap 主题。这将使您的代码更易于维护，因为您可以随时更新核心引导程序文件。CDN

  2. 另一个选择使用这个 独立图书馆，它也来了几个可怕的阿拉伯文字体。

小开

这是另一个项目: Www.nuget.org/packages/twitter ，引导程序，RTL

小开

我发现这个很有用，检查它: http://cdnjs.com/libraries/bootstrap-rtl

小开

你可以在这里找到它: RTL Bootstrap v3.2.0。

小开

如果你想要 Bootstrap 3在你的站点上支持 RTL 和 LTR，你可以“动态”修改 CSS 规则，这里附带了一个函数，它修改了 Bootstrap 3的主要类，比如 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)-off- (1-12) ，还有很多类需要修改，但我只需要那些。

所有你需要做的就是调用函数 layout.setDirection('rtl')或 layout.setDirection('ltr')，它将改变引导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;
}
}
}
小开

引导波斯版本的站点 http://rbootstrap.ir/ Ver.2.3.2

小开

在每个版本的引导程序中，都可以手动完成

  1. 设置 rtl 方向到你的身体
  2. 在 bootstrap.css 文件中，查找“ . colsm-9{ float: left }”表达式，将其更改为 float: right

它可以做你想要的大部分事情

小开

你可以用我的项目 我创建引导3 rtl 与 sass 和咕噜，所以你可以很容易地定制它 Https://github.com/z-avanes/bootstrap3-rtl

小开

最后，我可以找到一个新版本的右至左 bootstrap。分享在这里供所有人使用:

Bootstrap-3-3-7-rtl 还有 RTL 引导程序4.0.0-字母6.1

GitHub 链接:

Https://github.com/parsmizban/rtl-bootstrap

感谢 parsmizban.com的创作和分享。

小开

我们宣布 AryaBootstrap,

The last version is based on bootstrap 4.3.1

AryaBootstrap 是一个引导程序，具有双重布局对齐支持，使用 网页设计。

将“ dir”添加到 html，这是您需要做的唯一操作。

点击 AryaBootstrap 网站: Http://abs.aryavandidad.com/

GitHub 上的 AryaBootstrap: https://github.com/mRizvandi/AryaBootstrap


提交答案