RTL
Saiba como habilitar o suporte para texto da direita para a esquerda no Bootstrap em nosso layout, componentes e utilitários.
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
lang
atributo apropriado, comolang="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
left
eright
a favorstart
eend
. Isso torna os nomes e valores de classe apropriados para LTR e RTL sem nenhuma sobrecarga.
Por exemplo, em vez de .ml-3
for 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-bold
toda 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 Webfont
LTR Helvetica Neue Arabic
para 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 @import
s 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 .rtl
para arquivos RTL. Agora você pode usar os dois arquivos na mesma página e simplesmente usar .ltr
ou .rtl
nos 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
.ltr
e.rtl
, certifique-se de adicionardir
elang
atributos 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 caso da farinha de rosca
O separador de breadcrumb é o único caso que requer sua própria nova variável — ou seja $breadcrumb-divider-flipped
— padronizada para $breadcrumb-divider
.