bootstrap 切换到逻辑属性以一次处理LTR/RTL

zphenhs4  于 10个月前  发布在  Bootstrap
关注(0)|答案(2)|浏览(110)

前提条件

建议

参考
这个评论
和 this SO answer,以及
CanIUse inset-inline-end 和其他，
自2020年中以来，似乎所有主要浏览器(或绿色？)都支持以下属性(或绿色？)
inset-inline-start(代替 left 属性)
inset-inline-end(代替 right 属性)
margin-inline-start(代替 margin-left 属性)
margin-inline-end(代替 margin-right 属性)
margin-inline(代替 margin 简写属性)
padding-inline-start(代替 padding-left 属性)
padding-inline-end(代替 padding-right 属性)
padding-inline(代替 padding 简写属性)
text-align: start;(代替 left 值)
text-align: end;(代替 right 值)
float: inline-start;(代替 left 值)
float: inline-end;(代替 right 值)
以下样式仍然使用 left 和 right
me-0 ... 'me-auto',
ms-0 ... ms-auto ,
.start ... .start-100
.end ... end-100
然而，使用上述属性和属性将使 LTR 和 RTL 之间的过渡更容易
因此，而不是
LTR .start-0 { left: 0 !important; }
RTL .start-0 { right: 0 !important; }
我们可以只有
.start-0 { inset-inline-start: 0 !important; }
等等。
目前我正在使用以下 html 进行这些过渡测试，这使我可以立即在 LTR 和 RTL 之间进行过渡

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  6.     <link rel="stylesheet" href="bootstrap-5.3.0/bootstrap.css">
  7.     <link rel="stylesheet" href="this/main.css">
  8.     <script src="jquery.1.11.3/jquery.min.js"></script>
  9.     <script src="bootstrap-5.3.0/bootstrap.bundle.js"></script>
  10.     <script>
  11.         $(function () {
  12.             const $html = $('html');
  13.             if (localStorage.getItem('dir') === 'rtl') {
  14.                 $html.attr('dir', 'rtl');
  15.             } else {
  16.                 $html.removeAttr('dir')
  17.             }
  18.             $('#btnDir').click(function () {
  19.                 if ($html.attr('dir') === 'rtl') {
  20.                     $html.removeAttr('dir');
  21.                     localStorage.removeItem('dir')
  22.                 } else {
  23.                     $html.attr('dir', 'rtl');
  24.                     localStorage.setItem('dir', 'rtl')
  25.                 }
  26.             });
  27.         })
  28.     </script>
  29. </head>
  30. <body>
  31.     <input type="button" id="btnDir" class="btn btn-primary" value="direction            ">
  32.     <!-- Elements being tested below-->
  33.     <div class="toast-container p-3 bottom-0 end-0" aria-live="polite" aria-atomic="true">
  34.         <div class="toast show text-bg-danger" role="alert" aria-live="assertive" aria-atomic="true">
  35.             <div class="toast-header">
  36.                 <strong class="me-auto">Toast-Header</strong>
  37.                 <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  38.             </div>
  39.             <div class="toast-body">Toast Body</div>
  40.         </div>
  41.         <div class="toast text-bg-danger border-0 show" role="alert" aria-live="assertive" aria-atomic="true">
  42.             <div class="d-flex">
  43.                 <div class="toast-body">
  44.                     Hello, world! This is a toast message.
  45.                 </div>
  46.                 <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  47.             </div>
  48.         </div>
  49.         <div class="toast text-bg-primary border-0 show" role="alert" aria-live="assertive" aria-atomic="true">
  50.             <div class="d-flex">
  51.                 <div class="toast-body">Toast Body</div>
  52.                 <button type="button" class="btn-close btn-close-white m-auto ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
  53.             </div>
  54.         </div>
  55.     </div>
  56. </body>
  57. </html>

main.css 的内容如下(显然，为了这些能够工作，我需要在 bootstrap.css 中注解它们的对应部分)

  1. .text-start{ text-align:start !important; }
  2. .text-end{ text-align:end !important; }
  4. .me-0{ margin-inline-end:0 !important }
  5. .me-1{ margin-inline-end:0.25rem !important }
  6. .me-2{ margin-inline-end:0.5rem !important }
  7. .me-3{ margin-inline-end:1rem !important }
  8. .me-4{ margin-inline-end:1.5rem !important }
  9. .me-5{ margin-inline-end:3rem !important }
  10. .me-auto{ margin-inline-end:auto !important }
  12. .start-0{ inset-inline-start:0 !important; }
  13. .start-50{ inset-inline-start:50% !important;}
  14. .start-100{ inset-inline-start:100% !important;}
  16. .end-0{ inset-inline-end:0 !important; }
  17. .end-50{ inset-inline-end:50% !important;}
  18. .end-100{ inset-inline-end:100% !important;}
  20. .toast-header .btn-close {
  21.     margin-inline-end: calc(-0.5 * var(--bs-toast-padding-x));
  22.     margin-inline-start: var(--bs-toast-padding-x);
  23. }

动机和背景

我认为它允许从拥有两个单独的 CSS(LTR 和 RTL)到一个单一文件的过渡。
而且在未来，如果你想支持从上到下的语言；

Bootstrap

2条答案

按热度按时间
l2osamch

l2osamch1#

在三年前实施v5的RTL时，这已经考虑过了(参见#30918)。当时支持仍然不足，但切换到逻辑属性应该是V6的主要举措之一。
我将此标签标记为v6,因为我注意到目前没有专门的问题！

赞(0）分享  回复(0）举报  10个月前
hvvq6cgz

hvvq6cgz2#

或者更合理的做法是保留选择器，改变属性。这样在从左到右(LTR)的布局中，设计为从左到右(LTR),而在从右到左(RTL)的布局中，它会神奇地切换到从右到左(RTL)。

  1. text-left { text-align: start}
  2. text-right {text-align: end}

我真的期待(希望)这一点，不知道为什么你们选择了极端的方法来重命名选择器，而不是保留属性。

  1. text-start {text-align: left}

为什么？

赞(0）分享  回复(0）举报  10个月前
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com