Add RTL (right to left) support to 3.0.0-wip #6423
Conversation
|
Thanks for this, but I still want to see this with a component-by-component approach, not an all-in-one like this. Please pick one, single component and start with that first. The idea isn't to do all at once, but to figure out the guidelines of RTL, it's use, and best practices with a single component first, then expand that to the others. Let's start small and take it from there. |
|
You are welcome @mdo, but I can not understand your meaning by component-by-component. The .rtl .progress .bar {
float: right;
}So if any ancestor of a progress bar component has <!-- left to right -->
<div>
<div class="progress">
<div class="bar" style="width: 60%;"></div>
</div>
</div>
<!-- right to left -->
<div class="rtl">
<div class="progress">
<div class="bar" style="width: 60%;"></div>
</div>
</div>I think this is very simple and a single paragraph instruction would help developers to use RTL support for all components. |
|
I understand that you did all the components and docs here. What I'm saying is I'd like to see a single component first in an isolated pull request, and then do the others as we go. |
|
Oh, I got it. Unfortunately I don't have time right now, to add items step by step by the time. If someone decide to work on RTL I always will be available for help. |
|
Looks like @malekpour has put some time into this and reached his or her limit. In the meantime, it would be a shame for this work to languish. @mdo, if you don't want to merge this whole patch, could you just pull the parts of it that you want? |
|
X-Ref: #175 |
|
finally, how we can use RTL in bootstrap3? :D |
As we discussed on pull request #6409, RTL added in a separate
rtl.lessfile on branch 3.0.0-wip.All components supported. The page
rtl.html, loads Bootstrap documentation.mustachetemplates on the fly and renders RTL/LTR contents correctly without any modification.Tested and worked with Chrome 23, FireFox 17 and IE10.
Developers can add RTL layout support to their current Bootstrap websites, simply by adding
.rtlCSS class to any HTML element. e.g:or dynamically
Another class,
.mirroris useful to change direction of arrows and font icons. See its functionality in 'Icons by Glyphicons' section of the demo.Online Demo (buttons on navigation bar added to compare RTL/LTR layouts, F2 [RTL/LTR] and F3 [Mirror/Normal] keys also works and when modal popup is visible only hot keys will work)