Bootstrap Изображения
Bootstrap Фигуры изображений
Закругленные углы:
Круг:
Миниатюру:
Закругленные углы
.img-rounded класс добавляет скругленные углы к изображению (IE8 не поддерживает закругленные углы):
Пример
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre">
Круг
.img-circle класс формирует изображение на окружность (IE8 не поддерживает закругленные углы):
Пример
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque
Terre">
Миниатюру
.img-thumbnail класс формирует изображение на миниатюру:
Пример
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Адаптивные образы
Изображения бывают всех размеров. Так что экраны. Адаптивные изображения автоматически корректируются в соответствии с размером экрана.
Создание адаптивных образов путем добавления .img-responsive класса к <img> тегу. После этого изображение будет хорошо масштабироваться до родительского элемента.
.img-responsiveкласс применяется display: block; и max-width: 100%; и height: auto; к изображению:
Пример
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
Галерея изображений
Можно также использовать систему сетки Bootstrap в сочетании с .thumbnail классом для создания галереи изображений.
Примечание: Далее в этом учебнике вы узнаете больше о системе Grid (создание макета с разным количеством столбцов).
Пример
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/lights.jpg">
<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/nature.jpg">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/fjords.jpg">
<img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</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 (универсальный для HD телевидения и Европейского цифрового телевидения).
Можно выбрать один из двух классов соотношения сторон:
<!-- 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>
Полная справка на образ Bootstrap
Для полной справки всех классов изображений, перейдите к нашей полной Ссылка на образ Bootstrap.
