Получить профессию в Skypro
Поддержка RTL для Bootstrap 3.x для арабского языка
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для активации поддержки право-налевого направления (RTL) в Bootstrap 3 используйте инструмент RTLCSS. После его установки (npm install rtlcss) выполните преобразование стилей Bootstrap командой rtlcss bootstrap.css bootstrap-rtl.css. Далее подключите сгенерированный RTL-стиль к документу, в зависимости от его направленности:
<link rel="stylesheet" href="bootstrap.css">
<script>
if (document.dir === "rtl") {
document.head.innerHTML += '<link rel="stylesheet" href="bootstrap-rtl.css">';
}
</script>Этот скрипт проверяет, задана ли ориентация документа как RTL, и, в случае положительного ответа, добавляет соответствующий стиль.
Воспользуйтесь библиотеками Bootstrap RTL
Если вам необходимо готовое решение, можно воспользоваться библиотеками типа bootstrap-rtl. Ваш проект будет поддерживать направление справа-налево благодаря простому подключению к CDN:
<!-- Подключите версию Bootstrap RTL для документов с RTL -->
<script>
if (document.dir === "rtl") {
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "https://cdn.example.com/bootstrap-rtl.min.css";
document.head.appendChild(link);
}
</script>bootstrap-3-arabic позволит внести в ваш проект нотку изящества арабских шрифтов.
Точное управление RTL-макетами
В случае, если стандартные библиотеки не удовлетворяют вашим требованиям, возможно, потребуется индивидуальная настройка Bootstrap.css для соответствующих RTL-стилей:
Измените свойство
float, заменивfloat:left;наfloat:right;— в конце концов, право бы не называли правым, если бы оно было неверным!Доработайте отступы: поправьте CSS и скорректируйте значения.
Внесите эти изменения в свой собственный файл custom-rtl.css, чтобы изменения не потерялись среди всего остального кода.
Преимущества пакетов NuGet
Пакет Twitter.Bootstrap.RTL от NuGet отлично дополнит разработку под .NET, особенно для проектов на арабском языке.
Поддержка RTL для различных версий Bootstrap
RTL-настройка может требовать детализации для каждой версии Bootstrap. Следите за обновлениями, чтобы избежать конфликтов версий.
Визуализация
Поддержку RTL в Twitter Bootstrap 3 можно представить как построение конструктора:
Стандартный Bootstrap (LTR): 🏗️🧱🖱️➡️🖥️🌐 (Постепенное создание сайта слева направо)
При добавлении поддержки RTL: 🏗️🧱🖱️⬅️🖥️🌐 (Тот же процесс, но справа налево)Вам всего лишь нужно изменить направление работы.
Набор инструментов Bootstrap 3: 🧰🔧🔨📏
RTL-настройки: 🧰🔧🔨📐 (Добавьте угольник для точности RTL)Теперь вы полностью готовы к созданию сайтов с любым направлением текста.
Откройте для себя больше ресурсов для RTL
Изучите RTL-bootstrap v3.2.0 и Persian Bootstrap для комплексной поддержки RTL. Вы найдете полезную информацию на GitHub (https://github.com/Kaakati/Bootstrap-Arabic) и на сайте rbootstrap.ir.
Глобальная настройка направления
Задайте dir="rtl" в теге <body> для решения основных задач по выравниванию и направлению текста.
<body dir="rtl">
</body>Полезные материалы
- GitHub – MahdiMajidzadeh/bootstrap-v4-rtl — версия для фарси и арабского.
- Bootstrap 4 RTL — распространенная библиотека для RTL.
- RTLCSS — утилита для преобразования LTR CSS в RTL
- Stack Overflow – Bootstrap 3 Glyphicons are not working — обсуждение и решение проблем RTL в Bootstrap 3.
- Start Bootstrap — бесплатные темы и шаблоны с поддержкой RTL.
- Codeply v2 — интерактивное руководство по Bootstrap 3 с поддержкой RTL.