Bootstrap-图片演示

Bootstrap是一个CSS和JavaScript框架，使用它可以快速构建互联网站点和Web应用程序。其中一个很重要的组件是图片，Bootstrap提供了多种方式来演示图片。

基本图片

最基本的图片演示可以通过<img>标签实现，和平常使用图片的方式没有任何区别。

<img src="example.jpg" alt="Example">

图片列表

图片列表可以用在包含多张图片的界面，类似于相册，可以使用Boostrap提供的.list-unstyled和.list-inline类来实现。其中.list-unstyled类可以将列表项不带bullets（项目符号），.list-inline类可以实现横向排列。

<!-- 垂直排列的图片列表 -->
<ul class="list-unstyled">
  <li><img src="example1.jpg" alt="Example1"></li>
  <li><img src="example2.jpg" alt="Example2"></li>
  <li><img src="example3.jpg" alt="Example3"></li>
</ul>

<!-- 横向排列的图片列表 -->
<ul class="list-inline">
  <li><img src="example1.jpg" alt="Example1"></li>
  <li><img src="example2.jpg" alt="Example2"></li>
  <li><img src="example3.jpg" alt="Example3"></li>
</ul>

图片缩略图

图片缩略图可以在图片展示的基础上，增加了一些特殊的样式，例如圆角，浮动和边框等。Bootstrap提供了.img-thumbnail类来实现这个效果。

<img src="example.jpg" alt="Example" class="img-thumbnail">

图片响应式

图片响应式是指图片可以自动适应不同大小的屏幕。Bootstrap提供了.img-responsive类来实现这个效果。

<img src="example.jpg" alt="Example" class="img-responsive">

背景图片

背景图片可以用在导航栏和页脚等地方，Bootstrap提供了.bg-*类来实现。其中*可以是以下任意一个值：

• primary
• secondary
• success
• danger
• warning
• info
• light
• dark

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
</nav>

<footer class="bg-dark text-light text-center py-3">
  <p>&copy; 2021 Bootstrap-图片演示</p>
</footer>

以上就是Bootstrap中图片相关功能的简单介绍。通过这些特殊的样式和功能，可以让图片在网页中更好的展示。