https://github.com/wellwind/bootstrap-responsive-tab-pills-to-navbar
A responsive demo for @twitter bootstrap, when device is lager then tablets, you will see Tab or Pills, when smaller you will see Navbar.
https://github.com/wellwind/bootstrap-responsive-tab-pills-to-navbar
Last synced: 5 months ago
JSON representation
A responsive demo for @twitter bootstrap, when device is lager then tablets, you will see Tab or Pills, when smaller you will see Navbar.
- Host: GitHub
- URL: https://github.com/wellwind/bootstrap-responsive-tab-pills-to-navbar
- Owner: wellwind
- License: gpl-2.0
- Created: 2015-05-29T14:17:21.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2015-06-02T03:28:18.000Z (about 11 years ago)
- Last Synced: 2024-10-06T06:03:57.114Z (over 1 year ago)
- Language: HTML
- Size: 137 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Responsive Bootstrap Tab / Pills To Navbar Demo
A responsive demo for @twitter bootstrap, when device is lager then tablets, you will see Tab or Pills, when smaller you will see Navbar.
To see demo: http://wellwind.github.io/bootstrap-responsive-tab-pills-to-navbar.html
## How To Use
### Step1. Wrap a div with class name responsive-nav-tabs2bar/responsive-nav-pills2bar to navigation code
```HTML
```
### Step2. Add following javasciprt code
```JavaScript
$(document).ready(function() {
var responsiveNavTabs2Bar = function() {
if ($(window).width() >= 768) {
$('.responsive-nav-tabs2bar>nav.navbar').removeClass('navbar-default');
$('.responsive-nav-tabs2bar>nav.navbar>.container-fluid>.navbar-header').hide();
$('.responsive-nav-tabs2bar>nav.navbar>.container-fluid>.navbar-collapse>.nav').removeClass('navbar-nav').addClass('nav-tabs');
}
else {
$('.responsive-nav-tabs2bar>nav.navbar').addClass('navbar-default');
$('.responsive-nav-tabs2bar>nav.navbar>.container-fluid>.navbar-header').show();
$('.responsive-nav-tabs2bar>nav.navbar>.container-fluid>.navbar-collapse>.nav').removeClass('nav-tabs').addClass('navbar-nav');
}
}
var responsiveNavPills2Bar = function() {
if ($(window).width() >= 768) {
$('.responsive-nav-pills2bar>nav.navbar').removeClass('navbar-default');
$('.responsive-nav-pills2bar>nav.navbar>.container-fluid>.navbar-header').hide();
$('.responsive-nav-pills2bar>nav.navbar>.container-fluid>.navbar-collapse>.nav').removeClass('navbar-nav').addClass('nav-pills');
}
else {
$('.responsive-nav-pills2bar>nav.navbar').addClass('navbar-default');
$('.responsive-nav-pills2bar>nav.navbar>.container-fluid>.navbar-header').show();
$('.responsive-nav-pills2bar>nav.navbar>.container-fluid>.navbar-collapse>.nav').removeClass('nav-pills').addClass('navbar-nav');
}
}
$(window).resize(function() {
responsiveNavTabs2Bar();
responsiveNavPills2Bar();
});
responsiveNavTabs2Bar();
responsiveNavPills2Bar();
});
```
### Step 3. Resize the browse and see it works!