RTL

Dowiedz się, jak włączyć obsługę tekstu pisanego od prawej do lewej w Bootstrap w naszym układzie, składnikach i narzędziach.

Na tej stronie

Zapoznaj się

Zalecamy zapoznanie się najpierw z Bootstrapem poprzez przeczytanie naszej strony Wprowadzenie do Rozpoczęcia pracy . Gdy już to zrobisz, czytaj dalej, aby dowiedzieć się, jak włączyć RTL.

Możesz również przeczytać o projekcie RTLCSS , ponieważ wspiera on nasze podejście do RTL.

Funkcja eksperymentalna

Funkcja RTL jest nadal eksperymentalna i prawdopodobnie będzie ewoluować zgodnie z opiniami użytkowników. Zauważyłeś coś lub chcesz zasugerować poprawę? Otwórz zgłoszenie , chętnie poznamy Twoje statystyki.

Wymagany kod HTML

Istnieją dwa ścisłe wymagania dotyczące włączania RTL na stronach korzystających z Bootstrap.

Ustaw dir="rtl"na <html>żywiole.
Dodaj odpowiedni langatrybut, taki jak lang="ar", na <html>elemencie.

Stamtąd musisz dołączyć wersję RTL naszego CSS. Na przykład, oto arkusz stylów dla naszego skompilowanego i zminimalizowanego CSS z włączonym RTL:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

Szablon startowy

Możesz zobaczyć powyższe wymagania odzwierciedlone w tym zmodyfikowanym szablonie startowym RTL.

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

    <title>مرحبا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبا بالعالم!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Przykłady RTL

Zacznij od jednego z naszych kilku przykładów RTL .

Zbliżać się

Nasze podejście do budowania obsługi RTL w Bootstrap wiąże się z dwoma ważnymi decyzjami, które wpływają na sposób pisania i używania naszego CSS:

Najpierw zdecydowaliśmy się zbudować go z projektem RTLCSS . Daje nam to potężne funkcje zarządzania zmianami i nadpisaniami podczas przechodzenia z LTR do RTL. Pozwala nam również na zbudowanie dwóch wersji Bootstrapa z jednej bazy kodu.
Po drugie, zmieniliśmy nazwy kilku klas kierunkowych, aby przyjąć podejście oparte na właściwościach logicznych. Większość z was miała już interakcję z właściwościami logicznymi dzięki naszym narzędziom elastycznym — zastępują one właściwości kierunku, takie jak lefti rightna korzyść starti end. Dzięki temu nazwy klas i wartości są odpowiednie dla LTR i RTL bez żadnych dodatkowych kosztów.

Na przykład zamiast .ml-3for margin-leftużyj .ms-3.

Praca z RTL, za pośrednictwem naszego źródłowego Sassa lub skompilowanego CSS, nie powinna się jednak zbytnio różnić od naszego domyślnego LTR.

Dostosuj ze źródła

Jeśli chodzi o dostosowywanie , preferowanym sposobem jest wykorzystanie zmiennych, map i domieszek. To podejście działa tak samo w przypadku RTL, nawet jeśli jest ono przetwarzane z skompilowanych plików, dzięki temu, jak działa RTLCSS .

Niestandardowe wartości RTL

Używając dyrektyw wartości RTLCSS , możesz sprawić, że zmienna wyjściowa będzie miała inną wartość dla RTL. Na przykład, aby zmniejszyć wagę w $font-weight-boldcałym kodzie, możesz użyć /*rtl: {value}*/składni:

$font-weight-bold: 700 #{/* rtl:600 */} !default;

Co dałoby następujące wyniki dla naszego domyślnego CSS i RTL CSS:

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

Alternatywny stos czcionek

Jeśli używasz niestandardowej czcionki, pamiętaj, że nie wszystkie czcionki obsługują alfabet inny niż łaciński. Aby przełączyć się z rodziny paneuropejskiej na arabską, może być konieczne użycie /*rtl:insert: {value}*/w stosie czcionek do zmodyfikowania nazw rodzin czcionek.

Na przykład, aby przełączyć się z Helvetica Neue WebfontLTR Helvetica Neue Arabicna RTL, Twój kod Sass wygląda tak:

$font-family-sans-serif:
  Helvetica Neue #{"/* rtl:insert:Arabic */"},
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  Arial,
  // Linux
  "Noto Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

LTR i RTL jednocześnie

Potrzebujesz zarówno LTR, jak i RTL na tej samej stronie? Dzięki RTLCSS String Maps jest to całkiem proste. Zapakuj swoje @imports klasą i ustaw niestandardową regułę zmiany nazwy dla RTLCSS:

/* rtl:begin:options: {
  "autoRename": true,
  "stringMap":[ {
    "name": "ltr-rtl",
    "priority": 100,
    "search": ["ltr"],
    "replace": ["rtl"],
    "options": {
      "scope": "*",
      "ignoreCase": false
    }
  } ]
} */
.ltr {
  @import "../node_modules/bootstrap/scss/bootstrap";
}
/*rtl:end:options*/

Po uruchomieniu Sass, a następnie RTLCSS, każdy selektor w plikach CSS będzie poprzedzony znakiem .ltr, a .rtldla plików RTL. Teraz możesz używać obu plików na tej samej stronie i po prostu użyć .ltrlub .rtlna swoich komponentach, aby użyć jednego lub drugiego kierunku.

Przypadki krawędziowe i znane ograniczenia

Chociaż takie podejście jest zrozumiałe, należy zwrócić uwagę na następujące kwestie:

Podczas przełączania .ltri .rtlupewnij się, że odpowiednio dodałeś diri langatrybuty.
Ładowanie obu plików może być prawdziwym wąskim gardłem wydajności: rozważ optymalizację , a może spróbuj załadować jeden z tych plików asynchronicznie .
Zagnieżdżanie stylów w ten sposób uniemożliwi naszemu form-validation-state()mixinowi działanie zgodnie z zamierzeniami, dlatego wymaga samodzielnego dostosowania. Zobacz #31223 .

Separator bułki tartej to jedyny przypadek, w którym wymagana jest jego nowa zmienna — mianowicie $breadcrumb-divider-flipped— domyślna wartość $breadcrumb-divider.

RTL