画廊
Bootstrap画廊 - 免费示例、模板和教程
使用Bootstrap 5创建的响应式画廊。图片画廊、视频画廊、照片画廊、全页、电子商务、灯箱、滑块、缩略图等。
静态图片
使用静态图片的示例。
要了解更多，请阅读 图片文档。
.webp)
.webp)
<!-- Gallery -->
<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
class="w-100 shadow-1-strong rounded mb-4"
alt="Boat on Calm Water"
/>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain1.webp"
class="w-100 shadow-1-strong rounded mb-4"
alt="Wintry Mountain Landscape"
/>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain2.webp"
class="w-100 shadow-1-strong rounded mb-4"
alt="Mountains in the Clouds"
/>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
class="w-100 shadow-1-strong rounded mb-4"
alt="Boat on Calm Water"
/>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(18).webp"
class="w-100 shadow-1-strong rounded mb-4"
alt="Waves at Sea"
/>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp"
class="w-100 shadow-1-strong rounded mb-4"
alt="Yosemite National Park"
/>
</div>
</div>
<!-- Gallery -->
轮播 / 滑块
轮播（也称为“滑块”）是一个幻灯片放映，循环显示不同的元素，如照片、视频或文本。
要了解更多，请阅读 轮播文档。
.webp)
第一个幻灯片标签
Nulla vitae elit libero, a pharetra augue mollis interdum.
.webp)
第二个幻灯片标签
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.webp)
第三个幻灯片标签
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
<!-- Carousel wrapper -->
<div
id="carouselBasicExample"
data-mdb-carousel-init class="carousel slide carousel-fade"
data-mdb-ride="carousel"
>
<!-- Indicators -->
<div class="carousel-indicators">
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide-to="1"
aria-label="Slide 2"
></button>
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<!-- Inner -->
<div class="carousel-inner">
<!-- Single item -->
<div class="carousel-item active">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp"
class="d-block w-100"
alt="Sunset Over the City"
/>
<div class="carousel-caption d-none d-md-block">
<h5>第一个幻灯片标签</h5>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.
</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp"
class="d-block w-100"
alt="Canyon at Nigh"
/>
<div class="carousel-caption d-none d-md-block">
<h5>第二个幻灯片标签</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp"
class="d-block w-100"
alt="Cliff Above a Stormy Sea"
/>
<div class="carousel-caption d-none d-md-block">
<h5>第三个幻灯片标签</h5>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</p>
</div>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<button data-mdb-button-init
class="carousel-control-prev"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">上一个</span>
</button>
<button data-mdb-button-init
class="carousel-control-next"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">下一个</span>
</button>
</div>
<!-- Carousel wrapper -->
多项轮播
通过使用可用类的组合，您可以创建一个每个幻灯片上都有多个项目的轮播。
如果需要更多高级选项和多项轮播的示例，请查看 多项轮播文档。
<!-- Carousel wrapper -->
<div
id="carouselMultiItemExample"
data-mdb-carousel-init class="carousel slide carousel-dark text-center"
data-mdb-ride="carousel"
>
<!-- Controls -->
<div class="d-flex justify-content-center mb-4">
<button data-mdb-button-init
class="carousel-control-prev position-relative"
type="button"
data-mdb-target="#carouselMultiItemExample"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">上一个</span>
</button>
<button data-mdb-button-init
class="carousel-control-next position-relative"
type="button"
data-mdb-target="#carouselMultiItemExample"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">下一个</span>
</button>
</div>
<!-- Inner -->
<div class="carousel-inner py-4">
<!-- Single item -->
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/181.webp"
class="card-img-top"
alt="Waterfall"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/182.webp"
class="card-img-top"
alt="Sunset Over the Sea"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/183.webp"
class="card-img-top"
alt="Sunset over the Sea"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/184.webp"
class="card-img-top"
alt="Fissure in Sandstone"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/185.webp"
class="card-img-top"
alt="Storm Clouds"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/186.webp"
class="card-img-top"
alt="Hot Air Balloons"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/187.webp"
class="card-img-top"
alt="Peaks Against the Starry Sky"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/188.webp"
class="card-img-top"
alt="Bridge Over Water"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/189.webp"
class="card-img-top"
alt="Purbeck Heritage Coast"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Inner -->
</div>
<!-- Carousel wrapper -->
视频轮播
除了图片，您还可以使用视频。
<!-- Carousel wrapper -->
<div
id="carouselVideoExample"
data-mdb-carousel-init class="carousel slide carousel-fade"
data-mdb-ride="carousel"
>
<!-- Indicators -->
<div class="carousel-indicators">
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselVideoExample"
data-mdb-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselVideoExample"
data-mdb-slide-to="1"
aria-label="Slide 2"
></button>
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselVideoExample"
data-mdb-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<!-- Inner -->
<div class="carousel-inner">
<!-- Single item -->
<div class="carousel-item active">
<video class="img-fluid" autoplay loop muted>
<source src="https://mdbcdn.b-cdn.net/img/video/Tropical.mp4" type="video/mp4" />
</video>
<div class="carousel-caption d-none d-md-block">
<h5>第一个幻灯片标签</h5>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.
</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<video class="img-fluid" autoplay loop muted>
<source src="https://mdbcdn.b-cdn.net/img/video/forest.mp4" type="video/mp4" />
</video>
<div class="carousel-caption d-none d-md-block">
<h5>第二个幻灯片标签</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<video class="img-fluid" autoplay loop muted>
<source
src="https://mdbcdn.b-cdn.net/img/video/Agua-natural.mp4"
type="video/mp4"
/>
</video>
<div class="carousel-caption d-none d-md-block">
<h5>第三个幻灯片标签</h5>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</p>
</div>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<button data-mdb-button-init
class="carousel-control-prev"
type="button"
data-mdb-target="#carouselVideoExample"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">上一个</span>
</button>
<button data-mdb-button-init
class="carousel-control-next"
type="button"
data-mdb-target="#carouselVideoExample"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">下一个</span>
</button>
</div>
<!-- Carousel wrapper -->
带有模态框和YouTube视频的画廊
Bootstrap模态框和YouTube视频嵌入的组合示例。
<!-- Modal gallery -->
<section class="">
<!-- Section: Images -->
<section class="">
<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<div
class="bg-image hover-overlay ripple shadow-1-strong rounded"
data-ripple-color="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-1.webp"
class="w-100"
/>
<a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal1">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
</a>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<div
class="bg-image hover-overlay ripple shadow-1-strong rounded"
data-ripple-color="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-2.webp"
class="w-100"
/>
<a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal2">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
</a>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<div
class="bg-image hover-overlay ripple shadow-1-strong rounded"
data-ripple-color="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-3.webp"
class="w-100"
/>
<a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal3">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
</a>
</div>
</div>
</div>
</section>
<!-- Section: Images -->
<!-- Section: Modals -->
<section class="">
<!-- Modal 1 -->
<div
class="modal fade"
id="exampleModal1"
tabindex="-1"
aria-labelledby="exampleModal1Label"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="ratio ratio-16x9">
<iframe
src="https://www.youtube.com/embed/A3PDXmYoF5U"
title="YouTube video"
allowfullscreen
></iframe>
</div>
<div class="text-center py-3">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div
class="modal fade"
id="exampleModal2"
tabindex="-1"
aria-labelledby="exampleModal2Label"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="ratio ratio-16x9">
<iframe
src="https://www.youtube.com/embed/wTcNtgA6gHs"
title="YouTube video"
allowfullscreen
></iframe>
</div>
<div class="text-center py-3">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- Modal 3 -->
<div
class="modal fade"
id="exampleModal3"
tabindex="-1"
aria-labelledby="exampleModal3Label"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="ratio ratio-16x9">
<iframe
src="https://www.youtube.com/embed/vlDzYIIOYmM"
title="YouTube video"
allowfullscreen
></iframe>
</div>
<div class="text-center py-3">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Modals -->
</section>
<!-- Modal gallery -->
灯箱
如果您需要高级选项，可以使用MDBootstrap的 燈箱組件。
注意: 此组件需要 MDBootstrap Pro 包。
<div class="lightbox" data-mdb-lightbox-init>
<div class="row">
<div class="col-lg-6">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table Full of Spices"
class="w-100 mb-2 mb-md-4 shadow-1-strong rounded"
/>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Square/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Square/1.webp"
alt="Coconut with Strawberries"
class="w-100 shadow-1-strong rounded"
/>
</div>
<div class="col-lg-6">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Vertical/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Vertical/1.webp"
alt="Dark Roast Iced Coffee"
class="w-100 shadow-1-strong rounded"
/>
</div>
</div>
</div>
高级多项轮播
如果需要高级的多项画廊，可以使用MDBootstrap的 多元素组件。
注意: 此组件需要 MDBootstrap Pro 包。
<div class="lightbox" data-mdb-lightbox-init>
<div class="multi-carousel" data-mdb-multi-carousel-init>
<div class="multi-carousel-inner">
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table Full of Spices"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-100"
/>
</div>
</div>
<button data-mdb-button-init
class="carousel-control-prev"
type="button"
tabindex="0"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button data-mdb-button-init
class="carousel-control-next"
type="button"
tabindex="0"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</div>
垂直多项轮播
垂直實施 垂直示範輪播。
注意: 此组件需要 MDBootstrap Pro 包。
<div class="ecommerce-gallery vertical" data-mdb-ecommerce-gallery-init>
<div class="row">
<div class="col-4 col-sm-3">
<div class="multi-carousel vertical" data-mdb-multi-carousel-init data-mdb-items="3">
<div class="multi-carousel-inner">
<div class="multi-carousel-item active">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-100"
/>
</div>
</div>
<button
class="carousel-control-prev"
tabindex="0"
type="button"
data-mdb-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
</button>
<button
class="carousel-control-next"
tabindex="0"
type="button"
data-mdb-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
</button>
</div>
</div>
<div class="col-8 col-sm-9">
<div class="lightbox" data-mdb-lightbox-init>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
</div>
</div>
电子商务画廊
一个带有缩放效果的画廊示例，调整为电子商务项目。
要了解更多，请阅读 电子商务画廊文档。
注意: 此组件需要 MDBootstrap Pro 包。
<div class="ecommerce-gallery" data-mdb-ecommerce-gallery-init data-mdb-zoom-effect="true" data-mdb-auto-height="true">
<div class="row py-3 shadow-5">
<div class="col-12 mb-1">
<div class="lightbox" data-mdb-lightbox-init>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
alt="Gallery image 1"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
<div class="col-3 mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
alt="Gallery image 1"
class="active w-100"
/>
</div>
<div class="col-3 mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
alt="Gallery image 2"
class="w-100"
/>
</div>
<div class="col-3 mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
alt="Gallery image 3"
class="w-100"
/>
</div>
<div class="col-3 mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
alt="Gallery image 4"
class="w-100"
/>
</div>
</div>
</div>
全页画廊
画廊的全页使用示例。
点击图片查看实时演示。
