Bootstrap Popover X / Улучшение / Плагины Bootstrap

Версия: v1.4.3

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

Категория: Улучшение

Для Bootstrap: 3

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

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

Вес файла: 20.8 Kb

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

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

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

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

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

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

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

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

Авторство: https://github.com/kartik-v/bootstrap-popover-x

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

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

Теги: Plugin, Bootstrap, popover

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

Добавлено: 2017-01-04 в 20:57

Метка: 1588864406

⇄ ⇅

<div style="max-width:1200px;margin:30px auto;padding:10px;border:1px solid #ddd;border-radius:5px;">
 <div class="page-header">
 <h1 class="text-info">Bootstrap Popover X Demo <small>&copy; Krajee Solutions</h1>
 </div>
 <div class="page-header">
 <h2>Popover Placements</h2>
 </div> 
 <div class="well text-center">
 
 <button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover1" data-placement="top">Top</button>
 <button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover2" data-placement="right">Right</button>
 <button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover3" data-placement="bottom">Bottom</button>
 <button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover4" data-placement="left">Left</button>
 <hr>
 <button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover10a" data-placement="top top-left">Top Left</button>
 <button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover10b" data-placement="top top-right">Top Right</button>
 <button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover10c" data-placement="bottom bottom-left">Bottom Left</button>
 <button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover10d" data-placement="bottom bottom-right">Bottom Right</button>
 <hr>
 <button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover20a" data-placement="left left-top">Left Top</button>
 <button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover20b" data-placement="left left-bottom">Left Bottom</button>
 <button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover20c" data-placement="right right-top">Right Top</button>
 <button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover20d" data-placement="right right-bottom">Right Bottom</button>
 
 
 <div id="myPopover1" class="popover popover-default">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 <div class="popover-footer">
 <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
 </div>
 </div>
 
 
 <div id="myPopover2" class="popover popover-default">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 <div class="popover-footer">
 <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
 </div>
 </div>
 
 
 <div id="myPopover3" class="popover popover-default">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 <div class="popover-footer">
 <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
 </div>
 </div>
 
 
 <div id="myPopover4" class="popover popover-default">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 <div class="popover-footer">
 <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
 </div>
 </div>
 
 
 <div id="myPopover10a" class="popover popover-default">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 <div class="popover-footer">
 <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
 </div>
 </div>
 
 
 <div id="myPopover10b" class="popover popover-default">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 <div class="popover-footer">
 <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
 </div>
 </div>
 
 
 <div id="myPopover10c" class="popover popover-default">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 <div class="popover-footer">
 <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
 </div>
 </div>
 
 
 <div id="myPopover10d" class="popover popover-default">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 <div class="popover-footer">
 <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
 </div>
 </div>
 
 
 <div id="myPopover20a" class="popover popover-default">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 <div class="popover-footer">
 <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
 </div>
 </div>
 
 
 <div id="myPopover20b" class="popover popover-default">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 <div class="popover-footer">
 <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
 </div>
 </div>
 
 
 <div id="myPopover20c" class="popover popover-default">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 <div class="popover-footer">
 <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
 </div>
 </div>
 
 
 <div id="myPopover20d" class="popover popover-default">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 <div class="popover-footer">
 <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
 </div>
 </div>

</div>
 
 <div class="page-header">
 <h2>Popover Color Styles</h2>
 </div> 
 <div class="well">
 
 <button class="btn btn-primary" style="margin-right:15px" data-toggle="popover-x" data-target="#myPopover1a" data-placement="bottom">Primary</button>
 <button class="btn btn-info" style="margin-right:15px" data-toggle="popover-x" data-target="#myPopover2a" data-placement="bottom">Info</button>
 <button class="btn btn-danger" style="margin-right:15px" data-toggle="popover-x" data-target="#myPopover3a" data-placement="bottom">Danger</button>
 <button class="btn btn-success" style="margin-right:15px" data-toggle="popover-x" data-target="#myPopover4a" data-placement="bottom">Success</button>
 <button class="btn btn-warning" style="margin-right:15px" data-toggle="popover-x" data-target="#myPopover5a" data-placement="bottom">Warning</button>
 <button class="btn btn-default" style="margin-right:15px" data-toggle="popover-x" data-target="#myPopover6a" data-placement="bottom">Default</button>
 
 
 <div id="myPopover1a" class="popover popover-primary">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 </div>
 
 
 <div id="myPopover2a" class="popover popover-info">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 </div>
 
 
 <div id="myPopover3a" class="popover popover-danger">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 </div>
 
 
 <div id="myPopover4a" class="popover popover-success">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 </div>
 
 
 <div id="myPopover5a" class="popover popover-warning">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 </div>
 
 
 <div id="myPopover6a" class="popover popover-default">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 </div>
 </div>
 </div>
 
 <div class="page-header">
 <h2>PopoverX Usage Examples</h2>
 </div> 
 <div class="well">
 
 <button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover1b" data-placement="top">Login</button>
 
 
 <div id="myPopover1b" class="popover popover-default">
 <div class="arrow"></div>
 <h3 class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Enter credentials</h3>
 <div class="popover-content">
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
 <form class="form-vertical">
 <div class="form-group">
 <input class="form-control" placeholder="Username">
 </div>
 <input type="password" class="form-control" placeholder="Password">
 </form>
 </div>
 <div class="popover-footer">
 <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-default">Reset</button>
 </div>
 </div>
 
 </div>
 </div>

BootstrapTema

Bootstrap Popover X

Скриншот

Подробнее

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

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

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