forked from varia/varia.website
158 lines
3.2 KiB
Plaintext
158 lines
3.2 KiB
Plaintext
|
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
|