RTL
Learje hoe't jo stipe kinne ynskeakelje foar tekst fan rjochts nei lofts yn Bootstrap oer ús yndieling, komponinten en nutsbedriuwen.
Wês bekend
Wy riede oan om earst fertroud te wurden mei Bootstrap troch te lêzen fia ús Getting Started Introduction page . Sadree't jo hawwe rûn troch it, fierder lêzen hjir foar hoe't jo RTL ynskeakelje.
Jo kinne ek lêze oer it RTLCSS-projekt , om't it ús oanpak foar RTL macht.
Eksperimintele funksje
De RTL-funksje is noch altyd eksperiminteel en sil wierskynlik evoluearje neffens feedback fan brûkers. Iets gespot of hawwe in ferbettering foar te stellen? Iepenje in probleem , wy wolle graach jo ynsjoch krije.
Fereaske HTML
D'r binne twa strange easken foar it ynskeakeljen fan RTL yn Bootstrap-oandreaune siden.
- Set
dir="rtl"
op it<html>
elemint. - Foegje in passend
lang
attribút ta, lykaslang="ar"
, op it<html>
elemint.
Fan dêrút moatte jo in RTL-ferzje fan ús CSS opnimme. Hjir is bygelyks it stylblêd foar ús kompilearre en minifisearre CSS mei RTL ynskeakele:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">
Starter sjabloan
Jo kinne sjen de boppesteande easken wjerspegele yn dizze wizige RTL starter sjabloan.
<!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>
Foarbylden fan RTL
Begjin mei ien fan ús ferskate RTL-foarbylden .
Oanpak
Us oanpak foar it bouwen fan RTL-stipe yn Bootstrap komt mei twa wichtige besluten dy't ynfloed hawwe op hoe't wy ús CSS skriuwe en brûke:
-
Earst hawwe wy besletten om it te bouwen mei it RTLCSS- projekt. Dit jout ús wat krêftige funksjes foar it behearen fan feroarings en oerskriuwingen by it ferpleatsen fan LTR nei RTL. It lit ús ek twa ferzjes fan Bootstrap bouwe fan ien codebase.
-
Twadder hawwe wy in hantsjefol rjochtingsklassen omneamd om in oanpak fan logyske eigenskippen oan te nimmen. De measten fan jo hawwe al ynteraksje mei logyske eigenskippen tanksij ús flex-hulpprogramma's - se ferfange rjochtingseigenskippen lykas
left
enright
foarstart
enend
. Dat makket de klasse nammen en wearden passend foar LTR en RTL sûnder overhead.
Bygelyks, ynstee fan .ml-3
foar margin-left
, brûke .ms-3
.
Wurkje mei RTL, fia ús boarne Sass of kompilearre CSS, soe lykwols net folle oars moatte wêze fan ús standert LTR.
Oanpasse fan boarne
As it giet om oanpassing , is de foarkommende manier om te profitearjen fan fariabelen, kaarten en mixins. Dizze oanpak wurket itselde foar RTL, sels as it nei ferwurke is fan 'e kompilearre bestannen, tank oan hoe't RTLCSS wurket .
Oanpaste RTL wearden
Mei help fan RTLCSS wearde rjochtlinen , kinne jo meitsje in fariabele útfier in oare wearde foar RTL. Om bygelyks it gewicht foar $font-weight-bold
de hiele koadebase te ferminderjen, kinne jo de /*rtl: {value}*/
syntaksis brûke:
$font-weight-bold: 700 #{/* rtl:600 */} !default;
Wat soe útfiere nei it folgjende foar ús standert CSS en RTL CSS:
/* bootstrap.css */
dt {
font-weight: 700 /* rtl:600 */;
}
/* bootstrap.rtl.css */
dt {
font-weight: 600;
}
Alternative lettertype stack
Yn it gefal dat jo in oanpast lettertype brûke, wês dan bewust dat net alle lettertypen it net-Latynske alfabet stypje. Om te wikseljen fan Pan-Jeropeeske nei Arabyske famylje, moatte jo miskien brûke /*rtl:insert: {value}*/
yn jo lettertypestapel om de nammen fan lettertypefamyljes te feroarjen.
Om bygelyks te wikseljen fan Helvetica Neue Webfont
foar LTR nei Helvetica Neue Arabic
foar RTL, sjocht jo Sass-koade der sa út:
$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 en RTL tagelyk
Need sawol LTR as RTL op deselde side? Mei tank oan RTLCSS String Maps , dit is frij ienfâldich. Wrap jo @import
s mei in klasse, en set in oanpaste omneamingsregel foar 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*/
Nei it útfieren fan Sass dan RTLCSS, sil elke selector yn jo CSS-bestannen foarôfgeand wurde troch .ltr
, en .rtl
foar RTL-bestannen. No kinne jo beide bestannen op deselde side brûke, en gewoan .ltr
of .rtl
op jo komponinten wrappers brûke om ien of oare rjochting te brûken.
Edge gefallen en bekende beheinings
Wylst dizze oanpak begryplik is, jouwe asjebleaft omtinken oan it folgjende:
- As jo wikselje
.ltr
en.rtl
, soargje derfoar dat jo tafoegjedir
enlang
attributen neffens. - It laden fan beide bestannen kin in echte knelpunt wêze foar prestaasjes: beskôgje wat optimalisaasje , en besykje miskien ien fan dy bestannen asynchronysk te laden .
- Neststilen op dizze manier sille foarkomme dat ús
form-validation-state()
mixin wurket lykas bedoeld, dus fereaskje dat jo it sels in bytsje oanpasse. Sjoch #31223 .
De breadcrumb saak
De breadcrumb separator is it ienige gefal dat syn eigen gloednije fariabele fereasket - nammentlik $breadcrumb-divider-flipped
- standert op $breadcrumb-divider
.