jQuery Bootstrap 3 News Box
Каталог: Плагины Bootstrap
Категория: Улучшение
Для Bootstrap: 3
Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop
Язык: Английский
Вес файла: 193.5Kb
Уникальный ID: 2209
Посмотрели: 190 раз
Скачать бесплатно
Скачали бесплатно: 4 раз
Прокомментировали: 0 раз
Рейтинг: 5.0 / 5 - 1 голосов
Тип лицензии: CC BY 4.0
Авторство: https://github.com/gagi270683/jQuery-bootstrap
Информация: Пользователям
Информация: Правообладателям
Поделился:
Добавлено: 2017-06-18 в 15:26
Метка: 1497788775
Похожие
Архив
Архив материалов которые Вы уже смотрели пока пуст
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
 <title>jQuery Bootstrap 3 News Box</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
 <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
 <script src="http://bootstraptema.ru/plugins/2017/jb3bn/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>

<style>
.glyphicon
{
 margin-right:4px !important; /*override*/
}

.pagination .glyphicon
{
 margin-right:0px !important; /*override*/
}

.pagination a
{
 color:#555;
}

.panel ul
{
 padding:0px;
 margin:0px;
 list-style:none;
}

.news-item
{
 padding:4px 4px;
 margin:0px;
 border-bottom:1px dotted #555; 
}
</style>
</head>

<body>
 <br />
 <div class="container">
 <div class="row">
 <div class="col-md-4">
 <div class="panel panel-default">
 <div class="panel-heading">
 <span class="glyphicon glyphicon-list-alt"></span><b>News</b></div>
 <div class="panel-body">
 <div class="row">
 <div class="col-xs-12">
 <ul class="demo1">
 <li class="news-item">
 <table cellpadding="4">
 <tr>
 <td><img src="http://bootstraptema.ru/plugins/2017/jb3bn/1.png" width="60" class="img-circle" /></td>
 <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
 </tr>
 </table>
 </li>
 <li class="news-item">
 <table cellpadding="4">
 <tr>
 <td><img src="http://bootstraptema.ru/plugins/2017/jb3bn/2.png" width="60" class="img-circle" /></td>
 <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
 </tr>
 </table>
 </li>
 <li class="news-item">
 <table cellpadding="4">
 <tr>
 <td><img src="http://bootstraptema.ru/plugins/2017/jb3bn/3.png" width="60" class="img-circle" /></td>
 <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
 </tr>
 </table>
 </li>
 <li class="news-item">
 <table cellpadding="4">
 <tr>
 <td><img src="http://bootstraptema.ru/plugins/2017/jb3bn/4.png" width="60" class="img-circle" /></td>
 <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
 </tr>
 </table>
 </li>
 <li class="news-item">
 <table cellpadding="4">
 <tr>
 <td><img src="http://bootstraptema.ru/plugins/2017/jb3bn/5.png" width="60" class="img-circle" /></td>
 <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
 </tr>
 </table>
 </li>
 <li class="news-item">
 <table cellpadding="4">
 <tr>
 <td><img src="http://bootstraptema.ru/plugins/2017/jb3bn/6.png" width="60" class="img-circle" /></td>
 <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
 </tr>
 </table>
 </li>
 <li class="news-item">
 <table cellpadding="4">
 <tr>
 <td><img src="http://bootstraptema.ru/plugins/2017/jb3bn/7.png" width="60" class="img-circle" /></td>
 <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td>
 </tr>
 </table>
 </li>
 </ul>
 </div>
 </div>
 </div>
 <div class="panel-footer">

 </div>
 </div>
 </div>
 
 <div class="col-md-4">
 <div class="panel panel-default">
 <div class="panel-heading">
 <span class="glyphicon glyphicon-list-alt"></span><b>News</b></div>
 <div class="panel-body">
 <div class="row">
 <div class="col-xs-12">
 <ul class="demo2">
 <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
 <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
 <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
 <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
 <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
 <li class="news-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></li>
 
 </ul>
 </div>
 </div>
 </div>
 <div class="panel-footer">

 </div>
 </div>
 </div>
 
 <div class="col-md-4">
 <div class="panel panel-default">
 <div class="panel-heading">
 <span class="glyphicon glyphicon-list-alt"></span><b>News</b></div>
 <div class="panel-body">
 <div class="row">
 <div class="col-xs-12">
 <ul id="demo3">
 <li class="news-item">Curabitur porttitor ante eget hendrerit adipiscing. Maecenas at magna accumsan,
 rhoncus neque id, fringilla dolor. <a href="#">Read more...</a></li>
 <li class="news-item">Curabitur porttitor ante eget hendrerit adipiscing. Maecenas at magna accumsan,
 rhoncus neque id, fringilla dolor. <a href="#">Read more...</a></li>
 <li class="news-item">Praesent ornare nisl lorem, ut condimentum lectus gravida ut. Ut velit nunc, vehicula
 volutpat laoreet vel, consequat eu mauris. <a href="#">Read more...</a></li>
 <li class="news-item">Nunc ultrices tortor eu massa placerat posuere. Vivamus viverra sagittis nunc. Nunc
 et imperdiet magna. Mauris sed eros nulla. <a href="#">Read more...</a></li>
 <li class="news-item">Morbi sodales tellus sit amet leo congue bibendum. Ut non mauris eu neque fermentum
 pharetra. <a href="#">Read more...</a></li>
 <li class="news-item">In pharetra suscipit orci sed viverra. Praesent at sollicitudin tortor, id sagittis
 magna. Fusce massa sem, bibendum id. <a href="#">Read more...</a> </li>
 <li class="news-item">Maecenas nec ligula sed est suscipit aliquet sed eget ipsum. Suspendisse id auctor
 nibh. Ut porttitor volutpat augue, non sodales odio dignissi id. <a href="#">Read more...</a></li>
 <li class="news-item">Onec bibendum consectetur diam, nec euismod urna venenatis eget. Cras consequat
 convallis leo. <a href="#">Read more...</a> </li>
 </ul>
 </div>
 </div>
 </div>
 <div class="panel-footer">

 </div>
 </div>
 </div>
 </div>
 </div>
 
<script type="text/javascript">
 $(function () {
 $(".demo1").bootstrapNews({
 newsPerPage: 5,
 autoplay: true,
 pauseOnHover:true,
 direction: 'up',
 newsTickerInterval: 4000,
 onToDo: function () {
 //console.log(this);
 }
 });
 
 $(".demo2").bootstrapNews({
 newsPerPage: 4,
 autoplay: true,
 pauseOnHover: true,
 navigation: false,
 direction: 'down',
 newsTickerInterval: 2500,
 onToDo: function () {
 //console.log(this);
 }
 });

 $("#demo3").bootstrapNews({
 newsPerPage: 3,
 autoplay: false,
 
 onToDo: function () {
 //console.log(this);
 }
 });
 });
</script>
</body>
</html>
Всего комментариев: 0
avatar

Посоветуйте этот материал другу отправив ему письмо на E - mail

Написать администрации по поводу этого материала