如何在 Bootstrap 中设计半页轮播?

bootstrapweb developmentfront end technology

轮播是 Web 开发人员常用的一种 Web 设计技术。它是一种以交互方式展示一系列图片或其他媒体内容的方法。这些轮播是多种网站(例如旅游网站、教育网站等)中的重要设计元素，我们需要利用图片来吸引用户。半页轮播略有不同，轮播只占据整个页面的一半。本文将教我们如何在 Bootstrap 中设计半页轮播。

使用网格系统

Bootstrap 网格系统使我们能够创建响应式且视觉上有吸引力的图片布局。我们可以使用网格系统放置任何类型的容器，包括文本、图片、段落等。在 Bootstrap 中，我们需要使用"row"和"col"类名来定义行和列才能使用网格系统。使用 CSS 样式，我们可以将轮播的高度设置为屏幕高度的一半和宽度的 100%。

示例

以下代码是使用流行的前端框架 Bootstrap 创建半页轮播的示例。轮播包含三张图片，每张图片占据屏幕高度的一半。该代码使用了 Bootstrap 提供的"carousel"组件，并包含三个"carousel-item"元素，每个元素包含一张图片，其源 URL 来自"picsum.photos"网站。这些图片分别使用"d-block"和"w-100"类进行响应式布局，使图片显示为块元素，并将其宽度设置为其父容器的 100%。"container-fluid"类创建一个全宽容器，而"container"类创建一个居中容器，用于标题和段落文本。最后，代码包含三个脚本标签，用于导入轮播正常运行所需的 JavaScript 库。

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
   <div class="container-fluid px-0">
      <div id="carouselExampleSlidesOnly" class="carousel slide" dataride="carousel">
         <div class="carousel-inner">
            <div class="carousel-item active">
               <img class="d-block w-100" src="https://picsum.photos/800/400?random=1" alt="First slide" style="height: 50vh !important;">
         </div>
         <div class="carousel-item">
            <img class="d-block w-100" src="https://picsum.photos/800/400?random=2" alt="Second slide"style="height: 50vh !important;">
         </div>
         <div class="carousel-item">
            <img class="d-block w-100" src="https://picsum.photos/800/400?random=3" alt="Third slide" style="height: 50vh !important;">
            </div>
         </div>
      </div>
   </div>
   
   <div class="container my-5">
      <h1 class="text-center">Half-Page Carousel Example</h1>
      <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
   </div>
   
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js "></script>
</body>
</html>

使用模态窗口创建半页轮播

模态窗口是现代网站中重要的设计元素。它们是出现在当前页面上方的对话框或弹出窗口。通常，我们会显示一些附加信息、提示和用户输入。要使用模态窗口创建半页轮播，我们可以相应地设置模型的尺寸。

示例代码

我们在以下代码中使用模态窗口实现了半页轮播。我们使用了两张图片。按钮触发模态窗口。触发后，我们会逐一显示图片。用户可以通过光标在图片之间导航。

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   <style>
      .modal-dialog {
         max-width: 100vw;
         height: 50vh;
         margin: 0;
   }
   
   .modal-content {
      width: 100%;
      height: 100%;
   }
   
   .carousel-item img {
      object-fit: cover;
      width: 100%;
      height: 50Vh !important;
   }
   </style>
   <script>
      window.addEventListener('DOMContentLoaded', function() {
         var modal = document.getElementById('carouselModal');
         modal.addEventListener('show.bs.modal', function() {
            var windowHeight = window.innerHeight || document.documentElement.clientHeight;
            var modalHeight = windowHeight * 0.5; // Set modal height to 50% ofthe window height
            var modalDialog = modal.querySelector('.modal-dialog');
            modalDialog.style.height = modalHeight + 'px';
         });
      });
   </script>
</head>
<body>
   <div class="container">
      <div class="row">
         <div class="col-md-6">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#carouselModal">
               Open Carousel
            </button>
         </div>
      </div>
   </div>

   <div class="modal fade" id="carouselModal" tabindex="-1" role="dialog" aria-labelledby="carouselModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <div id="carouselExampleControls" class="carousel slide" dataride=" carousel">
            <div class="carousel-inner">
            <div class="carousel-item active">
               <img src="https://lh3.googleusercontent.com/p/AF1QipOwuHy1QZ8xoEEm09pfzalu3h-JoyMti5MrordD=w1080-h608-p-k-no-v0" alt="Image 1">
               </div>
               <div class="carousel-item">
               <img src="https://static.ambitionbox.com/api/v2/photo/M2RLbTIvbklJQzh3Wk5pakZobWpHUT09" alt="Image 2">
               </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls"role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" ariahidden="true"></span>
            <span class="sr-only">Previous</span>
         </a>
         <a class="carousel-control-next" href="#carouselExampleControls"role="button" data-slide="next">
            <span class="carousel-control-next-icon" ariahidden="true"></span>
               <span class="sr-only">Next</span>
            </a>
         </div>
      </div>
   </div>
</div>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>