Bootstrap网页切版练习(一) - 响应式交错版

最新推荐文章于 2025-08-22 15:07:29 发布

XI_MILU

最新推荐文章于 2025-08-22 15:07:29 发布

阅读量232

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap网页切版练习文章标签： bootstrap css html 前端

本文链接：https://blog.csdn.net/XI_MILU/article/details/120105508

Bootstrap网页切版练习专栏收录该内容

1 篇文章

订阅专栏

这个示例展示了如何使用HTML5和Bootstrap创建一个响应式的交错版面。当网页宽度大于768px时，内容以两栏布局显示，图片位于文字右侧；当宽度小于768px时，布局自动调整，图片和文字上下排列，确保在不同设备上的良好显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

交错版

目标

网页宽度足够时会显示两栏版面
在这里插入图片描述

网页宽度 < 768px 时会改变排版方式
在这里插入图片描述

程式码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>响应式交错版</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .row {
            border-bottom: 1px solid #ccc;
        }
        .txt {
            padding: 10px;
        }
        
        .pic {
            padding: 10px;
        }
        .pic img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 大標題區塊 -->
        <div class="row">
            <h1>Introduction</h1>
        </div>
        <!-- 區塊1 -->
        <div class="row">
            <!-- 網頁寬度小於768px就會自動調整排版 -->
            <div class="txt col-md-7">
                <h2>picture1</h2>
                <!-- .lead類別強調段落 -->
                <p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
                <p>Nobis a porro fuga provident eveniet? Tenetur, minus maxime? Fuga deleniti voluptatem nisi nulla dolor earum mollitia ab laudantium illo, deserunt maiores.</p>
            </div>
            <div class="pic col-md-5">
                <img src="https://picsum.photos/300/200/?random=1" class="img-fluid float-end">
            </div>
        </div>
        <!-- 區塊2 -->
        <div class="row">
            <div class="pic col-md-5">
                <img src="https://picsum.photos/300/200/?random=2" class="img-fluid">
            </div>
            <div class="txt col-md-7">
                <h2>picture2</h2>
                <p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
                <p>Nobis a porro fuga provident eveniet? Tenetur, minus maxime? Fuga deleniti voluptatem nisi nulla dolor earum mollitia ab laudantium illo, deserunt maiores.</p>
            </div>
        </div>
        <!-- 區塊3 -->
        <div class="row">
            <div class="txt col-md-7">
                <h2>picture3</h2>
                <p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
                <p>Nobis a porro fuga provident eveniet? Tenetur, minus maxime? Fuga deleniti voluptatem nisi nulla dolor earum mollitia ab laudantium illo, deserunt maiores.</p>
            </div>
            <div class="pic col-md-5">
                <img src="https://picsum.photos/300/200/?random=3" class="img-fluid float-end">
            </div>
        </div>
    </div>
</body>
</html>