使用Bootstrap制作的简单酒店论坛页面

最新推荐文章于 2024-06-10 21:57:03 发布

愤怒的阿木木

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量288

点赞数

分类专栏： html/css/js 文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/qq_44364267/article/details/130583761

版权

html/css/js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是一个使用Bootstrap制作的简单酒店论坛页面。页面包含一个导航栏、一个轮播图、一个酒店评论列表和一个评论框，支持动态元素和过渡效果。
效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hotel Forum</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

  <!-- 导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Hotel Forum</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Forum</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Hotels</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- 轮播图 -->
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="6.webp" alt="First slide" >
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="7.webp" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="8.webp" alt="Third slide" >
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <!-- 帖子列表 -->
  <div class="container mt-5">
    <h2>Latest Posts</h2>
    <div class="row">
      <div class="col-md-6">
        <div class="card mb-4">
          <img src="4.webp" class="card-img-top" alt="Post 1">
            <div class="card-body">
            <h5 class="card-title">Post 1 Title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card mb-4">
          <img src="5.webp" class="card-img-top" alt="Post 2">
          <div class="card-body">
            <h5 class="card-title">Post 2 Title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 帖子详情 -->
  <div class="container mt-5">
    <h2>Post Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan eros ut velit pellentesque, a dictum mauris consectetur. Donec et ultrices felis, ac pellentesque dui. Ut porta mi eget risus dictum consectetur. Quisque vehicula erat in gravida tempor. Morbi eu felis ut lectus cursus consectetur.</p>
    <p>Nulla finibus, elit eget lacinia pharetra, lectus lacus luctus lacus, eget iaculis neque enim sit amet arcu. Nunc facilisis lacus sed sapien tincidunt, nec ullamcorper arcu tincidunt. Integer ut nisi massa. Integer sit amet malesuada ligula.</p>
    <p>Donec bibendum ipsum a purus lacinia, a finibus turpis ullamcorper. Duis in eleifend purus. Morbi hendrerit sem id risus volutpat eleifend. Fusce lacinia justo eu tellus dapibus viverra.</p>
  </div>

  <!-- 评论 -->
  <div class="container mt-5">
    <h2>Comments</h2>
    <div class="media mb-4">
      <img src="user1.jpg" class="mr-3" alt="User 1" style="width: 64px; height: 64px;">
      <div class="media-body">
        <h5 class="mt-0">User 1</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="media mb-4">
      <img src="user2.jpg" class="mr-3" alt="User 2" style="width: 64px; height: 64px;">
      <div class="media-body">
        <h5 class="mt-0">User 2</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </div>

  <!-- 底部信息 -->
  <footer class="bg-dark text-light text-center py-4">
    <p>&copy; 2023 Hotel Forum. All rights reserved.</p>
  </footer>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>