Download the PHP package kartik-v/bootstrap-tabs-x without Composer
On this page you can find all versions of the php package kartik-v/bootstrap-tabs-x. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download kartik-v/bootstrap-tabs-x
More information about kartik-v/bootstrap-tabs-x
Files in kartik-v/bootstrap-tabs-x
Package bootstrap-tabs-x
Short Description Extended Bootstrap Tabs with ability to align tabs in multiple ways, add borders, rotated titles, and more.
License BSD-3-Clause
Homepage https://github.com/kartik-v/bootstrap-tabs-x
Informations about the package bootstrap-tabs-x
bootstrap-tabs-x
[![Bower version](https://badge.fury.io/bo/bootstrap-tabs-x.svg)](http://badge.fury.io/bo/bootstrap-tabs-x)
[![Latest Stable Version](https://poser.pugx.org/kartik-v/bootstrap-tabs-x/v/stable)](https://packagist.org/packages/kartik-v/bootstrap-tabs-x)
[![License](https://poser.pugx.org/kartik-v/bootstrap-tabs-x/license)](https://packagist.org/packages/kartik-v/bootstrap-tabs-x)
[![Packagist Downloads](https://poser.pugx.org/kartik-v/bootstrap-tabs-x/downloads)](https://packagist.org/packages/kartik-v/bootstrap-tabs-x)
[![Monthly Downloads](https://poser.pugx.org/kartik-v/bootstrap-tabs-x/d/monthly)](https://packagist.org/packages/kartik-v/bootstrap-tabs-x)
Extended Bootstrap Tabs with ability to align tabs in multiple ways, add borders, rotated titles, load tab content via ajax including caching, and more. This plugin includes various CSS3 styling enhancements and various tweaks to the core Bootstrap Tabs plugin.
Features
The plugin offers these enhanced features:
- Supports all Bootstrap library releases from v5.x, v4.x and v3.x.
- Supports various tab opening directions:
above
(default),below
,right
, andleft
. - Allows you to box the tab content in a new
bordered
style. This can work with any of the tab directions above. - Allows you to align the entire tab content to the
left
(default),center
, orright
of the parent container/page. - Automatically align & format heights and widths for bordered tabs for
right
andleft
positions. - Allows a rotated
sideways
tab header orientation for theright
andleft
tab directions. - Auto detect overflowing header labels for
sideways
orientation (with ellipsis styling) and display full label as a title on hover. - Ability to load tab content via ajax call.
- With release v1.3.0, you can use this like an enhanced jQuery plugin using the function
$fn.tabsX
on the.tabs-x
parent element.
Demo
View the plugin documentation and plugin demos at Krajee JQuery plugins.
Pre-requisites
- Bootstrap 5.x or 4.x or 3.x (Requires bootstrap
tabs.js
) - Latest JQuery
- Most browsers supporting CSS3 & JQuery.
Installation
Using Bower
You can use the bower
package manager to install. Run:
bower install bootstrap-tabs-x
Using Composer
You can use the composer
package manager to install. Either run:
$ php composer.phar require kartik-v/bootstrap-tabs-x "@dev"
or add:
"kartik-v/bootstrap-tabs-x": "@dev"
to your composer.json file
Manual Install
You can also manually install the plugin easily to your project. Just download the source ZIP or TAR ball and extract the plugin assets (css and js folders) into your project.
Usage
Load Client Assets
You must first load the following assets in your header.
If you noticed, you need to load the bootstrap.min.css
, jquery.min.js
, and bootstrap.min.js
in addition to the bootstrap-tabs-x.css
and bootstrap-tabs-x.js
for
the plugin to work with default settings.
Note: The plugin extends the bootstrap tabs plugin and hence the
bootstrap.min.js
must be loaded beforebootstrap-tabs-x.js
.
Markup
You just need to setup the markup for the extended bootstrap tabs to work now. Refer documentation for details.
Bootstrap 5.x
Bootstrap 4.x
Bootstrap 3.x
Via Javascript
The javascript methods and events available in the core bootstrap tabs plugin will be available here as well. Note as in the earlier markup methods, the tabsX
plugin function behavior is auto-initialized if you set the CSS class tabs-x
on a container element on the page (e.g. div
). You can optionally enable tabsX behavior manually via javascript, by not assigning the tabsX
class on your container. For example if your markup is like below:
You can enable the tabsX plugin via javascript like below:
Documentation
View the plugin documentation at Krajee plugins.
License
bootstrap-tabs-x is released under the BSD 3-Clause License. See the bundled LICENSE.md
for details.