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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-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>

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 NeueLTR шрифтінен Helvetica Neue ArabicRTL шрифтіне ауысу үшін 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*/

.ltrSass, содан кейін RTLCSS іске қосқаннан кейін, CSS файлдарыңыздағы әрбір селектор .rtlRTL файлдары үшін алдына қойылады. Енді сіз екі файлды бір бетте пайдалана аласыз және бір немесе басқа бағытты пайдалану үшін құрамдас қаптамаларды жай ғана .ltrпайдаланыңыз .rtl.

Жиекті жағдайлар және белгілі шектеулер

Бұл тәсіл түсінікті болғанымен, мыналарға назар аударыңыз:

.ltrжәне ауыстырған кезде сәйкесінше және атрибуттарын .rtlқосқаныңызға көз жеткізіңіз .dirlang
Екі файлды да жүктеу нақты өнімділікке кедергі болуы мүмкін: кейбір оңтайландыруды қарастырыңыз және сол файлдардың бірін асинхронды түрде жүктеп көріңіз .
Осы жолмен кірістіру стильдері біздің form-validation-state()миксиннің жоспарланғандай жұмыс істеуіне жол бермейді, сондықтан оны өзіңіз аздап реттеуді талап етеді. №31223 қараңыз .

Нан үгіндісін бөлгіш - өзінің жаңа айнымалы мәнін талап ететін жалғыз жағдай, атап айтқанда - $breadcrumb-divider-flippedәдепкі $breadcrumb-divider.

RTL