正文

Bootstrap分列表展示图片源代码

/0 浏览量
0428

Bootstrap 是一个流行的前端框架，它提供了丰富的组件和工具来帮助开发者快速构建响应式网页。以下是一个使用 Bootstrap 创建分列表展示图片的示例代码。

基本HTML结构

首先，我们需要创建一个基本的 HTML 结构来容纳图片和分列表。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap分列表展示图片</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-5">
    <div class="row">
        <div class="col-md-6">
            <!-- 图片列表 -->
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action active">
                    <div class="media">
                        <img src="image1.jpg" class="mr-3" alt="...">
                        <div class="media-body">
                            <h5 class="mt-0">图片标题1</h5>
                            图片描述...
                        </div>
                    </div>
                </a>
                <a href="#" class="list-group-item list-group-item-action">
                    <div class="media">
                        <img src="image2.jpg" class="mr-3" alt="...">
                        <div class="media-body">
                            <h5 class="mt-0">图片标题2</h5>
                            图片描述...
                        </div>
                    </div>
                </a>
                <!-- 更多图片项 -->
            </div>
        </div>
        <div class="col-md-6">
            <!-- 另一个图片列表 -->
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action active">
                    <div class="media">
                        <img src="image3.jpg" class="mr-3" alt="...">
                        <div class="media-body">
                            <h5 class="mt-0">图片标题3</h5>
                            图片描述...
                        </div>
                    </div>
                </a>
                <a href="#" class="list-group-item list-group-item-action">
                    <div class="media">
                        <img src="image4.jpg" class="mr-3" alt="...">
                        <div class="media-body">
                            <h5 class="mt-0">图片标题4</h5>
                            图片描述...
                        </div>
                    </div>
                </a>
                <!-- 更多图片项 -->
            </div>
        </div>
    </div>
</div>

<!-- 引入 Bootstrap JS 和依赖的 Popper.js 和 jQuery -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

代码说明

  1. 引入 Bootstrap CSS：通过 CDN 引入 Bootstrap CSS 文件，使页面能够使用 Bootstrap 的样式。
  2. 容器和行：使用 container 和 row 类创建一个容器和一行，用于容纳图片列表。
  3. 列：使用 col-md-6 类创建两个列，分别用于展示两个图片列表。
  4. 图片列表：使用 list-group 类创建图片列表，每个列表项使用 list-group-item 类表示。
  5. 媒体对象：使用 media 类创建媒体对象，包含图片和文本描述。
  6. 图片：使用 <img> 标签添加图片，并设置 src 属性为图片路径。
  7. 引入 Bootstrap JS：通过 CDN 引入 Bootstrap JS 文件，使页面能够使用 Bootstrap 的 JavaScript 功能。

这个示例展示了如何使用 Bootstrap 创建一个简单的分列表展示图片的网页。你可以根据自己的需求修改图片路径、标题和描述。

-- 展开阅读全文 --