Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
in English

RTL

Bootstrap-da o'ngdan chapga matnni qo'llab-quvvatlashni bizning maketimiz, komponentlarimiz va yordamchi dasturlarimiz bo'ylab qanday yoqishni bilib oling.

Ushbu sahifada

Tanishing

Ishga kirishish bo'yicha kirish sahifamiz orqali avval Bootstrap bilan tanishib chiqishingizni tavsiya qilamiz . Buni bosib o'tganingizdan so'ng, RTLni qanday yoqish haqida bu erda o'qishni davom eting.

Shuningdek , siz RTLCSS loyihasi haqida o'qishni xohlashingiz mumkin , chunki u bizning RTLga yondashuvimizni kuchaytiradi.

Eksperimental xususiyat

RTL xususiyati hali ham eksperimental bo'lib, ehtimol foydalanuvchilarning fikr-mulohazalariga ko'ra rivojlanadi. Biror narsani topdingizmi yoki taklif qiladigan yaxshilanish bormi? Muammoni oching , biz sizning fikringizni olishni xohlaymiz.

Majburiy HTML

Bootstrap-da ishlaydigan sahifalarda RTL-ni yoqish uchun ikkita qattiq talab mavjud.

  1. Elementga o'rnating dir="rtl".<html>
  2. Elementga tegishli langatributni qo'shing, masalan lang="ar", <html>.

U yerdan siz bizning CSS-ning RTL versiyasini qo'shishingiz kerak bo'ladi. Masalan, RTL yoqilgan kompilyatsiya qilingan va kichiklashtirilgan CSS uchun uslublar jadvali:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

Boshlovchi shablon

Ushbu o'zgartirilgan RTL starter shablonida aks ettirilgan yuqoridagi talablarni ko'rishingiz mumkin.

<!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 misollari

Bir nechta RTL misollarimizdan biri bilan boshlang .

Yondashuv

Bootstrap-da RTL-ni qo'llab-quvvatlashga bo'lgan yondashuvimiz CSS-ni yozish va ishlatishimizga ta'sir qiluvchi ikkita muhim qaror bilan birga keladi:

  1. Birinchidan, biz uni RTLCSS loyihasi bilan qurishga qaror qildik . Bu bizga LTR dan RTL ga o'tishda o'zgarishlar va bekor qilishni boshqarish uchun ba'zi kuchli xususiyatlarni beradi. Bu, shuningdek, bitta kod bazasidan Bootstrap-ning ikkita versiyasini yaratishga imkon beradi.

  2. Ikkinchidan, biz mantiqiy xususiyatlar yondashuvini qabul qilish uchun bir nechta yo'nalish sinflarining nomini o'zgartirdik. Ko'pchiligimiz moslashuvchan yordamchi dasturlarimiz tufayli mantiqiy xususiyatlar bilan allaqachon o'zaro aloqada bo'lgansiz - ular yo'nalish xususiyatlarini va yoqadi leftva . Bu hech qanday qo'shimcha xarajatlarsiz LTR va RTL uchun sinf nomlari va qiymatlarini mos qiladi.rightstartend

Masalan, .ml-3for o'rniga dan margin-leftfoydalaning .ms-3.

Sass manbamiz yoki kompilyatsiya qilingan CSS orqali RTL bilan ishlash standart LTR dan unchalik farq qilmasligi kerak.

Manbadan moslashtiring

Moslashtirish haqida gap ketganda , afzal qilingan usul o'zgaruvchilar, xaritalar va miksinlardan foydalanishdir . Ushbu yondashuv RTLCSS qanday ishlashi tufayli kompilyatsiya qilingan fayllardan keyin qayta ishlangan bo'lsa ham, RTL uchun bir xil ishlaydi .

Maxsus RTL qiymatlari

RTLCSS qiymat ko'rsatmalaridan foydalanib , siz o'zgaruvchining chiqishini RTL uchun boshqa qiymat qilishingiz mumkin. Masalan, $font-weight-boldbutun kod bazasida vaznni kamaytirish uchun siz /*rtl: {value}*/sintaksisdan foydalanishingiz mumkin:

$font-weight-bold: 700 #{/* rtl:600 */} !default;

Bu bizning standart CSS va RTL CSS uchun quyidagilarga chiqadi:

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

Muqobil shrift to'plami

Agar siz maxsus shriftdan foydalanayotgan bo'lsangiz, shuni yodda tutingki, barcha shriftlar lotin bo'lmagan alifboni qo'llab-quvvatlamaydi. Pan-Yevropadan arab oilasiga o'tish uchun /*rtl:insert: {value}*/siz shrift turkumlari nomlarini o'zgartirish uchun shriftlar to'plamida foydalanishingiz kerak bo'lishi mumkin.

Masalan, Helvetica Neue WebfontLTR dan Helvetica Neue ArabicRTL ga o'tish uchun Sass kodingiz quyidagicha ko'rinadi:

$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 va RTL bir vaqtning o'zida

Xuddi shu sahifada LTR va RTL kerakmi? RTLCSS String Maps tufayli bu juda oddiy. Sinf bilan o'rang @importva RTLCSS uchun maxsus nom o'zgartirish qoidasini o'rnating:

/* 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*/

Sass, keyin RTLCSS-ni ishga tushirgandan so'ng, CSS fayllaringizdagi har bir selektor RTL fayllari uchun .ltrva oldiga qo'yiladi. .rtlEndi siz ikkala faylni bitta sahifada ishlatishingiz mumkin va u yoki bu yo'nalishni ishlatish uchun komponentlar o'ramlaridan oddiygina .ltrfoydalaning .rtl.

Edge holatlari va ma'lum cheklovlar

Ushbu yondashuv tushunarli bo'lsa-da, iltimos, quyidagilarga e'tibor bering:

  1. .ltrva ni almashtirganda , tegishli ravishda va atributlarni .rtlqo'shganingizga ishonch hosil qiling .dirlang
  2. Ikkala faylni ham yuklash haqiqiy ishlash muammosi bo'lishi mumkin: ba'zi optimallashtirishni ko'rib chiqing va shu fayllardan birini asinxron tarzda yuklashga harakat qiling .
  3. Bu tarzda joylashtirish uslublari bizning form-validation-state()mikserimiz mo'ljallangan tarzda ishlashiga to'sqinlik qiladi, shuning uchun uni o'zingiz biroz sozlashingiz kerak. № 31223 ga qarang .

Non bo'laklari qutisi

Non bo'laklarini ajratuvchi - bu o'zining yangi o'zgaruvchisini talab qiladigan yagona holat, ya'ni $breadcrumb-divider-flippedstandart bo'lib $breadcrumb-divider.

Qo'shimcha manbalar