网络编程 
首页 > 网络编程 > 浏览文章

Bootstrap图片轮播效果详解

(编辑:jimmy 日期: 2024/11/16 浏览:3 次 )

导言

Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

示例

下面演示图片的轮播,使用bootstrap中的Carousel显示循环播放元素插件。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>

 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
  <div class="item active">
   <img src="/UploadFiles/2021-04-02/...">

在src中插入图片已为图片设置大小

Bootstrap图片轮播效果详解

还可以为其加上标题

<div class="item">
 <img src="/UploadFiles/2021-04-02/...">

Bootstrap图片轮播效果详解

参考

1.Bootstrap官网中文文档

2.菜鸟学堂Bootstrap教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:node.js 用socket实现聊天的示例代码
下一篇:vue组件之Alert的实现代码
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。