динамически изменять направление сетки начальной загрузки (букв в rtl или ревери)
Мы делаем сайт, который будет работать как на Rtl, так и на Ltr (En и Fa).
Мы хотим использовать загрузчик твитера (3. *).
Наш MVC сделан на php.
Можно ли использовать начальную загрузку, для которой порядок потоков сетки равен Rtl, если язык сайта fa, и использовать Ltr, когда язык английский?
От язык , Я имею в виду это: www.example.com/en или www.example.com/fa
когда это / en, мы должны использовать начальную загрузку, которая является Ltr (слева направо)
когда это / fa, мы должны использовать начальную загрузку, которая является Rtl (справа налево)
Я знаю, что есть некоторые темы начальной загрузки, которые я могу использовать, это Rtl, но как я могу использовать и rtl, и ltr и динамически изменять их? (может быть, после обновления страницы направление сайта переходит 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)-offset-(1-12)Есть еще много классов, которые нужно изменить, но мне нужны были только те.
Все, что вам нужно сделать, это вызвать функцию layout.setDirection('rtl') или же layout.setDirection('ltr') и это изменит правила 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;
}
}
}
Другие решения
Просто поменяй float:left; в float:right; в сетке, когда html тег имеет dir='rtl',
Вот CSS:
html[dir="rtl"] .row > .col-xs-1, html[dir="rtl"] .row > .col-xs-2, html[dir="rtl"] .row > .col-xs-3, html[dir="rtl"] .row > .col-xs-4, html[dir="rtl"] .row > .col-xs-5, html[dir="rtl"] .row > .col-xs-6, html[dir="rtl"] .row > .col-xs-7, html[dir="rtl"] .row > .col-xs-8, html[dir="rtl"] .row > .col-xs-9, html[dir="rtl"] .row > .col-xs-10, html[dir="rtl"] .row > .col-xs-11, html[dir="rtl"] .row > .col-xs-12 {
float: right;
}
@media (min-width: 768px) {
html[dir="rtl"] .row > .col-sm-1, html[dir="rtl"] .row > .col-sm-2, html[dir="rtl"] .row > .col-sm-3, html[dir="rtl"] .row > .col-sm-4, html[dir="rtl"] .row > .col-sm-5, html[dir="rtl"] .row > .col-sm-6, html[dir="rtl"] .row > .col-sm-7, html[dir="rtl"] .row > .col-sm-8, html[dir="rtl"] .row > .col-sm-9, html[dir="rtl"] .row > .col-sm-10, html[dir="rtl"] .row > .col-sm-11, html[dir="rtl"] .row > .col-sm-12 {
float: right;
}
}
@media (min-width: 992px) {
html[dir="rtl"] .row > .col-md-1, html[dir="rtl"] .row > .col-md-2, html[dir="rtl"] .row > .col-md-3, html[dir="rtl"] .row > .col-md-4, html[dir="rtl"] .row > .col-md-5, html[dir="rtl"] .row > .col-md-6, html[dir="rtl"] .row > .col-md-7, html[dir="rtl"] .row > .col-md-8, html[dir="rtl"] .row > .col-md-9, html[dir="rtl"] .row > .col-md-10, html[dir="rtl"] .row > .col-md-11, html[dir="rtl"] .row > .col-md-12 {
float: right;
}
}
@media (min-width: 1170px) {
html[dir="rtl"] .row > .col-lg-1, html[dir="rtl"] .row > .col-lg-2, html[dir="rtl"] .row > .col-lg-3, html[dir="rtl"] .row > .col-lg-4, html[dir="rtl"] .row > .col-lg-5, html[dir="rtl"] .row > .col-lg-6, html[dir="rtl"] .row > .col-lg-7, html[dir="rtl"] .row > .col-lg-8, html[dir="rtl"] .row > .col-lg-9, html[dir="rtl"] .row > .col-lg-10, html[dir="rtl"] .row > .col-lg-11, html[dir="rtl"] .row > .col-lg-12 {
float: right;
}
}
Вы пытались просто перевернуть все поплавок: слева; плавать: прямо на основных объектах сетки и выступать в роли специализированного CSS-файла / переопределения Rtl?
Я дам вам несколько советов по написанию сценариев на JavaScript до тех пор, пока не появится встроенная поддержка в функциональных версиях платформы Bootstrap.
Вы можете использовать функции «тяни и толкай» в сетке в Tweeter Bootstrap. для изменения порядка сетки. вот пример:
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
Вы можете создать скрипт для проверки языка и добавить соответствующие классы push и pull в таблицы.