前端UI组件【免费下载链接】BOOTSTRA.386A vintage 1980s DOS inspired Twitter Bootstrap theme项目地址https://gitcode.com/gh_mirrors/bo/BOOTSTRA.386点击查看免费下载导读RTLRight-to-Left从右到左是阿拉伯语、希伯来语、波斯语等语言的排版方向。本文围绕 BOOTSTRA.386 v5.3.1Bootstrap 5.3.1 的复古 DOS 风格主题的 RTL 官方指南系统讲解如何在页面中启用 RTL、理解其基于 RTLCSS 的构建方案、掌握start/end逻辑属性logical properties的用法以及如何从 Sass 源码层面定制 RTL 输出值指令、字体栈替换、同页 LTR/RTL 共存。读完后你将能够为基于 BOOTSTRA.386 的站点提供完整的双语LTR RTL布局能力。注意Bootstrap 的 RTL 特性目前仍处于实验性阶段会根据社区反馈持续演进。如果你发现问题或有改进建议可以在仓库的 issues 中提出。启用 RTL 的两条硬性要求要为 BOOTSTRA.386 驱动的页面开启 RTLHTML 层面有两个严格前提在html元素上设置dirrtl在html元素上添加合适的语言属性如langar。之后还需要引入编译好的 RTL 版本样式表。例如官方文档中给出的 CDN 引入方式cdn.css_rtl与cdn.css_rtl_hash分别对应 RTL CSS 的地址与 SRI 完整性哈希link relstylesheet href{{ param cdn.css_rtl }} integrity{{ param cdn.css_rtl_hash }} crossoriginanonymous在仓库中这份 RTL 样式表就是 dist/css/bootstrap.rtl.css它由同一套 Sass 源码经 RTLCSS 处理后生成对应的压缩版为bootstrap.rtl.min.css。仓库还同时提供bootstrap-grid.rtl.css、bootstrap-reboot.rtl.css、bootstrap-utilities.rtl.css等细分模块的 RTL 版本见 v5.3.1/dist/css。修改后的 RTL 起步模板下面是将上述要求落实为完整 HTML 的 RTL 起步模板官方文档称之为 Starter template!doctype html html langar dirrtl head !-- Required meta tags -- meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 !-- Bootstrap CSS -- link relstylesheet href{{ param cdn.css_rtl }} integrity{{ param cdn.css_rtl_hash }} crossoriginanonymous titleمرحبًا بالعالم!/title /head body h1مرحبًا بالعالم!/h1 !-- Optional JavaScript; choose one of the two! -- !-- Option 1: Bootstrap Bundle with Popper -- script src{{ param cdn.js_bundle }} integrity{{ param cdn.js_bundle_hash }} crossoriginanonymous/script !-- Option 2: Separate Popper and Bootstrap JS -- !-- script src{{ param cdn.popper }} integrity{{ param cdn.popper_hash }} crossoriginanonymous/script script src{{ param cdn.js }} integrity{{ param cdn.js_hash }} crossoriginanonymous/script -- /body /html模板中的 JS 采用双选方案默认引入 Bootstrap Bundle内含 Popper或按需分别引入 Popper 与 Bootstrap 独立 JS。RTL 示例仓库内置了多套完整的 RTL 示例页面位于 v5.3.1/site/content/docs/5.3/examples 下带-rtl后缀的目录例如blog-rtl、carousel-rtl、dashboard-rtl、cheatsheet-rtl、checkout-rtl等。以 blog-rtl/index.html 为例其 front matter 通过direction: rtl声明页面方向并通过extra_css引入../blog/blog.rtl.css作为 RTL 专属样式。这些示例是快速上手的理想起点。构建方案RTLCSS 逻辑属性Bootstrap 的 RTL 支持建立在两个关键决策之上这也直接决定了整个 CSS 的编写方式使用 RTLCSS 项目构建 RTL。RTLCSS 提供了在从 LTR 迁移到 RTL 时管理变更与覆盖的强有力特性并允许我们从同一套代码库构建出 LTR 与 RTL 两个版本。仓库的 package.json 将其列为开发依赖rtlcss: ^4.1.0并提供了完整的构建脚本链css-compile用 Sass 将scss/编译到dist/css/css-rtl通过 PostCSS RTLCSS 把编译产物处理为*.rtl.csscss-minify-rtl对*rtl.css做压缩生成*.rtl.min.csscss串联css-compile、css-prefix、css-rtl、css-minify与bootstra完成整条构建流水线。将一批方向类改名为逻辑属性方案。大多数开发者已经通过 flex 工具类接触过逻辑属性——它用start、end取代left、right这类方向属性使类名和取值在 LTR 与 RTL 下都适用无需额外开销。例如不再使用.ml-3margin-left而是使用.ms-3margin-start。在源码层面逻辑属性贯穿于 scss/_utilities.scss 的整个工具类系统。以 float 工具类为例float: ( responsive: true, property: float, values: ( start: left, end: right, none: none, ) ),它把语义上的start/end映射为 LTR 下的left/rightRTLCSS 在生成 RTL 版本时会自动翻转。同样地border 系列也遵循这一约定见_utilities.scss中border-end与border-start的定义分别映射border-right与border-left。组件层同样大量使用逻辑属性与border-start-radius/border-end-radius这类 mixin例如scss/_button-group.scssinclude border-end-radius(0)与include border-start-radius(0)scss/_card.scss、scss/forms/_input-group.scss、scss/_pagination.scss 中的分页圆角处理对应 mixin 定义在 scss/mixins/_border-radius.scss。除此之外RTLCSS 的各类控制指令也在源码中直接使用例如scss/_popover.scss 与 scss/_tooltip.scss 中用/* rtl:begin:ignore *///* rtl:end:ignore */保护不需要翻转的规则scss/_spinners.scss 中用/* rtl:ignore */保证旋转动画方向不被镜像scss/mixins/_utilities.scss 中用/* rtl:begin:remove *///* rtl:end:remove */在 RTL 版本中整体移除标记了rtl: false的工具类如_utilities.scss中word-wrap的text-break。从源码结构看这套一套源码、双版本输出的机制是 RTL 支持得以低维护成本运转的核心。从 Sass 源码定制 RTL官方推荐的自定义方式是充分利用变量variables、映射maps与 mixin这套做法对 RTL 同样适用——因为 RTLCSS 本质上是对编译后文件的后处理所以无论通过源码还是编译产物效果一致。自定义 RTL 取值RTLCSS 值指令借助 RTLCSS 的 value directives你可以让某个变量在 RTL 下输出不同的值。例如想让$font-weight-bold在整个代码库中的 RTL 版本里字重从 700 降为 600可以使用/*rtl: {value}*/语法$font-weight-bold: 700 #{/* rtl:600 */} !default;编译加 RTL 处理后的输出效果为/* bootstrap.css */ dt { font-weight: 700 /* rtl:600 */; } /* bootstrap.rtl.css */ dt { font-weight: 600; }可以看到LTR 版本保留了原始注释而 RTL 版本被替换为指定值。替换字体栈/*rtl:insert: {value}*/如果使用自定义字体需要注意并非所有字体都支持非拉丁字母。要从泛欧洲字体切换到阿拉伯语字体族需要在字体栈中使用/*rtl:insert: {value}*/指令修改字体族的名称。例如把 LTR 下的Helvetica Neue切换为 RTL 下的Helvetica Neue Arabic$font-family-sans-serif: Helvetica Neue #{/* rtl:insert:Arabic */}, // Cross-platform generic font family (default user interface font) system-ui, // Safari for macOS and iOS (San Francisco) -apple-system, // Chrome 56 for macOS (San Francisco) BlinkMacSystemFont, // Windows Segoe UI, // Android Roboto, // Basic web fallback Arial, // Linux Noto Sans, // Sans serif fallback sans-serif, // Emoji fonts Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !default;#{/* rtl:insert:Arabic */}这种插值写法是为了让 Sass 保留注释原文、把指令原样输出到 CSSRTLCSS 处理时再把Arabic插入到Helvetica Neue之后形成Helvetica Neue Arabic。同一页面同时使用 LTR 与 RTL如果需要在同一个页面上同时提供 LTR 与 RTL 两种方向可以借助 RTLCSS 的 String Maps 机制把import包在一个类选择器中并为 RTLCSS 设置自定义重命名规则/* rtl:begin:options: { autoRename: true, stringMap:[ { name: ltr-rtl, priority: 100, search: [ltr], replace: [rtl], options: { scope: *, ignoreCase: false } } ] } */ .ltr { import ../node_modules/bootstrap/scss/bootstrap; } /*rtl:end:options*/运行 Sass 与 RTLCSS 之后LTR 文件中每个选择器都会被前置.ltrRTL 文件中则被前置.rtl。于是你可以同时加载两份样式并只在需要切换方向的组件外层套上.ltr或.rtl类即可。在 BOOTSTRA.386 的仓库布局下导入路径即 v5.3.1/scss/bootstrap.scss。使用这种 LTR RTL 混合方案时需要注意官方文档明确列出的边缘情况与已知限制切换.ltr与.rtl时必须相应地为元素添加dir与lang属性同时加载两份样式会造成真实的性能瓶颈建议参考优化指南并考虑异步加载其中一份样式文件以这种方式嵌套样式会使form-validation-state()mixin 无法按预期工作需要自行微调可参考 Bootstrap 相关的 issue 讨论。面包屑breadcrumb的特殊处理面包屑分隔符是唯一需要全新专用变量的场景——即$breadcrumb-divider-flipped其默认值等于$breadcrumb-divider。在 scss/_variables.scss 中可以找到它的定义$breadcrumb-divider: quote(/) !default; $breadcrumb-divider-flipped: $breadcrumb-divider !default;在 scss/_breadcrumb.scss 中分隔符通过 RTLCSS 值指令在同一行内同时输出 LTR 与 RTL 两个候选值content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{/* rtl:} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{*/};编译产物验证了这一机制在 dist/css/bootstrap.rtl.css 中.breadcrumb-item .breadcrumb-item::before的content被输出为/默认分隔符同时float由left翻转为right、padding-left/padding-right互换。默认分隔符/在 RTL 下视觉上仍然合理但如果需要为 RTL 使用方向性更强的分隔符如\覆盖$breadcrumb-divider-flipped即可。更多参考资源RTLCSS 官方文档理解控制指令、值指令与 String Maps 的完整用法RTL Styling 101RTL 样式化的实战经验仓库内的 v5.3.1/dist/css 目录提供了全部 RTL 编译产物可直接比对 LTR 与 RTL 输出差异v5.3.1/site/content/docs/5.3/getting-started/introduction.md 是官方推荐的入门前提读物。赞分享前端UI组件【免费下载链接】BOOTSTRA.386A vintage 1980s DOS inspired Twitter Bootstrap theme项目地址https://gitcode.com/gh_mirrors/bo/BOOTSTRA.386点击查看免费下载相关推荐Gentelella v4 的 RTL从右到左支持CSS 逻辑属性驱动的国际化布局方案Gentelella v4 的 RTL从右到左支持CSS 逻辑属性驱动的国际化布局方案 output_article Gentelella v4 RTL前端如何用Mermaid.js快速绘制专业图表从入门到精通的完整指南如何用Mermaid.js快速绘制专业图表从入门到精通的完整指南 你是否曾为制作流程图、类图或甘特图而头疼想象一下你需要在技术文档中插入一个清晰的系统架构图表库前端数据可视化逐行拆解PySnooper调试日志看懂call、line、return事件与变量追踪输出的完整指南逐行拆解PySnooper调试日志看懂call、line、return事件与变量追踪输出的完整指南 PySnooper 是一个零配置的 Python 轻开发工具调试器上一篇使用 lego 与 Joker.com 的 DNS-01 挑战DMAPI 与 SVC 双模式实战指南下一篇kuba-car酷霸小车基础运动前进、后退、转弯与停止的5种玩法创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考