RTL

Ketahui cara mendayakan sokongan untuk teks kanan ke kiri dalam Bootstrap merentas reka letak, komponen dan utiliti kami.

Pada halaman ini

Membiasakan diri

Kami mengesyorkan agar anda membiasakan diri dengan Bootstrap terlebih dahulu dengan membaca halaman Pengenalan Bermula kami . Sebaik sahaja anda telah melaluinya, teruskan membaca di sini untuk cara mendayakan RTL.

Anda juga mungkin ingin membaca tentang projek RTLCSS , kerana ia menguatkan pendekatan kami terhadap RTL.

Ciri eksperimen

Ciri RTL masih bersifat eksperimen dan mungkin akan berkembang mengikut maklum balas pengguna. Ternampak sesuatu atau ada penambahbaikan untuk dicadangkan? Buka isu , kami ingin mendapatkan cerapan anda.

HTML yang diperlukan

Terdapat dua syarat ketat untuk mendayakan RTL dalam halaman berkuasa Bootstrap.

Tetapkan dir="rtl"pada <html>elemen.
Tambahkan langatribut yang sesuai, seperti lang="ar", pada <html>elemen.

Dari sana, anda perlu memasukkan versi RTL CSS kami. Sebagai contoh, berikut ialah lembaran gaya untuk CSS kami yang disusun dan dikecilkan dengan RTL didayakan:

<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">

Templat permulaan

Anda boleh melihat keperluan di atas ditunjukkan dalam templat pemula RTL yang diubah suai ini.

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

Contoh RTL

Mulakan dengan salah satu daripada beberapa contoh RTL kami .

Pendekatan

Pendekatan kami untuk membina sokongan RTL ke dalam Bootstrap disertakan dengan dua keputusan penting yang memberi kesan kepada cara kami menulis dan menggunakan CSS kami:

Mula-mula, kami memutuskan untuk membinanya dengan projek RTLCSS . Ini memberi kami beberapa ciri berkuasa untuk mengurus perubahan dan penggantian apabila beralih dari LTR ke RTL. Ia juga membolehkan kami membina dua versi Bootstrap daripada satu pangkalan kod.
Kedua, kami telah menamakan semula beberapa kelas berarah untuk menggunakan pendekatan sifat logik. Kebanyakan anda telah berinteraksi dengan sifat logik terima kasih kepada utiliti fleksibel kami—ia menggantikan sifat arah seperti leftdan rightmenyokong startdan end. Itu menjadikan nama dan nilai kelas sesuai untuk LTR dan RTL tanpa sebarang overhed.

Sebagai contoh, bukannya .ml-3untuk margin-left, gunakan .ms-3.

Bekerja dengan RTL, melalui sumber Sass kami atau CSS yang disusun, tidak sepatutnya jauh berbeza daripada LTR lalai kami.

Sesuaikan daripada sumber

Apabila ia berkaitan dengan penyesuaian , cara yang diutamakan ialah memanfaatkan pembolehubah, peta dan campuran. Pendekatan ini berfungsi sama untuk RTL, walaupun ia diproses pasca daripada fail yang disusun, terima kasih kepada cara RTLCSS berfungsi .

Nilai RTL tersuai

Menggunakan arahan nilai RTLCSS , anda boleh menjadikan output pembolehubah nilai yang berbeza untuk RTL. Contohnya, untuk mengurangkan berat $font-weight-boldsepanjang pangkalan kod, anda boleh menggunakan /*rtl: {value}*/sintaks:

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

Yang akan menghasilkan yang berikut untuk CSS lalai dan CSS RTL kami:

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

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

Timbunan fon alternatif

Sekiranya anda menggunakan fon tersuai, ambil perhatian bahawa tidak semua fon menyokong abjad bukan Latin. Untuk bertukar daripada keluarga Pan-Eropah kepada Arab, anda mungkin perlu menggunakan /*rtl:insert: {value}*/tindanan fon anda untuk mengubah suai nama keluarga fon.

Sebagai contoh, untuk menukar daripada Helvetica Neuefon untuk LTR kepada Helvetica Neue Arabicuntuk RTL, kod Sass anda mungkin kelihatan seperti ini:

$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 dan RTL pada masa yang sama

Perlukan kedua-dua LTR dan RTL pada halaman yang sama? Terima kasih kepada Peta Rentetan RTLCSS , ini agak mudah. Balut @imports anda dengan kelas, dan tetapkan peraturan nama semula tersuai untuk 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*/

Selepas menjalankan Sass kemudian RTLCSS, setiap pemilih dalam fail CSS anda akan didahului oleh .ltr, dan .rtluntuk fail RTL. Kini anda boleh menggunakan kedua-dua fail pada halaman yang sama dan hanya menggunakan .ltratau .rtlpada pembalut komponen anda untuk menggunakan satu atau arah yang lain.

Kes tepi dan had yang diketahui

Walaupun pendekatan ini boleh difahami, sila beri perhatian kepada perkara berikut:

Apabila menukar .ltrdan .rtl, pastikan anda menambah dirdan langatribut dengan sewajarnya.
Memuatkan kedua-dua fail boleh menjadi hambatan prestasi sebenar: pertimbangkan beberapa pengoptimuman , dan mungkin cuba memuatkan salah satu daripada fail tersebut secara tidak segerak .
Gaya bersarang dengan cara ini akan menghalang form-validation-state()mixin kami daripada berfungsi seperti yang dimaksudkan, oleh itu memerlukan anda mengubahnya sedikit sendiri. Lihat #31223 .

Pemisah serbuk roti ialah satu-satunya kes yang memerlukan pembolehubah baharunya sendiri— iaitu $breadcrumb-divider-flipped—menjadi lalai kepada $breadcrumb-divider.

RTL