Как добавить текст заголовка в img alt в HTML / Bootstrap - PullRequest
0 голосов
/ 17 октября 2018

У меня есть следующий код в 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>

Результат выглядит так:

enter image description here

Как добавить заголовок / заголовок к каждому изображению, чтобы описать назначение каждого?

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

Вы можете использовать элемент фигуры , для которого Bootstrap имеет стиль , например

<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>
0 голосов
/ 17 октября 2018

Попробуйте этот код с сеткой 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...