diff options
5 files changed, 28 insertions, 22 deletions
diff --git a/site/content/docs/5.0/examples/album-rtl/index.html b/site/content/docs/5.0/examples/album-rtl/index.html index ec7bde888..5142c4cec 100644 --- a/site/content/docs/5.0/examples/album-rtl/index.html +++ b/site/content/docs/5.0/examples/album-rtl/index.html @@ -29,7 +29,7 @@ direction: rtl <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg> <strong>الألبوم</strong> </a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="تبديل التنقل"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="تبديل التنقل"> <span class="navbar-toggler-icon"></span> </button> </div> diff --git a/site/content/docs/5.0/examples/carousel-rtl/index.html b/site/content/docs/5.0/examples/carousel-rtl/index.html index 6d5ce3ae1..89b470b99 100644 --- a/site/content/docs/5.0/examples/carousel-rtl/index.html +++ b/site/content/docs/5.0/examples/carousel-rtl/index.html @@ -11,7 +11,7 @@ extra_css: <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">دائري</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="تبديل التنقل"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="تبديل التنقل"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> @@ -37,11 +37,11 @@ extra_css: <main> - <div id="myCarousel" class="carousel slide" data-ride="carousel"> + <div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> <ol class="carousel-indicators"> - <li data-target="#myCarousel" data-slide-to="0" class="active"></li> - <li data-target="#myCarousel" data-slide-to="1"></li> - <li data-target="#myCarousel" data-slide-to="2"></li> + <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li> + <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li> + <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> @@ -75,11 +75,11 @@ extra_css: </div> </div> </div> - <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> + <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">السابق</span> </a> - <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> + <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">التالى</span> </a> diff --git a/site/content/docs/5.0/examples/checkout-rtl/index.html b/site/content/docs/5.0/examples/checkout-rtl/index.html index 0c5fab974..c4a60443d 100644 --- a/site/content/docs/5.0/examples/checkout-rtl/index.html +++ b/site/content/docs/5.0/examples/checkout-rtl/index.html @@ -216,7 +216,7 @@ body_class: "bg-light" <hr class="my-4"> - <button class="btn btn-primary btn-lg btn-block" type="submit">الاستمرار في الخروج</button> + <button class="w-100 btn btn-primary btn-lg" type="submit">الاستمرار في الخروج</button> </form> </div> </div> diff --git a/site/content/docs/5.0/examples/dashboard-rtl/index.html b/site/content/docs/5.0/examples/dashboard-rtl/index.html index 5d33bdc72..cfd28a451 100644 --- a/site/content/docs/5.0/examples/dashboard-rtl/index.html +++ b/site/content/docs/5.0/examples/dashboard-rtl/index.html @@ -15,7 +15,7 @@ extra_js: <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"> <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">اسم الشركة</a> - <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل"> + <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل"> <span class="navbar-toggler-icon"></span> </button> <input class="form-control form-control-dark w-100" type="text" placeholder="بحث" aria-label="بحث"> diff --git a/site/content/docs/5.0/getting-started/rtl.md b/site/content/docs/5.0/getting-started/rtl.md index 00b1e3734..62287a341 100644 --- a/site/content/docs/5.0/getting-started/rtl.md +++ b/site/content/docs/5.0/getting-started/rtl.md @@ -27,15 +27,15 @@ There are two strict requirements for enabling RTL in Bootstrap-powered pages. From there, you'll need to include an RTL version of our CSS. For example, here's the stylesheet for our compiled and minified CSS with RTL enabled: -{{< highlight html >}} +```html <link rel="stylesheet" href="{{< param "cdn.css_rtl" >}}" integrity="{{< param "cdn.css_rtl_hash" >}}" crossorigin="anonymous"> -{{< /highlight >}} +``` ### Starter template You can see the above requirements reflected in this modified RTL starter template. -{{< highlight html >}} +```html <!doctype html> <html lang="ar" dir="rtl"> <head> @@ -51,13 +51,19 @@ You can see the above requirements reflected in this modified RTL starter templa <body> <h1>مرحبا بالعالم!</h1> - <!-- Optional JavaScript --> - <!-- Popper.js first, then Bootstrap JS --> + <!-- Optional JavaScript; choose one of the two! --> + + <!-- Option 1: Bootstrap Bundle with Popper.js --> + <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script> + + <!-- Option 2: Separate Popper.js and Bootstrap JS --> + <!-- <script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script> <script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script> + --> </body> </html> -{{< /highlight >}} +``` ### RTL examples @@ -83,13 +89,13 @@ When it comes to [customization]({{< docsref "/customize/sass" >}}), the preferr Using [RTLCSS value directives](https://rtlcss.com/learn/usage-guide/value-directives/), you can make a variable output a different value for RTL. For example, to decrease the weight for `$font-weight-bold` throughout the codebase, you may use the `/*rtl: {value}*/` syntax: -{{< highlight scss >}} +```scss $font-weight-bold: 700 #{/* rtl:600 */} !default; -{{< /highlight >}} +``` Which would ouput to the following for our default CSS and RTL CSS: -{{< highlight css >}} +```css /* bootstrap.css */ dt { font-weight: 700 /* rtl:600 */; @@ -99,7 +105,7 @@ dt { dt { font-weight: 600; } -{{< /highlight >}} +``` ### Alternative font stack @@ -107,7 +113,7 @@ In the case you're using a custom font, be aware that not all fonts support the For example, to switch from `Helvetica Neue Webfont` for LTR to `Helvetica Neue Arabic` for RTL, your Sass code look like this: -{{< highlight scss >}} +```scss $font-family-sans-serif: Helvetica Neue #{"/* rtl:insert:Arabic */"}, // Safari for macOS and iOS (San Francisco) @@ -126,7 +132,7 @@ $font-family-sans-serif: sans-serif, // Emoji fonts "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; -{{< /highlight >}} +``` ## The breadcrumb case |