Bootstrap -多语言2方向支持的良好实践

Question

我正在建立一个小网站，这将是在英语(LTR)和希伯来语(RTL)。

该网站使用相同的代码库，并且仅根据显示的语言更改标题。

当英语用户进入网站时，他应该从左到右看到内容。假设我有一张图片，旁边有文字，那么图片在左边，文字在右边。

当希伯来语用户进入时，他应该看到右边的图像和左边的文本。

是否有一种可接受的方式在引导中这样做，而不必编写相同的html两次，而不重写引导css类?

Answer 1

如果您将一些js附加到语言复选框，您可以添加/删除pull-right类到您想要移动的元素:

示例:http://www.bootply.com/FZMciVLVBL

JS

$('input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $('div.ltr').addClass("pull-right");
    } else {
        $('div.ltr').removeClass("pull-right");
    }
});

HTML

<div class="col-xs-6 ltr">
  <div class="thumbnail">
    <img src="http://placehold.it/500x300">
  </div>
</div>
<div class="col-xs-6">
  <p>Caption 1...</p>
</div>

只需注意pull-right如何影响随后的其他内容-准备在必要的移动内容块后添加<div class="clearfix"></div>。