RTL

ស្វែងយល់ពីរបៀបបើកការគាំទ្រសម្រាប់អត្ថបទពីស្តាំទៅឆ្វេងនៅក្នុង Bootstrap លើប្លង់ សមាសធាតុ និងឧបករណ៍ប្រើប្រាស់របស់យើង។

នៅលើទំព័រនេះ។

ស្គាល់

យើងសូមណែនាំឱ្យស្គាល់ Bootstrap ជាមុនសិន ដោយអានតាមរយៈ ទំព័រការណែនាំអំពីការចាប់ផ្តើម របស់យើង ។ នៅពេលដែលអ្នកបានដំណើរការវាហើយ សូមបន្តអាននៅទីនេះសម្រាប់របៀបបើក RTL ។

អ្នកក៏ប្រហែលជាចង់អាន គម្រោង RTLCSS ផងដែរព្រោះវាផ្តល់ថាមពលដល់វិធីសាស្រ្តរបស់យើងចំពោះ RTL ។

មុខងារពិសោធន៍

មុខងារ RTL នៅតែមាន ការពិសោធន៍ ហើយប្រហែលជានឹងវិវត្តន៍ទៅតាមមតិអ្នកប្រើ។ ប្រទះឃើញអ្វីមួយ ឬមានការកែលម្អដើម្បីណែនាំ? បើកបញ្ហា យើងចង់ទទួលបានការយល់ដឹងរបស់អ្នក។

HTML ដែលត្រូវការ

មានតម្រូវការតឹងរ៉ឹងពីរសម្រាប់ការបើក RTL នៅក្នុងទំព័រដែលដំណើរការដោយ Bootstrap ។

កំណត់ dir="rtl"លើ <html>ធាតុ។
បន្ថែម langគុណលក្ខណៈសមស្រប ដូចជា lang="ar"លើ <html>ធាតុ។

ពីទីនោះ អ្នកនឹងត្រូវបញ្ចូលកំណែ RTL នៃ CSS របស់យើង។ ឧទាហរណ៍ ខាងក្រោមនេះជាសន្លឹករចនាប័ទ្មសម្រាប់ CSS ដែលបានចងក្រង និងបង្រួមតូចរបស់យើងជាមួយនឹង RTL បានបើកដំណើរការ៖

<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 ជាច្រើនរបស់យើង ។

វិធីសាស្រ្ត

វិធីសាស្រ្តរបស់យើងក្នុងការកសាងការគាំទ្រ RTL ទៅក្នុង Bootstrap ភ្ជាប់មកជាមួយការសម្រេចចិត្តសំខាន់ៗចំនួនពីរដែលប៉ះពាល់ដល់របៀបដែលយើងសរសេរ និងប្រើប្រាស់ CSS របស់យើង៖

ជាដំបូង យើងបានសម្រេចចិត្តសាងសង់វាជាមួយនឹង គម្រោង RTLCSS ។ វាផ្តល់ឱ្យយើងនូវលក្ខណៈពិសេសដ៏មានឥទ្ធិពលមួយចំនួនសម្រាប់ការគ្រប់គ្រងការផ្លាស់ប្តូរ និងការបដិសេធនៅពេលផ្លាស់ទីពី LTR ទៅ RTL ។ វាក៏អនុញ្ញាតឱ្យយើងបង្កើត Bootstrap កំណែពីរពីមូលដ្ឋានកូដមួយ។
ទីពីរ យើងបានប្តូរឈ្មោះថ្នាក់ទិសដៅមួយចំនួនតូច ដើម្បីអនុម័តវិធីសាស្ត្រលក្ខណៈឡូជីខល។ អ្នកភាគច្រើនបានធ្វើអន្តរកម្មជាមួយលក្ខណៈសម្បត្តិឡូជីខលរួចហើយ អរគុណចំពោះឧបករណ៍ប្រើប្រាស់ flex របស់យើង—ពួកវាជំនួសលក្ខណៈសម្បត្តិទិសដៅដូច leftនិង rightពេញចិត្ត startនិង end. នោះធ្វើឱ្យឈ្មោះថ្នាក់ និងតម្លៃសមរម្យសម្រាប់ LTR និង RTL ដោយគ្មានតម្លៃលើស។

ឧទាហរណ៍ ជំនួសឱ្យ .ml-3for margin-leftប្រើ .ms-3។

