https://github.com/dsentker/responsive-bootstrap-tabs
Transform bootstrap tabs to a select menu for mobile phones
https://github.com/dsentker/responsive-bootstrap-tabs
Last synced: about 2 months ago
JSON representation
Transform bootstrap tabs to a select menu for mobile phones
- Host: GitHub
- URL: https://github.com/dsentker/responsive-bootstrap-tabs
- Owner: dsentker
- License: unlicense
- Created: 2023-08-29T12:17:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-29T16:47:18.000Z (over 1 year ago)
- Last Synced: 2025-02-09T18:52:12.629Z (3 months ago)
- Language: HTML
- Size: 5.86 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Responsive* Bootstrap Tabs
**Or just "`RBT`"**
This vanilla script turns bootstrap tabs into a select element if the viewport is too small.
Works with BS 4.x and 5.x.
*) Catchy, but not entirely accurate: Responsive in the sense of "I adapt to the width of the screen".
## How does it work?
This script takes all bootstrap tab navigations and turns the click trigger (e.g. a button element) into a `` element with options related to the click trigger. The new select element appears where the tab navigation previously appeared (which has now been hidden).
## Installation
Reference `rbt.js` from this repository and use the `rbt` object:
```html
rbt.subscribeResizeEvent().start(992);
```
## Usage
The script automatically converts all tabs into `` elements if the following requirements are met:
- The `
- ` wrapper for tab navigation has the `.tab` class
- The `
- ` wrapper for tab navigation has the data-attribute `data-responsive`
- The click targets (buttons) for each tab has, as described in the Bootstrap documentation, the `data-target` (BS 4.x) / `data-bs-target` (BS 5.x) attribute.
## Methods
### `rbt.start()`
Take all tab navigations and turn them into select elements if the viewport width is lower than ``.
### `rbt.subscribeResizeEvent()`
Start an event listener for the `resize` event. Must be used together with the `start()` method.
### `rbt.destroy()`
Remove all dynamic created select elements and use the tab markup as initially created.
## Examples
See [example-4.6.html](example-4.6.html) for Bootstrap 4.6.x or [example-5.3.html](example-5.3.html) for Bootstrap 5.x.