一、图片

1.响应式图片

  1. <div class="row">
  2.     <img src="images/img_01.jpg" class="img-fluid" alt="">
  3. </div>

2.缩略图：img-thumbnail

  1. <div class="col-md-4">
  2.     <img src="images/img_01.jpg" class="img-thumbnail" alt="">
  3. </div>

3.圆角图片：rounded

  1. <div class="col-md-4">
  2.     <img src="images/img_01.jpg" class="rounded img-fluid" alt="">
  3. </div>

4.图片对齐方式

image.png

  1. <!-- 图片对齐方式，自己对齐的话通过浮动 -->
  2. <div class="row mt-5">
  3.     <div class="col">
  4.         <img src="images/img_01.jpg" style="height: 200px;" class="float-left" alt="">
  5.         <img src="images/img_01.jpg" style="height: 200px;" class="float-right" alt="">
  6.     </div>
  7. </div>
  8. <!-- 通过父级调整对齐，使用文本的对齐方式 -->
  9. <div class="row mt-5">
  10.     <div class="col text-right"><!-- text-right：可随意改 -->
  11.         <img src="images/img_01.jpg" style="height: 200px;" alt="">
  12.         <img src="images/img_01.jpg" style="height: 200px;" alt="">
  13.     </div>
  14. </div>
  15. <!-- 自己居中，先要变成block，然后再使用margin:0 auto; -->
  16. <div class="row mt-5">
  17.     <div class="col">
  18.         <img src="images/img_01.jpg" style="height: 200px;" class="d-block mx-auto" alt=""><!-- class="d-block mx-auto" -->
  19.     </div>
  20. </div>

5.picture

<div class="row mt-5">
    <picture><!-- picture：什么尺寸的屏幕加载什么尺寸的图片 -->
        <source media="(min-width:1200px)" srcset="images/1140.jpg">
        <source media="(min-width:992px)" srcset="images/960.jpg">
        <source media="(min-width:768px)" srcset="images/720.jpg">
        <source media="(min-width:576px)" srcset="images/540.jpg">
        <img src="images/img_01.jpg" alt="">    <!-- 当尺寸小于576的时候会显示这个图片 -->
    </picture>
    <!-- .webp  图片的格式 ：专门针对网页的图片格式，体积很小，比jpg小上百倍，但仍能显示高清图片--><!-- 支持情况：>=ios9.3 || >android4.4 ，IE不支持，火狐谷歌支持-->

</div>

二、表格

image.png

<body>
    <!-- 具体的在bootstrap的中文文档里有介绍 -->
    <div class="container">
        <div class="row">
            <div class="table-responsive"><!-- class可以设置颜色 --><!-- table-responsive：滚动条 -->
                <table class="table table-sm">
                    <caption>课程表</caption>
                    <thead>
                        <tr>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                            <th>heading</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>语文</td>
                            <td>数学</td>
                            <td>英语</td>
                            <td>生物</td>
                            <td>化学</td>
                        </tr>
                        <tr>
                            <td>语文</td>
                            <td>数学</td>
                            <td>英语</td>
                            <td>生物</td>
                            <td>化学</td>
                        </tr>
                        <tr>
                            <td>语文</td>
                            <td>数学</td>
                            <td>英语</td>
                            <td>生物</td>
                            <td>化学</td>
                        </tr>
                        <tr>
                            <td>语文</td>
                            <td>数学</td>
                            <td>英语</td>
                            <td>生物</td>
                            <td>化学</td>
                        </tr>
                        <tr>
                            <td>语文</td>
                            <td>数学</td>
                            <td>英语</td>
                            <td>生物</td>
                            <td>化学</td>
                        </tr>
                        <tr>
                            <td>语文</td>
                            <td>数学</td>
                            <td>英语</td>
                            <td>生物</td>
                            <td>化学</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

三、图文区

image.png

<body>
    <div class="container">
        <div class="row">
            <figure class="figure">
                <img src="images/1140.jpg" class="img-fluid rounded figure-img" alt=""><!-- img-fluid figure-img ：响应式图片？？？？-->
                <figcaption class="figure-caption text-center">一叶知秋</figcaption>
            </figure>
        </div>
    </div>
</body>