Bootstrap Directional Buttons / Дизайн / Плагины Bootstrap

Версия: v1.0.1

Каталог: Плагины Bootstrap

Категория: Дизайн

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify

Язык: Английский

Вес файла: 96.2 Kb

Уникальный ID: 1977

Посмотрели: 1950 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 65 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/westonganger/bootstrap-directional-buttons

Информация: Пользователям

Информация: Правообладателям

Теги: Plugin, Button, Bootstrap

Поделился: BootstrapТема

Добавлено: 2017-04-20 в 07:12

Метка: 1588861510

⇄ ⇅

<h4>Regular Buttons</h4>
 
 <button type="button" class="btn btn btn-default btn-arrow-left">Default</button>
 <button type="button" class="btn btn btn-primary btn-arrow-left">Primary</button>
 <button type="button" class="btn btn btn-success btn-arrow-left">Success</button>
 <button type="button" class="btn btn btn-link">Link</button>
 <button type="button" class="btn btn-info btn-arrow-right">Info</button>
 <button type="button" class="btn btn-warning btn-arrow-right">Warning</button>
 <button type="button" class="btn btn-danger btn-arrow-right">Danger</button>
 
 <h5>Inside .btn-group</h5>
 
 <div class='btn-group'>
 <button type="button" class="btn btn-default btn-arrow-left">Default</button>
 <button type="button" class="btn btn-primary btn-arrow-left">Primary</button>
 <button type="button" class="btn btn-success btn-arrow-left">Success</button>
 <button type="button" class="btn btn-link">Link</button>
 <button type="button" class="btn btn-info btn-arrow-right">Info</button>
 <button type="button" class="btn btn-warning btn-arrow-right">Warning</button>
 <button type="button" class="btn btn-danger btn-arrow-right">Danger</button>
 </div> 
 
 <h4>Large Buttons</h4>
 
 <button type="button" class="btn btn-lg btn btn-default btn-arrow-left">Default</button>
 <button type="button" class="btn btn-lg btn-primary btn-arrow-left">Primary</button>
 <button type="button" class="btn btn-lg btn-success btn-arrow-left">Success</button>
 <button type="button" class="btn btn-lg btn-link">Link</button>
 <button type="button" class="btn btn-lg btn-info btn-arrow-right">Info</button>
 <button type="button" class="btn btn-lg btn-warning btn-arrow-right">Warning</button>
 <button type="button" class="btn btn-lg btn-danger btn-arrow-right">Danger</button>
 
 <h5>Inside .btn-group</h5>
 
 <div class='btn-group btn-group-lg'>
 <button type="button" class="btn btn-default btn-arrow-left">Default</button>
 <button type="button" class="btn btn-primary btn-arrow-left">Primary</button>
 <button type="button" class="btn btn-success btn-arrow-left">Success</button>
 <button type="button" class="btn btn-link">Link</button>
 <button type="button" class="btn btn-info btn-arrow-right">Info</button>
 <button type="button" class="btn btn-warning btn-arrow-right">Warning</button>
 <button type="button" class="btn btn-danger btn-arrow-right">Danger</button>
 </div>
 
 <h4>Small Buttons</h4>
 
 <button type="button" class="btn btn-sm btn btn-default btn-arrow-left">Default</button>
 <button type="button" class="btn btn-sm btn-primary btn-arrow-left">Primary</button>
 <button type="button" class="btn btn-sm btn-success btn-arrow-left">Success</button>
 <button type="button" class="btn btn-sm btn-link">Link</button>
 <button type="button" class="btn btn-sm btn-info btn-arrow-right">Info</button>
 <button type="button" class="btn btn-sm btn-warning btn-arrow-right">Warning</button>
 <button type="button" class="btn btn-sm btn-danger btn-arrow-right">Danger</button>
 
 <h5>Inside .btn-group</h5>
 
 <div class='btn-group btn-group-sm'>
 <button type="button" class="btn btn btn-default btn-arrow-left">Default</button>
 <button type="button" class="btn btn-primary btn-arrow-left">Primary</button>
 <button type="button" class="btn btn-success btn-arrow-left">Success</button>
 <button type="button" class="btn btn-link">Link</button>
 <button type="button" class="btn btn-info btn-arrow-right">Info</button>
 <button type="button" class="btn btn-warning btn-arrow-right">Warning</button>
 <button type="button" class="btn btn-danger btn-arrow-right">Danger</button>
 </div>
 
 <h4>Extra Small Buttons</h4>
 
 <button type="button" class="btn btn-xs btn btn-default btn-arrow-left">Default</button>
 <button type="button" class="btn btn-xs btn-primary btn-arrow-left">Primary</button>
 <button type="button" class="btn btn-xs btn-success btn-arrow-left">Success</button>
 <button type="button" class="btn btn-xs btn-link">Link</button>
 <button type="button" class="btn btn-xs btn-info btn-arrow-right">Info</button>
 <button type="button" class="btn btn-xs btn-warning btn-arrow-right">Warning</button>
 <button type="button" class="btn btn-xs btn-danger btn-arrow-right">Danger</button>
 
 <h5>Inside .btn-group</h5>
 
 <div class='btn-group btn-group-xs'>
 <button type="button" class="btn btn-default btn-arrow-left">Default</button>
 <button type="button" class="btn btn-primary btn-arrow-left">Primary</button>
 <button type="button" class="btn btn-success btn-arrow-left">Success</button>
 <button type="button" class="btn btn-link">Link</button>
 <button type="button" class="btn btn-info btn-arrow-right">Info</button>
 <button type="button" class="btn btn-warning btn-arrow-right">Warning</button>
 <button type="button" class="btn btn-danger btn-arrow-right">Danger</button>
 </div>

</div></div></div>

BootstrapTema

Bootstrap Directional Buttons

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0