Про це вже виникали питання: Twitter Bootstrap CSS, який підтримує мови RTL
Але всі відповіді хороші для Bootstrap 2.x
Я працюю над проектом, який є арабською мовою (rtl), і мені потрібен Bootstrap 3.x справа наліво.
Хтось знає виправлення для цього?
Відповіді:
Дуже рекомендую bootstrap-rtl . Він побудований над ядром Bootstrap, і додано підтримку rtl, оскільки це тема завантажувальної програми. Це зробить ваш код більш рентабельним, оскільки ви завжди можете оновити основні файли завантаження. CDN
Ще один варіант використання цієї автономної бібліотеки. Він також має декілька дивовижних арабських шрифтів.
Ви можете знайти його тут: RTL Bootstrap v3.2.0 .
Персональна версія веб-сайту http://rbootstrap.ir/ Ver.2.3.2
Це ще один проект: www.nuget.org/packages/Twitter.Bootstrap.RTL
у будь-якій версії завантажувального пристрою це можна зробити вручну
це роблять більшість речей, які ви хочете для rtl
нарешті, я можу знайти нову версію для завантаження справа наліво. поділитися тут для використання всіма:
bootstrap-3-3-7-rtl та RTL Bootstrap 4.0.0-alpha.6.1
Посилання GitHub:
https://github.com/parsmizban/RTL-Bootstrap
дякую parsmizban.com за створення та спільний доступ.
Я вважаю це дуже корисним, перевірте це: http://cdnjs.com/libraries/bootstrap-rtl
Якщо ви хочете, щоб 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) -offset- (1-12), є багато інших класів, які можна змінити, але мені потрібні були лише ті.
Все, що вам потрібно зробити, це викликати функцію layout.setDirection('rtl')абоlayout.setDirection('ltr') , і це змінить CSS правила для Bootstrap 3 енергосистеми.
Має працювати у всіх браузерах (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;
}
}
}ви можете використовувати мій проект, я створю bootstrap 3 rtl з sass та gulp, щоб ви могли легко налаштувати його https://github.com/z-avanes/bootstrap3-rtl
Ми оголошуємо AryaBootstrap ,
Остання версія заснована на завантажувальній версії 4.3.1
AryaBootstrap - це завантажувальна програма з підтримкою подвійного вирівнювання макета та використовується для веб-дизайну LTR та RTL.
додати "dir" до html, це єдине дію, яке потрібно зробити.
Оформити веб-сайт AryaBootstrap за адресою: http://abs.aryavandidad.com/
AryaBootstrap в GitHub: https://github.com/mRizvandi/AryaBootstrap