mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 04:41:36 +02:00
Code Issues Releases Wiki Activity

feat(RTL): implement RTL

Browse Source 
Using RTLCSS directives, renaming things to use logical names and following best practices.
This commit is contained in:
Gaël Poupard
2020-06-26 17:06:20 +03:00
committed by XhmikosR
parent 71ecc3323f
commit 9488978fb5
37 changed files with 301 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
js/tests/visual/dropdown.html
View File

@@ -90,9 +90,9 @@
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
This dropdown's menu is right-aligned
This dropdown's menu is end-aligned
</button>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
@@ -102,19 +102,19 @@
<div class="col-sm-12 mt-4">
<div class="btn-group dropup" role="group">
<a href="#" class="btn btn-secondary">Dropup split align right</a>
<a href="#" class="btn btn-secondary">Dropup split align end</a>
<button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Product actions</span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here with a long text</button>
</div>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup align right</button>
<div class="dropdown-menu dropdown-menu-right">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup align end</button>
<div class="dropdown-menu dropdown-menu-end">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here with a long text</button>
@@ -123,8 +123,8 @@
</div>
<div class="col-sm-12 mt-4">
<div class="btn-group dropright" role="group">
<a href="#" class="btn btn-secondary">Dropright split</a>
<div class="btn-group dropend" role="group">
<a href="#" class="btn btn-secondary">Dropend split</a>
<button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Product actions</span>
</button>
@@ -134,9 +134,9 @@
<button class="dropdown-item" type="button">Something else here with a long text</button>
</div>
</div>
<div class="btn-group dropright">
<div class="btn-group dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
Dropend
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuRight">
<button class="dropdown-item" type="button">Action</button>
@@ -144,9 +144,9 @@
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<!-- dropleft -->
<div class="btn-group dropleft" role="group">
<a href="#" class="btn btn-secondary">Dropleft split</a>
<!-- dropstart -->
<div class="btn-group dropstart" role="group">
<a href="#" class="btn btn-secondary">Dropstart split</a>
<button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Product actions</span>
</button>
@@ -156,11 +156,11 @@
<button class="dropdown-item" type="button">Something else here with a long text</button>
</div>
</div>
<div class="btn-group dropleft">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenu" data-bs-toggle="dropdown" aria-expanded="false">
Dropleft
<div class="btn-group dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenu" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<div class="dropdown-menu" aria-labelledby="dropleftMenu">
<div class="dropdown-menu" aria-labelledby="dropstartMenu">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>

4
js/tests/visual/popover.html
View File

@@ -19,7 +19,7 @@
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
Popover on end
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
@@ -27,7 +27,7 @@
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
Popover on start
</button>
</div>

2
js/tests/visual/scrollspy.html
View File

@@ -16,7 +16,7 @@
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>

10
js/tests/visual/toast.html
View File

@@ -28,8 +28,8 @@
<div class="notifications">
<div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
<div class="toast-header">
<span class="d-block bg-primary rounded mr-2" style="width: 20px; height: 20px;"></span>
<strong class="mr-auto">Bootstrap</strong>
<span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</div>
<div class="toast-body">
@@ -39,10 +39,10 @@
<div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<span class="d-block bg-primary rounded mr-2" style="width: 20px; height: 20px;"></span>
<strong class="mr-auto">Bootstrap</strong>
<span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="ml-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically

5
js/tests/visual/tooltip.html
View File

@@ -10,7 +10,6 @@
border: 1px solid;
width: 100px;
height: 50px;
border: 1px solid;
margin-left: 50px;
transform: rotate(270deg);
margin-top: 100px;
@@ -34,13 +33,13 @@
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
Tooltip on end
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
Tooltip on start
</button>
</p>
</div>