如何在HTML / Bootstrap中将标头文本添加到img alt

Question

我在Bootstrap中有以下显示图片的代码：

<div class="work">
        <img class="anim" src="1.png" alt="Text1">
        <img class="anim" src="2.jpeg" alt="Text2">
        <img class="anim" src="3.jpeg" alt="Text3">
        <img class="anim" src="4.jpeg" alt="Text4">
    </div>

结果如下：

如何为每张图片添加一些标题/标题以描述每张图片的目的？

Answer 1

在Bootstrap网格系统上尝试此代码，并使用h3插入图像标题

<div class="row">
     <div class="col-sm-6">
         <h3>Text</h3>
         <img class="anim" src="1.png" alt="Text1">
     </div>
     <div class="col-sm-6">
         <h3>Text</h3>`
         <img class="anim" src="2.png" alt="Text1">
     </div>
     <div class="col-sm-6">
         <h3>Text</h3>
         <img class="anim" src="3.png" alt="Text1">
     </div>
     <div class="col-sm-6">
         <h3>Text</h3>
         <img class="anim" src="4.png" alt="Text1">
     </div>
 </div>

Answer 2

您可以将figure element用于Bootstrap具有styling的功能，例如

<div class="work">
    <figure class="figure">
        <figcaption class="figure-caption">Image 1</figcaption>
        <img class="anim figure-img" src="1.png" alt="Text1">
    </figure>
     <figure class="figure">
        <figcaption class="figure-caption">Image 2</figcaption>
        <img class="anim figure-img" src="2.png" alt="Text2">
    </figure>
     <figure class="figure">
        <figcaption class="figure-caption">Image 3</figcaption>
        <img class="anim figure-img" src="3.png" alt="Text3">
    </figure>
     <figure class="figure">
        <figcaption class="figure-caption">Image 4</figcaption>
        <img class="anim figure-img" src="4.png" alt="Text4">
    </figure>
</div>