BootStrap4内容系列之图文区

官方文档地址

https://getbootstrap.com/docs/4.4/content/figures/

其他中文文档地址

• https://getbootstrap.net
  • https://getbootstrap.net/docs/content/figures/
• https://v4.bootcss.com
  • https://v4.bootcss.com/docs/4.3/content/figures/

figure图文

.figure
.figure-img
.figure-caption

<div class="container">
    <figure class="figure">
        <img data-src="holder.js/200x200" class="figure-img img-thumbnail img-fluid" alt="200x200"
             style="max-width: 100%; height: auto; width: 100%;"
             src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16ec1677c74%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16ec1677c74%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.421875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
             data-holder-rendered="true">
        <figcaption class="figure-caption">
            A caption for the above image.
        </figcaption>
    </figure>
</div>

figcaption对齐

图文的标题可以使用对齐工具类.text-[left | right | center | justify]来完成

<!-- 使用对齐工具类使caption对齐 -->
<div class="container">
    <figure class="figure">
        <img data-src="holder.js/200x200" class="figure-img img-thumbnail img-fluid" alt="200x200"
             style="max-width: 100%; height: auto; width: 100%;"
             src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16ec1677c74%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16ec1677c74%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.421875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
             data-holder-rendered="true">
        <figcaption class="figure-caption text-center">
            A caption for the above image.
        </figcaption>
    </figure>
</div>