介绍
Bootstrap-Responsive-Tabs 是一种可以轻松创建响应式标签页的库。这个库构建在 Bootstrap 框架上，可以用来创建响应式标签页，可以满足不同屏幕大小的需求。
安装
通过 npm 来安装 Bootstrap-Responsive-Tabs：
npm install bootstrap-responsive-tabs --save
在 HTML 文件中引入 Bootstrap 和 Bootstrap-Responsive-Tabs：
-- -------------------- ---- ------- ------ --------- ----- ----- ---------------- ----------------------------------------------------------------------------- ------ ------------------------- ----- ----- ---------------- ---------------------------------------------- ------ --------- ------------- ------- ----------------------------------------------------------- ------- -----------------------------------------------------------------------------------
用法
HTML 结构
Bootstrap-Responsive-Tabs 支持以下 HTML 结构：
-- -------------------- ---- -------
---- ------------------------
--- ---------- ----------
------ ---------------- ----------
------ ---------------- ----------
------ ---------------- ----------
-----
---- --------------------
---- ---------------- ------------- - -------------
---- ---------------- ------------- - -------------
---- ---------------- ------------- - -------------
------
------JavaScript
要使 Bootstrap-Responsive-Tabs 工作，只需在文档加载后调用以下 JavaScript 函数：
$(".responsive-tabs").responsiveTabs({
active: 0,
animation: "slide",
duration: 200,
rotate: false
});默认选项是：
-- -------------------- ---- ------- - ------- -- --------------- ------ ------------ ------ ------- ------ ---------- ---------- --------- ---- ------------------ ----- ------------------------ -- --------------- --- --------------- --- ----------------- ----------------------- ---------- --------------------------- --------- --------------------------- ------------ ------------------------------ ----------- ----------------------------- ------------ --------------------- -
如果您想更改默认设置，只需将其传递给 responsiveTabs() 函数即可。
示例
以下是一个基本示例：
-- -------------------- ---- -------
---- ------------------------
--- ---------- ----------
------ ---------------- ----------
------ ---------------- ----------
------ ---------------- ----------
-----
---- --------------------
---- ---------------- ------------- - -------------
---- ---------------- ------------- - -------------
---- ---------------- ------------- - -------------
------
------
--------
---------------------------- -
---------------------------------------
---
---------结论
Bootstrap-Responsive-Tabs 是一个非常灵活的库，可以让你快速创建响应式标签页。这个库在移动设备上运行良好，可以改善用户体验。在你的下一个项目中使用它吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c82ccdc64669dde4d5a