Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы Bootstrap 3 » Информеры. Основы bootstrap 3 для начинающих. Урок №20

07.10.2016


22:54


2012


пока нет


Информеры. Основы bootstrap 3 для начинающих. Урок №20

Информеры. Основы bootstrap 3 для начинающих. Урок №20

Всем привет!
В сегодняшнем уроке вы научитесь создавать всплывающие информеры.
При нажатии на ссылку или кнопку, читателю откроются небольшие накладки содержания с дополнительной информацией, Всплывать эти подсказки могут с левой, правой, нижней или верхней стороны, одним словом, там, где вы укажите.
Эффект похож на предыдущий из урока №19 - Всплывающие подсказки. Только там нужно было навести курсор мышки и подсказка выскакивала, а здесь нужно нажать на кнопку.

В общем, что говорить, лучше я покажу работу информера вживую, и тогда вы все поймете.
Кликните мышкой по всем кнопкам:

Ну как вам? Правда, прикольно?
Сейчас и на вашей веб-странице такое же будет!

Если у вас нет подключения к файлу «jquery-1.11.3.min.js», тогда вставьте между тегами <head></head> вот такой код:

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

Добавьте еще перед тегом </head> вот этот код JavaScript:

<script>
$(function(){
$('[rel="popover"]').popover({
container: 'body',
html: true,
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
}).click(function(e) {
e.preventDefault();
});
});
</script>

Теперь осталось только вставить кнопку или ссылку с вызовом сплывающего информера.
Вставьте следующий код между <body></body>:

<button type="button" class="btn btn-default" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Информер слева
</button>

<button type="button" class="btn btn-default" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Информер вверху
</button>

<button type="button" class="btn btn-default" rel="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Информер внизу
</button>

<button type="button" class="btn btn-default" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Информер справа
</button>

Настройки:

rel="popover"   - обязательный атрибут для вызова окна информера.
data-placement="right" – указывает, с какой стороны показать информер. Вместо «right» могут быть вот такие параметры:

  • Left – с левой стороны
  • Right - с правой стороны
  • Top – сверху
  • Bottom - снизу

data-content=" Здесь будет текст"  - в этот атрибут пишем информацию.
data-original-title="Здесь заголовок информера".

Вот пример:

<a href="#" class="btn btn-success" rel="popover" data-content="Не ожидайте слишком многого и не думайте о конечном результате." data-original-title="Совет дня:">Информация для тебя</a>

Результат:

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

Жду вас на следующих уроках. Подписывайтесь на обновления блога.



Случайные записи:

  1. Работа со строками в php. Основы PHP с нуля. Урок №7
  2. Модальное окно (всплывающее окно). Основы bootstrap 3 для начинающих. Урок №17
  3. Как создать слайдер (карусель). Основы bootstrap 3 для начинающих. Урок №18
  4. Выпадающее меню (списки). Основы bootstrap 3 для начинающих. Урок №9
  5. Сворачивание (аккордеон). Основы bootstrap 3 для начинающих. Урок №22

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 231

Уведомление для пользователей AdBlock

Включая adblock (блокировщик рекламы) вы лишаете меня заработка, и тем самым лишаете смысла трудиться над своим сайтом, помогать вам и отвечать на комментарии. Если вы решились отключить adblock для моего блога, спасибо!

Как отключить AdBlock?