我想知道如何设置 bs5-lightbox 的样式

Question

希望有人能帮帮我 :)

我正在使用 Boostrap 5 和这个 Lightbox 库 https://trvswgnr.github.io/bs5-lightbox/

它使用 data-toggle="lightbox" 启动它并且运行良好。

  <a href="http://fpoimg.com/200x200?text=Forth" data-toggle="lightbox"   data-gallery="gallery" >
      <img src="http://fpoimg.com/200x200?text=Forth"></a>

我想应用一些 css 样式，例如。灯箱背景颜色、填充等，但我不知道从哪里开始。

我曾经使用 BS4 的 ekko-lightbox，它有自己的 CSS 但我找不到它。

Answer 1

如我所见，bs5-lightbox 库没有自己的样式，也没有使用 BS5 标记和样式。

因此您可以应用 BS5 样式和 HTML 您想要的。

您可以先在您的页面上浏览 .lightbox-carousel（CSS class 选择器）并创建自定义样式。

基于此class您可以自定义它的子节点。

img {
  width: 200px;
}

/* this is how you can add stylings to wrapper, f.e. */
.lightbox-carousel.carousel {
  padding: 1rem;
  background: #ffffff7a;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<script type="module">
  import * as Lightbox from 'https://cdn.jsdelivr.net/npm/bs5-lightbox@1.7.8/dist/index.bundle.min.js';
  
  document.querySelectorAll('.my-lightbox-toggle').forEach((el) => el.addEventListener('click', (e) => {
    e.preventDefault();
    const lightbox = new Lightbox(el);
    lightbox.show();
  }));
</script>


<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox">
    <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid my-lightbox-toggle">
</a>

我想知道如何设置 bs5-lightbox 的样式

I would like to know how to style bs5-lightbox

css

bootstrap-lightbox

bootstrap-5