RTL
Орналасуымызда, құрамдастарында және утилиталарында Bootstrap бағдарламасында оңнан солға мәтінді қолдауды қалай қосу керектігін біліңіз.
Танысыңыз
Жұмысты бастау туралы кіріспе бетін оқу арқылы алдымен Bootstrap бағдарламасымен танысуды ұсынамыз . Оны аяқтағаннан кейін, RTL қалай қосуға болатынын білу үшін осы жерден оқуды жалғастырыңыз.
Сондай-ақ , RTLCSS жобасы туралы оқығыңыз келуі мүмкін , себебі ол RTL-ге деген көзқарасымызды қуаттайды.
Эксперименттік қасиет
RTL мүмкіндігі әлі де эксперименталды және пайдаланушы пікіріне сәйкес дамитын болуы мүмкін. Бірдеңе байқадыңыз ба немесе ұсынатын жақсарту бар ма? Мәселені ашыңыз , біз сіздің түсініктеріңізді алғымыз келеді.
Міндетті HTML
Bootstrap қолдайтын беттерде RTL қосу үшін екі қатаң талап бар.
- Элементке орнатыңыз
dir="rtl"
.<html>
- Элементке сәйкес
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 мысалдарының бірімен бастаңыз .
Тәсіл
Bootstrap жүйесінде RTL қолдауын құруға деген көзқарасымыз CSS-ті жазу және пайдалану жолымызға әсер ететін екі маңызды шешіммен бірге келеді:
-
Біріншіден, біз оны RTLCSS жобасымен құруды шештік. Бұл бізге LTR-ден RTL-ге ауысқан кезде өзгерістер мен қайта анықтауды басқаруға арналған кейбір қуатты мүмкіндіктерді береді. Ол сонымен қатар бір код базасынан Bootstrap бағдарламасының екі нұсқасын құруға мүмкіндік береді.
-
Екіншіден, логикалық сипаттар тәсілін қабылдау үшін бірнеше бағыттаушы сыныптардың атын өзгерттік. Сіздердің көпшілігіңіз икемді утилиталарымыздың арқасында логикалық сипаттармен әрекеттесіп үлгердіңіздер—олар бағыт сипаттарын
left
жәнеright
пайдасынаstart
және сияқтыларды ауыстырадыend
. Бұл ешқандай үстеме шығынсыз LTR және RTL үшін сынып атаулары мен мәндерін сәйкес етеді.
Мысалы, .ml-3
үшін орнына 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 Webfont
LTR-ден Helvetica Neue Arabic
RTL-ге ауысу үшін 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 арқасында бұл өте қарапайым. Сыныппен ораңыз @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*/
.ltr
Sass, содан кейін RTLCSS іске қосқаннан кейін, CSS файлдарыңыздағы әрбір селектор .rtl
RTL файлдары үшін алдына қойылады. Енді сіз екі файлды бір бетте пайдалана аласыз және бір немесе басқа бағытты пайдалану үшін құрамдас қаптамаларды жай ғана .ltr
пайдаланыңыз .rtl
.
Жиек жағдайлары және белгілі шектеулер
Бұл тәсіл түсінікті болғанымен, төмендегілерге назар аударыңыз:
.ltr
және ауыстырған кезде сәйкесінше және атрибуттарды.rtl
қосқаныңызға көз жеткізіңіз .dir
lang
- Екі файлды да жүктеу нақты өнімділікке кедергі болуы мүмкін: кейбір оңтайландыруды қарастырыңыз және сол файлдардың бірін асинхронды түрде жүктеп көріңіз .
- Осы жолмен кірістіру стильдері біздің
form-validation-state()
миксиннің жоспарланғандай жұмыс істеуіне жол бермейді, сондықтан оны өзіңіз аздап реттеуді талап етеді. №31223 қараңыз .
Нан үгіндісі
Нан үгіндісін бөлгіш - өзінің жаңа айнымалы мәнін талап ететін жалғыз жағдай, атап айтқанда - $breadcrumb-divider-flipped
әдепкі $breadcrumb-divider
.