Bootstrap从入门到实战---图文混排

最新推荐文章于 2024-08-22 20:17:26 发布

i see the future

最新推荐文章于 2024-08-22 20:17:26 发布

阅读量928

点赞数

分类专栏： HTML/CSS/JS/Bootstrap

本文链接：https://blog.csdn.net/m0_46629123/article/details/118558682

版权

Bootstrap 媒体对象图文混排响应式布局前端开发

关键词由CSDN通过智能技术生成

HTML/CSS/JS/Bootstrap 专栏收录该内容

98 篇文章 11 订阅

订阅专栏

Bootstrap从入门到实战—图文混排
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        body {
            padding:20px;
            
        }
    </style>
</head>

    <!-- 简单例子 -->
  <div class="media">
    <img src="images/1.jpg" class="mr-3" alt="">
    <div class="media-body">
      <h5 class="mt-0">Meida heading</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </div>

    <!-- 简单例子2 -->
      <div class="media">
        <div class="media-body col-4">
          <h5 class="mt-0">Meida heading</h5>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </div>
        <img src="images/1.jpg" class="mr-3 col-8" alt="">
      </div>

    <!-- 嵌套 -->
    <div class="media">
      <img src="images/1.jpg" class="mr-3" alt="">
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
            <div class="media mt-3">
              <img src="images/1.jpg" class="mr-3" alt="">
              <div class="media-body">
                <h5 class="mt-0">Media heading</h5>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
              </div>
            </div>
      </div>
    </div>



    <!-- 媒体列表 -->
    媒体列表
    <ul class="list-unstyled">
      <li class="media row m-4">
        <img src="images/1.jpg" class="mr-3 col-4" alt="">
        <div class="media-body col-8">
          <h5 class="mt-0 mb-1">List-based media object</h5>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </div>
      </li>
      <li class="media row m-4">
        <img src="images/1.jpg" class="mr-3 col-4" alt="">
        <div class="media-body col-8">
          <h5 class="mt-0 mb-1">List-based media object</h5>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </div>
      </li>
      <li class="media row m-4">
        <img src="images/1.jpg" class="mr-3 col-4" alt="">
        <div class="media-body col-8">
          <h5 class="mt-0 mb-1">List-based media object</h5>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </div>
      </li>
    </ul>




            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>




</body>
</html>

在这里插入图片描述