一个简单的cookie同意插件，使您的Bootstrap网站符合欧洲cookie法。

插件显示底部的cookie横幅，通知访问者您的网站有cookie。它使用本地存储来保存关闭状态，这样在清除保存的值之前，cookie横幅不会重新显示。

如何使用它:

1.将Cookie Banner插件的JavaScript和CSS文件加载到您的Bootstrap网站中。jQuery和Bootstrap JS是可选的。

<!-- jQuery Is Required For Bootstrap 4 version -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Bootstrap files -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- Cookie Banner -->
<link rel="stylesheet" href="./src/cookie-banner.css">
<script async src="./src/cookie-banner.js"></script>

2.将cookie同意消息添加到cookie横幅中。

<!-- Bootstrap 4 Version -->
<div class="nk-cookie-banner alert alert-dark text-center mb-0" role="alert">
  &#x1F36A; This website uses cookies to ensure you get the best experience on our website.
  <a href="#" target="blank">Learn more</a>
  <button type="button" class="btn btn-primary btn-sm ml-3" onclick="window.nk_hideCookieBanner()">
    I Got It
  </button>
</div>
 
<!-- Bootstrap 5 Version -->
<div id="cb-cookie-banner" class="alert alert-dark text-center mb-0" role="alert">
  &#x1F36A; This website uses cookies to ensure you get the best experience on our website.
  <a href="#" target="blank">Learn more</a>
  <button type="button" class="btn btn-primary btn-sm ms-3" onclick="window.cb_hideCookieBanner()">
    I Got It
  </button>
</div>

3.就是这样。覆盖cookie同意横幅的默认样式。

.nk-cookie-banner {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 999;
  border-radius: 0px;
  display: none;
}

更新日志：

2022-06-13

• 固定演示

2021-10-20

• 更新cookie-banner.css
• 适用于最新的Bootstrap 5框架。

预览截图

本地存储显示和隐藏Cookie同意横幅