前言
随着互联网的发展，越来越多的阿拉伯用户也开始使用各种网站，在阿拉伯语言环境下进行网页布局设计时，使用从右往左（RTL）的布局是一种常见的选择。Bootstrap 是目前最受欢迎的前端框架之一，但是默认情况下 Bootstrap 并不支持 RTL 布局。本文介绍一种 npm 包 bootstrap-rtl-ondemand，该包可以很方便地将 Bootstrap 转变为 RTL 布局，支持从左到右（LTR）和从右到左（RTL）两种选择。
安装
打开终端，进入项目文件夹，输入以下命令即可安装 bootstrap-rtl-ondemand。
npm install bootstrap-rtl-ondemand --save-dev
安装完成后，添加相关依赖（如 gulp, gulp-less, gulp-rename 等依赖）。
使用
接着在 HTML 文件中添加以下代码：
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/MahdiMajidzadeh/bootstrap-rtl/v3.3.7/dist/css/bootstrap-rtl.min.css">
使用样式文件前，需要从 node_modules/bootstrap/less 文件夹引入所有主要的 less 文件到 app.less 文件中。可以采用以下代码：
@import "../../node_modules/bootstrap/less/bootstrap";
然后将以下代码添加到 gulpfile.js 文件中：
-- -------------------- ---- ------- --- ---- - ---------------- --- ---- - --------------------- --- ------ - ----------------------- --- ------ - ----------------------- ----------------- ---------- - ------ -------------------- ------------- ------------------------ --------------- -------------- ------- ------ --- ------------------------- --- -------------------- ----------
上面的代码中，gulp、gulp-less、gulp-rename、gulp-rtlcss 都是需要使用的相关包，可以先安装这些包，然后将以上代码加入到 gulpfile.js 中。
最后在需要使用的 HTML 文件中，引用从 css 目录下的 app.css 和 app-rtl.css。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- -----------
----- ---------------- --------------- -----------------------------------------------------------------------------
----- ---------------- --------------- -----------------------
-------
------
---- ------------------
--- ------------------------- --------- ---------
----
---- ------------
---- -----------------
---------- ------
------- -- ---- ---- ------ - ---- ---------
------
---- -----------------
---------- ------
------- -- ---- ---- ------ - ---- ---------
------
---- -----------------
---------- ------
------- -- ---- ---- ------ - ---- ---------
------
------
------
------- --------------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------
-------
-------总结
bootstrap-rtl-ondemand 包提供了非常方便的方式将 Bootstrap 的所有样式表转换为 RTL 版本。通过引入这些样式表，可以简单快捷地实现 RTL 布局。同时，本文的示例代码也介绍了如何在项目中引入和使用该包，希望能够对各位有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c82ccdc64669dde4d4e