Bootstrap 4-在屏幕上以80%的屏幕高度连续显示3个图像

Bootstrap 4是一个流行的前端开发框架，它提供了丰富的CSS和JavaScript组件，用于快速构建响应式和美观的网页界面。在屏幕上以80%的屏幕高度连续显示3个图像，可以通过以下步骤实现：

使用Bootstrap的网格系统：Bootstrap的网格系统是一种响应式布局工具，可以将页面划分为12个等宽的列。首先，将页面分为3列，每列占据4个列的宽度。

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <!-- 第一个图像 -->
    </div>
    <div class="col-md-4">
      <!-- 第二个图像 -->
    </div>
    <div class="col-md-4">
      <!-- 第三个图像 -->
    </div>
  </div>
</div>

设置高度为80%：为了使图像占据屏幕高度的80%，可以使用CSS的height属性和vh单位。

<style>
  .image-container {
    height: 80vh;
  }
</style>

<div class="container">
  <div class="row">
    <div class="col-md-4 image-container">
      <!-- 第一个图像 -->
    </div>
    <div class="col-md-4 image-container">
      <!-- 第二个图像 -->
    </div>
    <div class="col-md-4 image-container">
      <!-- 第三个图像 -->
    </div>
  </div>
</div>

添加图像：在每个图像容器中添加图像。

<div class="container">
  <div class="row">
    <div class="col-md-4 image-container">
      <img src="image1.jpg" alt="图像1">
    </div>
    <div class="col-md-4 image-container">
      <img src="image2.jpg" alt="图像2">
    </div>
    <div class="col-md-4 image-container">
      <img src="image3.jpg" alt="图像3">
    </div>
  </div>
</div>

这样，使用Bootstrap 4的网格系统和自定义的CSS样式，就可以在屏幕上以80%的屏幕高度连续显示3个图像。

关于Bootstrap 4的更多信息和使用方法，可以参考腾讯云的相关产品和文档：