RTL

เรียนรู้วิธีเปิดใช้งานการรองรับข้อความที่อ่านจากขวาไปซ้ายใน Bootstrap ทั่วทั้งเลย์เอาต์ ส่วนประกอบ และยูทิลิตี้ของเรา

ในหน้านี้

ทำความคุ้นเคย

เราขอแนะนำให้ทำความคุ้นเคยกับ Bootstrap ก่อนโดยอ่านจากหน้าคำแนะนำการเริ่มต้นใช้งาน เมื่อคุณดำเนินการเสร็จแล้ว ให้อ่านต่อที่นี่เพื่อดูวิธีเปิดใช้งาน RTL

คุณอาจต้องการอ่านเกี่ยวกับโปรเจ็กต์ RTLCSSเนื่องจากเป็นแนวทางของเราในการเข้าถึง RTL

คุณสมบัติทดลอง

ฟีเจอร์ RTL ยังคงอยู่ในขั้นทดลองและอาจมีวิวัฒนาการตามความคิดเห็นของผู้ใช้ พบบางสิ่งบางอย่างหรือมีการปรับปรุงที่จะแนะนำ? เปิดประเด็นเราอยากทราบข้อมูลเชิงลึกของคุณ

HTML ที่จำเป็น

มีข้อกำหนดที่เข้มงวดสองข้อสำหรับการเปิดใช้งาน RTL ในหน้าที่ใช้ Bootstrap

ตั้งdir="rtl"อยู่บน<html>องค์ประกอบ
เพิ่มlangแอตทริบิวต์ที่เหมาะสม เช่นlang="ar"บน<html>องค์ประกอบ

จากนั้น คุณจะต้องรวม CSS เวอร์ชัน RTL ของเรา ตัวอย่างเช่น นี่คือสไตล์ชีตสำหรับ CSS ที่คอมไพล์และลดขนาดโดยเปิดใช้งาน RTL:

<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 ของเรา

เข้าใกล้

แนวทางของเราในการสร้างการสนับสนุน 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ทั่วทั้ง codebase คุณอาจใช้/*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แบบอักษรสำหรับ LTR เป็น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แอตทริบิวต์ตามนั้น
การโหลดไฟล์ทั้งสองไฟล์อาจเป็นปัญหาคอขวดของประสิทธิภาพที่แท้จริง ลองพิจารณา การปรับให้ เหมาะสมและอาจลองโหลดไฟล์เหล่านั้นแบบอะซิงโครนัส
สไตล์การซ้อนด้วยวิธีนี้จะป้องกันไม่ให้form-validation-state()มิกซ์อินของเราทำงานตามที่ตั้งใจไว้ คุณจึงต้องปรับแต่งเล็กน้อยด้วยตัวเอง ดู # 31223

ตัวคั่นเบรดครัมบ์เป็นกรณีเดียวที่ต้องการตัวแปรใหม่เอี่ยม นั่นคือ ค่า$breadcrumb-divider-flippedเริ่มต้นเป็น$breadcrumb-divider.

RTL