bootstrap-vertical-tabs

WebJar for bootstrap-vertical-tabs

Лицензия

Лицензия

MIT
Группа

Группа

org.webjars.npm
Идентификатор

Идентификатор

bootstrap-vertical-tabs
Последняя версия

Последняя версия

1.2.2
Дата

Дата

Тип

Тип

jar
Описание

Описание

bootstrap-vertical-tabs
WebJar for bootstrap-vertical-tabs
Ссылка на сайт

Ссылка на сайт

http://webjars.org
Система контроля версий

Система контроля версий

https://github.com/dbtek/bootstrap-vertical-tabs

Скачать bootstrap-vertical-tabs

Как подключить последнюю версию

<!-- https://jarcasting.com/artifacts/org.webjars.npm/bootstrap-vertical-tabs/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>bootstrap-vertical-tabs</artifactId>
    <version>1.2.2</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/bootstrap-vertical-tabs/
implementation 'org.webjars.npm:bootstrap-vertical-tabs:1.2.2'
// https://jarcasting.com/artifacts/org.webjars.npm/bootstrap-vertical-tabs/
implementation ("org.webjars.npm:bootstrap-vertical-tabs:1.2.2")
'org.webjars.npm:bootstrap-vertical-tabs:jar:1.2.2'
<dependency org="org.webjars.npm" name="bootstrap-vertical-tabs" rev="1.2.2">
  <artifact name="bootstrap-vertical-tabs" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='bootstrap-vertical-tabs', version='1.2.2')
)
libraryDependencies += "org.webjars.npm" % "bootstrap-vertical-tabs" % "1.2.2"
[org.webjars.npm/bootstrap-vertical-tabs "1.2.2"]

Зависимости

Библиотека не имеет зависимостей. Это самодостаточное приложение, которое не зависит ни от каких других библиотек.

Модули Проекта

Данный проект не имеет модулей.

Bootstrap Vertical Tabs bower version

Vertical tabs component for Bootstrap 3.

screenshot

Install

  • Via npm:
 $ npm i -S bootstrap-vertical-tabs
  • Via bower (recommended):
 $ bower install bootstrap-vertical-tabs
  • Or you can just clone, download from GitHub.

Usage

  • Get the package.
  • Include css in your html. / Load with webpack or css processors.
  • Use it.

Left Tabs

<div class="col-xs-3"> <!-- required for floating -->
    <!-- Nav tabs -->
    <ul class="nav nav-tabs tabs-left">
      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
      <li><a href="#profile" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" data-toggle="tab">Messages</a></li>
      <li><a href="#settings" data-toggle="tab">Settings</a></li>
    </ul>
</div>

<div class="col-xs-9">
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="home">Home Tab.</div>
      <div class="tab-pane" id="profile">Profile Tab.</div>
      <div class="tab-pane" id="messages">Messages Tab.</div>
      <div class="tab-pane" id="settings">Settings Tab.</div>
    </div>
</div>

Right Tabs

<div class="col-xs-9">
  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home-r">Home Tab.</div>
    <div class="tab-pane" id="profile-r">Profile Tab.</div>
    <div class="tab-pane" id="messages-r">Messages Tab.</div>
    <div class="tab-pane" id="settings-r">Settings Tab.</div>
  </div>
</div>

<div class="col-xs-3"> <!-- required for floating -->
  <!-- Nav tabs -->
  <ul class="nav nav-tabs tabs-right">
    <li class="active"><a href="#home-r" data-toggle="tab">Home</a></li>
    <li><a href="#profile-r" data-toggle="tab">Profile</a></li>
    <li><a href="#messages-r" data-toggle="tab">Messages</a></li>
    <li><a href="#settings-r" data-toggle="tab">Settings</a></li>
  </ul>
</div>

Sideways Tabs 🆕

Add sideways class to tabs.

Example:

  <ul class="nav nav-tabs tabs-left sideways">
    ...

screenshot vertical texts

Further, take a look at included demo!

License

MIT

Author

Ismail Demirbilek, @dbtek.

Версии библиотеки

Версия
1.2.2