Примечание:
Эта страница - компонент, используемый на данной вики. Он предназначен для включения в другие страницы.
Описание
Если вы когда-либо хотели просто и аккуратно добавить подпись или название картинке, это — лучший способ. Сниппет Image Box позволяет вам приукрасить изображение и подстроить его под тему своего веб-сайта с помощью легко запоминаемого кода.
В частности, Bootstrap Image Box является улучшением старого сниппета. Он был изменён с учётом возможностей Bootstrap интерфейса Twitter. Ваши изображения теперь будут менять размер в зависимости от ширины экрана, так что у пользователей на любом устройстве будет приятный опыт веб-сёрфинга.
Код
[[include component:bs-image
|image=
|heading=
|caption=
|link=
|title=
|alt=
|max-width=
|width=
|float=
|force-float=
|kind=
]]
Если вы оставите поле пустым, применится значение по умолчанию. Так что необязательно заполнять все поля.
Примечание: Не используйте кавычки при заполнении полей.
| Атрибут | Значение по умолчанию | Описание |
|---|---|---|
| image | Обязателен! | URL изображения, которое надо отобразить. |
| heading | Скрыт | Заголовок изображения, отображается над изображением. |
| caption | Скрыт | Описание изображения, отображается под изображением. |
| link | URL изображения | Веб-ресурс, куда пользователя перенаправляет при нажатии на изображение. Если передать none, то ссылка будет деактивирована. |
| title | Скрыт | Текст, который появляется при долгом наведении курсором на изображение. |
| alt | Изображение недоступно | Текст, который появляется если по указанному пути не существует изображения. |
| max-width | auto | Максимальная ширина изображения. Изменяется, когда ширина экрана становится достаточно маленькой. |
| width | auto | Заставляет изображение всегда быть указанной ширины. |
| float | middle | Выравнивает изображение по левому (left) или правому (right) краю. |
| force-float | false | Если true, то изображение всегда будет "плавать", независимо от размера экрана. |
| kind | default | Может быть одной из предопределённых цветовых палитр Bootstrap: primary, warning, danger, info или success. Изменяет палитру блока с изображением на указанную. |
В действии
Примечание: Чтобы использовать весь потенциал этого сниппета, на вашем сайте должен быть включён Bootstrap!
Вы можете увидеть этот сниппет в действии на вики Bootstrap Playground на WikiDot. Попробуйте изменить ширину экрана, чтобы увидеть как адаптируется изображение!
Ниже представлена краткая демонстрация, как выглядит блок Bootstrap Image Box, и код, который для этого используется.
[[include component:bs-image
|image=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
|heading=Sulphur
|caption=On the Periodic Table of Elements
|max-width=375px
|link=none
]]
Настройка через CSS
Как и его предшественник, сниппет Bootstrap Image Box легко подстраивается под ваш сайт при помощи CSS. Используйте следующие классы для настройки:
| Класс | Описание |
|---|---|
| image-box | Сам блок Image Box |
| image-box-heading | Зона заголовка над изображением |
| image-box-image | Зона под само изображение |
| image-box-caption | Зона подписи под изображением |
Вы также можете использовать эти классы из Bootstrap, которые соответствуют полю kind (см. выше):
| Класс |
|---|
| image-box-warning |
| image-box-danger |
| image-box-info |
| image-box-success |
{$heading}
{$caption}