forked from varia/varia.website
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
157 lines
3.2 KiB
157 lines
3.2 KiB
Thumbnails
|
|
===============================================================================
|
|
.. lead:: Extend Bootstrap's grid system with the thumbnail component to easily
|
|
display grids of images, videos, text, and more.
|
|
|
|
Default example
|
|
---------------
|
|
|
|
By default, Bootstrap's thumbnails are designed to showcase linked images with
|
|
minimal required markup.
|
|
|
|
.. container:: bs-example
|
|
|
|
.. row::
|
|
|
|
.. column::
|
|
:width: 3
|
|
|
|
.. image:: 171x180.png
|
|
:class: thumbnail
|
|
|
|
.. column::
|
|
:width: 3
|
|
|
|
.. image:: 171x180.png
|
|
:class: thumbnail
|
|
|
|
.. column::
|
|
:width: 3
|
|
|
|
.. image:: 171x180.png
|
|
:class: thumbnail
|
|
|
|
.. column::
|
|
:width: 3
|
|
|
|
.. image:: 171x180.png
|
|
:class: thumbnail
|
|
|
|
.. code::
|
|
:class: highlight
|
|
|
|
.. column::
|
|
:width: 3
|
|
|
|
.. image:: 171x180.png
|
|
:class: thumbnail
|
|
|
|
.. column::
|
|
:width: 3
|
|
|
|
.. image:: 171x180.png
|
|
:class: thumbnail
|
|
|
|
.. column::
|
|
:width: 3
|
|
|
|
.. image:: 171x180.png
|
|
:class: thumbnail
|
|
|
|
.. column::
|
|
:width: 3
|
|
|
|
.. image:: 171x180.png
|
|
:class: thumbnail
|
|
|
|
Custom content
|
|
--------------
|
|
|
|
With a bit of extra markup, it's possible to add any kind of HTML content like
|
|
headings, paragraphs, or buttons into thumbnails.
|
|
|
|
.. container:: bs-example
|
|
|
|
.. row::
|
|
|
|
.. column::
|
|
:width: 4
|
|
|
|
.. thumbnail::
|
|
|
|
.. image:: 300x200.png
|
|
|
|
.. caption::
|
|
|
|
:h3:`Thumbnail label`
|
|
|
|
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec
|
|
id elit non mi porta gravida at eget metus. Nullam id dolor id nibh
|
|
ultricies vehicula ut id elit.
|
|
|
|
.. button:: Button
|
|
:class: primary
|
|
|
|
.. button:: Button
|
|
|
|
|
|
.. column::
|
|
:width: 4
|
|
|
|
.. thumbnail::
|
|
|
|
.. image:: 300x200.png
|
|
|
|
.. caption::
|
|
|
|
:h3:`Thumbnail label`
|
|
|
|
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec
|
|
id elit non mi porta gravida at eget metus. Nullam id dolor id nibh
|
|
ultricies vehicula ut id elit.
|
|
|
|
.. button:: Button
|
|
:class: primary
|
|
|
|
.. button:: Button
|
|
|
|
|
|
.. column::
|
|
:width: 4
|
|
|
|
.. thumbnail::
|
|
|
|
.. image:: 300x200.png
|
|
|
|
.. caption::
|
|
|
|
:h3:`Thumbnail label`
|
|
|
|
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec
|
|
id elit non mi porta gravida at eget metus. Nullam id dolor id nibh
|
|
ultricies vehicula ut id elit.
|
|
|
|
.. button:: Button
|
|
:class: primary
|
|
|
|
.. button:: Button
|
|
|
|
.. code::
|
|
:class: highlight
|
|
|
|
.. thumbnail::
|
|
|
|
.. image:: 300x200.png
|
|
|
|
.. caption::
|
|
|
|
:h3:`Thumbnail label`
|
|
|
|
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec
|
|
id elit non mi porta gravida at eget metus. Nullam id dolor id nibh
|
|
ultricies vehicula ut id elit.
|
|
|
|
.. button:: Button
|
|
:class: primary
|
|
|
|
.. button:: Button
|
|
|