使用Bootstrap制作简易的轮播

最新推荐文章于 2022-08-15 22:13:09 发布

明扬.

最新推荐文章于 2022-08-15 22:13:09 发布

阅读量334

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_37986384/article/details/82623546

版权

本文将指导你如何利用Bootstrap框架创建一个简单的轮播效果。通过学习，你将掌握如何设置轮播图片、添加控制按钮以及实现自动切换等功能，为网站增添动态视觉体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>使用bootstrap制作简易的轮播</title>
  
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <h1 class="page-header">轮播图</h1>
        <!--Carousel：只有一个相对定位标记-->
        <div class="carousel slide" id="slidershow" data-ride="carousel">
           <!-- Carousel-indicators：圆圈部分样式，都是绝对定位，每个li设置为行内块元素，用text-indent：-999来隐藏字体-->
            <ol class="carousel-indicators">
                <li class="active" data-target="#slidersho