bootstrap图片切换

要实现Bootstrap图片切换，你可以使用Bootstrap的Carousel组件。Carousel组件允许你在一个旋转木马（Carousel）中显示一组图片，并且可以通过箭头按钮或者指示器来切换图片。

下面是一个基本的Bootstrap图片切换代码示例：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- 指示器 -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- 图片 -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="img/slide1.jpg" alt="Slide 1">
    </div>
    <div class="item">
      <img src="img/slide2.jpg" alt="Slide 2">
    </div>
    <div class="item">
      <img src="img/slide3.jpg" alt="Slide 3">
    </div>
  </div>

  <!-- 左右箭头 -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

在这个示例中，我们首先创建一个`<div>`元素，并设置`id`为`myCarousel`，然后为它添加`class`为`carousel slide`，这是Carousel组件的基本结构。

接着，我们添加了一个`<ol>`元素作为Carousel的指示器，每个指示器都对应一个图片，通过`data-target`和`data-slide-to`属性来指定对应图片的位置。

在`<div>`元素中，我们添加了一个`<div>`元素并设置`class`为`carousel-inner`，这是Carousel组件中用来显示图片的容器。每个图片都包含在一个`<div>`元素中，`class`为`item`，其中第一个`<div>`元素的`class`还添加了`active`，这是默认显示的图片。

最后，我们添加了两个箭头按钮，分别用于向左和向右切换图片，分别添加了`class`为`left carousel-control`和`right carousel-control`，并在`href`属性中指定Carousel的`id`，在`data-slide`属性中指定切换图片的方向。

希望这个回答能够帮到你！