html - Bootstrap - good practice for multilingual 2 directions support? -
i'm building small website both in english (ltr) , hebrew (rtl).
the website uses same code base, , changes captions according language being displayed.
when english user enters site should see content left right. lets have image text next - image on left , text on right.
when hebrew user enters should see image on right , text it's left.
is there acceptable way doing in bootstrap without having write same html twice , without overriding bootstrap css classes?
if attach js language checkbox, add/remove pull-right
class elements want move:
example: 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>
just watch out how pull-right
affects other content comes afterward - prepared add <div class="clearfix"></div>
after blocks of moving content necessary.
Comments
Post a Comment