Приведённый пример (скопирован 1 в 1 из документации) состоит из одного лишь только HTML-кода. Alert прекрасно закрывается без единой строчки самостоятельно написанного JS-кода (пример на JSFiddle).
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Но тогда возникает вопрос: зачем же нужен метод $('.alert').alert()
? В документации сказано:
Not necessary when using the data-api’s auto-initialization.
но я не понял, что это за data-api’s auto-initialization
.
Бутстрап предусмотрел два способа использовать свои JS плагины:
data
, как указано в документации.Во втором случае Бутстрап запустит всё сам, а данные, необходимые для инициализации и работы, возьмёт из data
атрибутов. Именно это и подразумевает фраза, которую вы процитировали.
Вы можете выбрать, какой способ вам больше подходит, или объединить их: базовое поведение инициализировать через data
атрибуты, а остальное запрограммировать скриптом.
Авто-инициализация не сработает, если HTML-блок добавляется скриптом после загрузки страницы. Тогда придётся запускать вручную, через $('.alert').alert()
, например.
И, если нужно, авто-инициализацию можно отключить полностью
$(document).off('.data-api')
или для какого-нибудь конкретного плагина
$(document).off('.alert.data-api')
Почему, когда элементу, который находится внутри flex-элемента, ставишь margin в % сам flex-элемент не расширяется, а если ставить margin в px, то flex-элемент...
Подскажите пожалуйста, как плавно изменить цвет фона поднятой строки на дефолтный(погасить)? На данный момент она гаснет(через setTimeout()), но резковыглядит...
Как в нижеуказанном коде реализовать LocalStorage? Чтобы значения не обнулялись при обновлении страницыКод - jsfiddle