OutUI

⌘ K

v5.3.x

最后更新时间：

浏览器兼容性

OutUI

⌘ K

v5.3.x

‌
‌
‌
‌

最后更新时间：

浏览器兼容性

RTL (Right to Left)

Bootstrap 支持从右到左的文本方向，这对于阿拉伯语、希伯来语等语言非常有用。

启用 RTL

在 Bootstrap 支持的页面中启用 RTL 有两个严格的要求。

在 <html> 元素上设置 dir="rtl"。
在 <html> 元素上添加适当的 lang 属性，例如 lang="ar"。

你需要添加 CSS 的 RTL 版本。例如，下面是启用 RTL 的编译和压缩的 CSS 的样式表：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous">

示例

‌
‌
‌
‌

RTL (Right to Left)

Bootstrap 支持从右到左的文本方向，这对于阿拉伯语、希伯来语等语言非常有用。

启用 RTL

在 Bootstrap 支持的页面中启用 RTL 有两个严格的要求。

在 <html> 元素上设置 dir="rtl"。
在 <html> 元素上添加适当的 lang 属性，例如 lang="ar"。

你需要添加 CSS 的 RTL 版本。例如，下面是启用 RTL 的编译和压缩的 CSS 的样式表：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous">

示例

从右到左

要启用 RTL，只需在 HTML 元素上添加 dir="rtl" 属性。

index.html

<!doctype html>
<html lang="ar" dir="ltr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous">
    <title>مرحبًا بالعالم!</title>
  </head>
  <body>
    <div class="rtl-demo"> 
        <h1>مرحبًا بالعالم!</h1>
        <h1>hello world!</h1>
    </div>
  </body>
</html>

<style>
  .rtl-demo {
    direction: rtl;
  }
</style>