ការធ្វើការជាមួយ RTL តាមរយៈប្រភព Sass ឬចងក្រង CSS របស់យើង មិនគួរមានភាពខុសគ្នាច្រើនពី LTR លំនាំដើមរបស់យើងទេ។

ប្ដូរតាមបំណងពីប្រភព

នៅពេលនិយាយអំពីការ ប្ដូរតាមបំណង មធ្យោបាយដែលពេញចិត្តគឺទាញយកអត្ថប្រយោជន៍ពីអថេរ ផែនទី និងល្បាយ។ វិធីសាស្រ្តនេះដំណើរការដូចគ្នាសម្រាប់ RTL ទោះបីជាវាត្រូវបានដំណើរការបន្ទាប់ពីឯកសារដែលបានចងក្រងក៏ដោយ អរគុណចំពោះ របៀបដែល RTLCSS ដំណើរការ ។

តម្លៃ 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;
}

ជង់ពុម្ពអក្សរជំនួស

ក្នុងករណីដែលអ្នកកំពុងប្រើពុម្ពអក្សរផ្ទាល់ខ្លួន សូមដឹងថាមិនមែនពុម្ពអក្សរទាំងអស់គាំទ្រអក្ខរក្រមមិនមែនឡាតាំងទេ។ ដើម្បីប្តូរពី Pan-European ទៅគ្រួសារអារ៉ាប់ អ្នកប្រហែលជាត្រូវប្រើ /*rtl:insert: {value}*/ក្នុងជង់ពុម្ពអក្សររបស់អ្នក ដើម្បីកែប្រែឈ្មោះគ្រួសារពុម្ពអក្សរ។

ឧទាហរណ៍ ដើម្បីប្តូរពី Helvetica Neue WebfontLTR ទៅ 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 នេះពិតជាសាមញ្ញណាស់។ រុំ @imports របស់អ្នកជាមួយនឹងថ្នាក់មួយ ហើយកំណត់ច្បាប់ប្តូរឈ្មោះផ្ទាល់ខ្លួនសម្រាប់ 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*/

បន្ទាប់ពីដំណើរការ Sass បន្ទាប់មក RTLCSS ឧបករណ៍ជ្រើសរើសនីមួយៗនៅក្នុងឯកសារ CSS របស់អ្នកនឹងត្រូវបានទុកមុនដោយ .ltrនិង .rtlសម្រាប់ឯកសារ RTL ។ ឥឡូវនេះ អ្នកអាចប្រើឯកសារទាំងពីរនៅលើទំព័រតែមួយ ហើយគ្រាន់តែប្រើ .ltrឬ .rtlនៅលើរុំសមាសធាតុរបស់អ្នក ដើម្បីប្រើទិសដៅមួយ ឬផ្សេងទៀត។

ករណីគែម និងដែនកំណត់ដែលគេស្គាល់

ខណៈពេលដែលវិធីសាស្រ្តនេះគឺអាចយល់បាន, សូមយកចិត្តទុកដាក់ដូចខាងក្រោម:

នៅពេលប្តូរ .ltrហើយ .rtlត្រូវប្រាកដថាអ្នកបន្ថែម dirនិង langគុណលក្ខណៈទៅតាមនោះ។
ការផ្ទុកឯកសារទាំងពីរអាចជាឧបសគ្គនៃការអនុវត្តជាក់ស្តែង៖ ពិចារណាលើការ បង្កើនប្រសិទ្ធភាព មួយចំនួន ហើយប្រហែលជាព្យាយាម ផ្ទុកឯកសារមួយក្នុងចំណោមឯកសារទាំងនោះដោយអសមកាល ។
រចនាប័ទ្ម Nesting វិធីនេះនឹងរារាំង form-validation-state()mixin របស់យើងមិនដំណើរការដូចបំណង ដូច្នេះតម្រូវឱ្យអ្នកកែប្រែវាបន្តិចដោយខ្លួនឯង។ សូមមើល #31223 ។

ឧបករណ៍ បំបែក breadcrumb គឺជាករណីតែមួយគត់ដែលទាមទារអថេរថ្មីម៉ាករបស់វា - ពោលគឺ $breadcrumb-divider-flipped- លំនាំដើមទៅ $breadcrumb-divider.

RTL