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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+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>

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 fornece 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.
Segundo, 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 Neue WebfontLTR Helvetica Neue Arabicpara RTL, seu código Sass fica 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. Consulte #31223 .

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

RTL