주요 콘텐츠로 건너뛰기 문서 탐색으로 건너뛰기
in English

RTL

레이아웃, 구성 요소 및 유틸리티 전반에 걸쳐 Bootstrap에서 오른쪽에서 왼쪽으로 쓰는 텍스트에 대한 지원을 활성화하는 방법을 알아보십시오.

이 페이지에서

친근 해지다

시작하기 소개 페이지 를 읽고 먼저 부트스트랩에 익숙해지는 것이 좋습니다 . 일단 실행한 후에는 여기에서 RTL을 활성화하는 방법을 계속 읽으십시오.

RTL에 대한 우리의 접근 방식에 힘을 실어주는 RTLCSS 프로젝트 에 대해 읽어볼 수도 있습니다 .

실험적 기능

RTL 기능은 아직 실험적 이며 사용자 피드백에 따라 발전할 것입니다. 무언가를 발견했거나 제안할 개선 사항이 있습니까? 문제 를 여십시오. 귀하의 통찰력을 얻고 싶습니다.

필수 HTML

Bootstrap 기반 페이지에서 RTL을 활성화하기 위한 두 가지 엄격한 요구 사항이 있습니다.

  1. 요소에 설정 dir="rtl"합니다 <html>.
  2. 요소 에 와 같은 적절한 lang속성을 추가합니다 .lang="ar"<html>

거기에서 CSS의 RTL 버전을 포함해야 합니다. 예를 들어 다음은 RTL이 활성화된 컴파일 및 축소된 CSS의 스타일시트입니다.

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

스타터 템플릿

이 수정된 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>

RTL 예

여러 RTL 예제 중 하나를 시작하십시오 .

접근하다

부트스트랩에 RTL 지원을 구축하기 위한 접근 방식에는 CSS 작성 및 사용 방법에 영향을 미치는 두 가지 중요한 결정이 있습니다.

  1. 먼저 RTLCSS 프로젝트로 빌드하기로 결정했습니다. 이는 LTR에서 RTL로 이동할 때 변경 및 재정의를 관리하기 위한 몇 가지 강력한 기능을 제공합니다. 또한 하나의 코드베이스에서 두 가지 버전의 부트스트랩을 빌드할 수 있습니다.

  2. 둘째, 논리적 속성 접근 방식을 채택하기 위해 소수의 방향성 클래스의 이름을 변경했습니다. left대부분의 사용자는 플렉스 유틸리티 덕분에 이미 논리적 속성과 상호 작용했습니다. 이 유틸리티는 및 와 right같은 방향 속성을 대체 start합니다 end. 따라서 오버헤드 없이 클래스 이름과 값이 LTR 및 RTL에 적합합니다.

예를 들어 .ml-3for margin-left대신 .ms-3.

소스 Sass 또는 컴파일된 CSS를 통해 RTL로 작업하는 것은 기본 LTR과 크게 다르지 않아야 합니다.

소스에서 사용자 정의

사용자 정의 와 관련하여 선호되는 방법은 변수, 맵 및 믹스인을 활용하는 것입니다. 이 접근 방식은 RTLCSS 작동 방식 덕분에 컴파일된 파일에서 후처리된 경우에도 RTL에 대해 동일하게 작동합니다 .

맞춤 RTL 값

RTLCSS 값 지시문 을 사용 하여 변수가 RTL에 대해 다른 값을 출력하도록 할 수 있습니다. 예를 들어, 전체 코드베이스에 대한 가중치를 줄이려면 다음 구문 $font-weight-bold을 사용할 수 있습니다 ./*rtl: {value}*/

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

기본 CSS 및 RTL CSS에 대해 다음과 같이 출력됩니다.

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

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

대체 글꼴 스택

사용자 정의 글꼴을 사용하는 경우 모든 글꼴이 비라틴 알파벳을 지원하는 것은 아닙니다. 범유럽어에서 아랍어 패밀리로 전환하려면 /*rtl:insert: {value}*/글꼴 스택에서 를 사용하여 글꼴 패밀리의 이름을 수정해야 할 수 있습니다.

예를 들어 Helvetica Neue WebfontLTR에서 Helvetica Neue ArabicRTL로 전환하려면 Sass 코드는 다음과 같습니다.

$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과 RTL을 동시에

같은 페이지에 LTR과 RTL이 모두 필요합니까? RTLCSS String Maps 덕분에 이것은 매우 간단합니다. s를 클래스로 래핑 @import하고 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*/

Sass를 실행한 다음 RTLCSS를 실행한 후 CSS 파일의 각 선택기 앞에 RTL 파일 .ltr의 경우 및 가 추가됩니다. .rtl이제 동일한 페이지에서 두 파일을 모두 사용할 수 있으며 구성 요소 래퍼에서 .ltr또는 .rtl를 사용하여 한 방향 또는 다른 방향을 사용할 수 있습니다.

엣지 케이스 및 알려진 제한 사항

이 접근 방식은 이해할 수 있지만 다음 사항에 주의하십시오.

  1. .ltr및 를 전환할 때 그에 따라 및 속성 .rtl을 추가해야 합니다 .dirlang
  2. 두 파일을 모두 로드하면 실제 성능 병목 현상이 발생할 수 있습니다. 최적화 를 고려하고 해당 파일 중 하나를 비동기식 으로 로드해 보십시오 .
  3. 이런 식으로 스타일을 중첩하면 form-validation-state()믹스인이 의도한 대로 작동하지 않으므로 직접 약간 조정해야 합니다. #31223을 참조하십시오 .

빵 부스러기 케이스

이동 경로 구분 기호 는 고유한 새로운 변수, 즉 $breadcrumb-divider-flipped기본값을 로 설정해야 하는 유일한 경우 $breadcrumb-divider입니다.

추가 리소스