ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap Tutorial

BS HOME BS Get Started BS Grid Basic BS Typography BS Tables BS Images BS Jumbotron BS Wells BS Alerts BS Buttons BS Button Groups BS Glyphicons BS Badges/Labels BS Progress Bars BS Pagination BS Pager BS List Groups BS Panels BS Dropdowns BS Collapse BS Tabs/Pills BS Navbar BS Forms BS Inputs BS Inputs 2 BS Input Sizing BS Media Objects BS Carousel BS Modal BS Tooltip BS Popover BS Scrollspy BS Affix BS Filters

Bootstrap Grids

BS Grid System BS Stacked/Horizontal BS Grid Small BS Grid Medium BS Grid Large BS Grid Examples

Bootstrap Themes

BS Templates BS Theme "Simply Me" BS Theme "Company" BS Theme "Band"

Bootstrap CSS Ref

CSS All Classes CSS Typography CSS Buttons CSS Forms CSS Helpers CSS Images CSS Tables CSS Dropdowns CSS Navs Glyphicons

Bootstrap JS Ref

JS Affix JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip


Bootstrap CSS Изображения справка


Bootstrap изображения

Закругленные углы:

Cinque Terre

Круг:

Cinque Terre

Миниатюру:

Cinque Terre

< img > классы

Классы, приведенные ниже, можно использовать для оформления любого изображения:

Class Description
.img-rounded Добавляет закругленные углы к изображению (не доступно в IE8)
.img-circle Формирует изображение в окружность (не доступно в IE8)
.img-thumbnail Формирует изображение на миниатюру
.img-responsive Делает изображение отзывчивым (будет масштабироваться красиво к родительскому элементу)

Адаптивные образы

Создание адаптивных образов путем добавления .img-responsive класса к <img> тегу. После этого изображение будет хорошо масштабироваться до родительского элемента.

.img-responsiveкласс применяется max-width: 100% , height: auto и display:block к изображению:

Пример

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">