RTL

Saiba como habilitar o suporte para texto da direita para a esquerda no Bootstrap em nosso layout, componentes e utilitários.

Nesta página

Familiarizar

Recomendamos que você se familiarize com o Bootstrap primeiro lendo a nossa página de introdução . Depois de executá-lo, continue lendo aqui para saber como habilitar o RTL.

Você também pode querer ler sobre o projeto RTLCSS , pois ele potencializa nossa abordagem ao RTL.

Recurso experimental

O recurso RTL ainda é experimental e provavelmente evoluirá de acordo com o feedback do usuário. Encontrou algo ou tem uma melhoria para sugerir? Abra um problema , adoraríamos receber seus insights.

HTML obrigatório

Existem dois requisitos rigorosos para habilitar o RTL em páginas com Bootstrap.

Ajuste dir="rtl"no <html>elemento.
Adicione um langatributo apropriado, como lang="ar", no <html>elemento.

A partir daí, você precisará incluir uma versão RTL do nosso CSS. Por exemplo, aqui está a folha de estilo para nosso CSS compilado e reduzido com RTL ativado:

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

Modelo inicial

Você pode ver os requisitos acima refletidos neste modelo inicial RTL modificado.

<!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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 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-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Exemplos de RTL

Comece com um de nossos vários exemplos de RTL .

Abordagem

Nossa abordagem para construir suporte RTL no Bootstrap vem com duas decisões importantes que afetam como escrevemos e usamos nosso CSS:

Primeiro, decidimos construí-lo com o projeto RTLCSS . Isso nos dá alguns recursos poderosos para gerenciar alterações e substituições ao passar de LTR para RTL. Também nos permite construir duas versões do Bootstrap a partir de uma base de código.
Em segundo lugar, renomeamos algumas classes direcionais para adotar uma abordagem de propriedades lógicas. A maioria de vocês já interagiu com propriedades lógicas graças aos nossos utilitários flex—eles substituem propriedades de direção como lefte righta favor starte end. Isso torna os nomes e valores de classe apropriados para LTR e RTL sem nenhuma sobrecarga.

Por exemplo, em vez de .ml-3for margin-left, use .ms-3.

Trabalhar com RTL, através do nosso fonte Sass ou CSS compilado, não deve ser muito diferente do nosso LTR padrão.

Personalizar a partir da fonte

Quando se trata de customização , a forma preferida é aproveitar variáveis, mapas e mixins. Essa abordagem funciona da mesma forma para o RTL, mesmo que seja pós-processado a partir dos arquivos compilados, graças ao funcionamento do RTLCSS .

Valores de RTL personalizados

Usando as diretivas de valor RTLCSS , você pode fazer com que uma variável produza um valor diferente para RTL. Por exemplo, para diminuir o peso de $font-weight-boldtoda a base de código, você pode usar a /*rtl: {value}*/sintaxe:

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

O que resultaria no seguinte para nosso CSS padrão e CSS RTL:

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

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

Pilha de fontes alternativas

Caso você esteja usando uma fonte personalizada, saiba que nem todas as fontes suportam o alfabeto não latino. Para alternar da família Pan-Europeia para a Família Árabe, pode ser necessário usar /*rtl:insert: {value}*/em sua pilha de fontes para modificar os nomes das famílias de fontes.

Por exemplo, para mudar de Helvetica Neuefonte para LTR Helvetica Neue Arabicpara RTL, seu código Sass pode ficar assim:

$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 e RTL ao mesmo tempo

Precisa de LTR e RTL na mesma página? Graças ao RTLCSS String Maps , isso é bastante simples. Envolva seus @imports com uma classe e defina uma regra de renomeação personalizada para 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*/

Depois de executar o Sass e depois o RTLCSS, cada seletor em seus arquivos CSS será precedido por .ltr, e .rtlpara arquivos RTL. Agora você pode usar os dois arquivos na mesma página e simplesmente usar .ltrou .rtlnos wrappers de seus componentes para usar uma ou outra direção.

Casos extremos e limitações conhecidas

Embora essa abordagem seja compreensível, preste atenção ao seguinte:

Ao alternar .ltre .rtl, certifique-se de adicionar dire langatributos de acordo.
Carregar os dois arquivos pode ser um gargalo de desempenho real: considere alguma otimização e talvez tente carregar um desses arquivos de forma assíncrona .
Aninhar estilos dessa maneira impedirá que nosso form-validation-state()mixin funcione conforme o esperado, portanto, você precisará ajustá-lo um pouco sozinho. Veja #31223 .

O separador de breadcrumb é o único caso que requer sua própria variável totalmente nova — ou seja $breadcrumb-divider-flipped— padronizada para $breadcrumb-divider.

RTL