Компонент медіа-об'єктів Bootstrap забезпечує простий спосіб вирівнювання тексту та медіа-об'єктів за їх близького розташування. Це дозволяє швидко та легко переміщувати медіа вліво або вправо всередині блоку. Корисно для компонентів інтерфейсу користувача, таких як коментарі в блогах, твіти та ін.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="media"> <img class="mr-3" src="/example/image/9s.jpg" alt="Sample photo"> <div class="media-body"> <h4>Заголовок медіа</h4> <p>Sed u perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo&< </div> </div> <div class="media"> <img class="mr-3" src="/example/image/11s.jpg" alt="Sample photo"> <div class="media-body"> <h4>Заголовок медіа</h4> <p>Sed u perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo&< </div> </div>
Як користуватися
Щоб використовувати компонент медіа-об'єктів, необхідно застосувати клас для зовнішнього контейнера, а також окремі класи для медіа та тексту.
- Зовнішній контейнер
- Помістіть все повністю у <div> і привласніть йому клас .media.
- Медіа-об'єкт
- Для медіа-об'єкта (наприклад: <img>, <video> та ін.) не потрібно жодного спеціального класу. Просто вставте медіа-об'єкт у код HTML, де це потрібно.
- Текст
- Застосуйте клас .media-body до <div> або до іншого елемента, який є батьком для тексту. Також застосуйте .media-heading до будь-яких заголовків усередині .media-body.
- margin
- Використовуйте утиліти Booststrap для застосування margin до медіа-об'єктів (наприклад, .mr-3).
Вкладені медіа-об'єкти
Ви можете вкладати один медіа-об'єкт в інший (тобто весь медіа-блок). Вкладений медіа-блок матиме стандартний відступ.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="media"> <img class="mr-3" src="/example/image/9s.jpg" alt="Sample photo"> <div class="media-body"> <h4>Медіа-об'єкт</h4> <p>Sed u perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo&< <div class="media"> <img class="mr-3" src="/example/image/10s.jpg" alt="Sample photo"> <div class="media-body"> <h4>Вкладений медіа-об'єкт</h4> <p>Sed u perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo&< </div> </div> </div> </div>
Горизонтальне вирівнювання
Ви можете змінити в розмітці місцями медіа-об'єкт і текст, щоб заголовок з текстом розташовувалися перед зображенням.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="media"> <div class="media-body"> <h4>Медіа-об'єкт</h4> <p>Sed u perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo&< </div> <img class="mr-3" src="/example/image/9s.jpg" alt="Sample photo"> </div> <div class="media"> <div class="media-body"> <h4>Медіа-об'єкт</h4> <p>Sed u perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo&< </div> <img class="mr-3" src="/example/image/11s.jpg" alt="Sample photo"> </div>
Крім цього ви можете використовувати стильову властивість order у своєму користувальницькому CSS-файлі, щоб змінити порядок елементів без зміни їх у вихідному коді.
Вертикальне вирівнювання
Медіа-об'єкти за промовчанням вирівнюються по верхньому краю. Ви можете змінити це за допомогою будь-якого зі службових класів. Наприклад, щоб вирівняти центр, використовуйте d-flex align-self-center. Тут d-flex застосовує display: flex до елемента.
По середині
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="media"> <img class="d-flex align-self-center mr-3" src="/example/image/9s.jpg" alt="Sample photo"> <div class="media-body"> <h4>Медіа-об'єкт</h4> <p>Sed u perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo&< </div> </div>
Понизу
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="media"> <img class="d-flex align-self-end mr-3" src="/example/image/9s.jpg" alt="Sample photo"> <div class="media-body"> <h4>Медіа-об'єкт</h4> <p>Sed u perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo&< </div> </div>
Два медіа-об'єкти
У медіа-блоці можна розмістити більше одного зображення.
<link rel=" ;stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="media"> <div> <img class="mr-2" src="/example/image/9s.jpg" alt="Sample photo"> <img class="mr-3" src="/example/image/10s.jpg" alt="Sample photo"> </div> <div class="media-body"> <h4>Медіа-об'єкт</h4> <p>Sed u perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo&< </div> </div>
Вирівнювання по лівому та правому краю
У медіа-блоці можуть відображатися два медіа-об'єкти — один ліворуч, а інший праворуч. Текст у розмітці слід вставити між ними.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="media"> <img class="mr-3" src="/example/image/9s.jpg" alt="Sample photo"> <div class="media-body"> <h4>Медіа-об'єкт</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo&< </div> <img class="ml-3" src="/example/image/10s.jpg" alt="Sample photo"> </div>
Список медіа-об'єктів
Ви можете створити список, просто помістивши медіа-об'єкти всередину списку. Такий список може бути корисним для відображення коментарів, списку статей та ін.
Щоб створити список медіа-об'єктів, застосуйте клас .list-unstyled до елемента a href="/html/ul"><ul>, а клас .media до кожного елемента < ;li>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <ul class="list-unstyled"> <li class="media"> <img class="mr-3" src="/example/image/9s.jpg" alt="Photo of Pukeko in New Zealand"> <div class="media-body"> <h4>Медіа-об'єкт</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo&< <div class="media"> <img class="mr-3" src="/example/image/10s.jpg" alt="Photo of bird in the Philippines"> <div class="media-body"> <h4>Вкладений медіа-об'єкт</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo&< </div> </div> </div> </li> <li class="media"> <img class="mr-3" src="/example/image/11s.jpg" alt="Photo of sunset in Laos"> <div class="media-body"> <h4>Медіа-об'єкт</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo&< </div> </li> </ul>