BootStarp_02 轮播效果、列表组和图文框

最新推荐文章于 2023-09-08 17:11:41 发布

原创

最新推荐文章于 2023-09-08 17:11:41 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#python #开发语言

本文介绍了Bootstrap中的轮播效果、列表组和图文框的使用。轮播效果是一种循环滚动的幻灯片组件，利用CSS 3D变换和JavaScript实现，支持在页面不可见时节省性能。列表组是多功能的组件，可以展示复杂的列表内容。图文框则用于组合图像和文本，提供了响应式的图片处理方式和文本对齐选项。

文章目录

一、轮播效果

二、列表组

三、图文框

一、轮播效果

概述：

这是一个循环滚动的幻灯片组件，可以使用文本、图象水平不间断滚动，如同旋转木马一般。

工作原理：

轮播效果是一个幻灯片效果，使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放，它适用于一系列图像、文本或自定义标记，还包括对上一个/下一个图的浏览控制和指令支持。

在支持 Page Visibility API（页面可见性）的浏览器中，当网页对用户不可见时（如浏览器选项卡处于非活动状态、窗口最小化时），轮播效果控件会停止运动，从而节省性能。

示例：

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>