mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-25 04:12:55 +01:00
Adapt to the recent main branch changes
This commit is contained in:
XhmikosR
parent
aaff11a0b3
commit
edfa103444
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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="بحث">
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user