Bootstrap Формы изображения
Закругленные углы:
Круг:
Эскиз:
Закругленные углы
.img-rounded класс добавляет закругленные углы к изображению (IE8 не поддерживает скругленные углы):
пример
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre"
width="304" height="236"> Попробуй сам " Круг
.img-circle класс формирует изображение в круг (IE8 не поддерживает скругленные углы):
пример
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre"
width="304" height="236"> Попробуй сам " Эскиз
.img-thumbnail класс формирует изображение в миниатюре:
пример
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"
width="304" height="236"> Попробуй сам " Адаптивные изображения
Изображения приходит во всех размерах. Так что экраны. Адаптивные изображения автоматически подогнать размер экрана.
Создание реагирующие изображения путем добавления .img-responsive класс к <img> тег. Изображение будет затем масштабировать красиво к родительскому элементу.
.img-responsive класс применяется display: block; и max-width: 100%; и height: auto; к изображению:
Галерея
Вы можете также использовать Bootstrap's систему сетки в сочетании с .thumbnail класса для создания галереи изображений:
пример
<div class="row">
<div class="col-md-4">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit
Rock" style="width:150px;height:150px">
</a>
</div>
<div
class="col-md-4">
<a href="moustiers-sainte-marie.jpg"
class="thumbnail">
<p>Moustiers-Sainte-Marie:
Considered as one of the "most beautiful villages of France".</p>
<img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie"
style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="cinqueterre.jpg" class="thumbnail">
<p>The Cinque Terre: A rugged portion of coast in the Liguria region of
Italy.</p>
<img src="cinqueterre.jpg"
alt="Cinque Terre" style="width:150px;height:150px">
</a>
</div>
</div> Попробуй сам " Отзывчивый Встраивание
Кроме того, пусть видео или слайд-шоу масштабируются на любом устройстве.
Классы могут быть применены непосредственно к <iframe>, <embed>, <video> и <object> элементов.
В следующем примере создается ответное видео путем добавления .embed-responsive-item класса к <iframe> тега (видео будет затем масштабировать красиво к родительскому элементу). , Содержащий <div> определяет соотношение сторон видео:
пример
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div> Попробуй сам " Что такое соотношение сторон?
Соотношение сторон изображения описывает пропорциональную зависимость между шириной и высотой. Два пропорциями наиболее распространенные видео 4: 3 (универсальный формат видео 20-го века), и 16: 9 (универсальный для телевидения высокой четкости и европейского цифрового телевидения).
Вы можете выбрать между двумя классами соотношением сторон:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»
Полная Bootstrap Reference Image
Для полного ведения всех классов изображений, перейдите на нашу полную Bootstrap эталонного изображения .