bootstrap轮播用法

创建轮播图步骤
1.创建 div.carousel [data-ride="carousel"](可选)
自己定义一个id名字 等会让data-target使用
data-ride 当文件加载完自动轮播 轮播间隔好像是5秒




2.创建轮播指示器 使用列表 ul 或者ol
ol.carousel-indicators
在ol里创建li 其中要有任意一个li 存在一个active 表示某个图片显示
li 添加 data-target=“#轮播的id” 第一步设置的id
添加data-slide.to="*" *取值 数字 0 1 2 3




指示器就是轮播图中的这个


image.png

3.创建图片容器
div.carousel-inner 里面放图片
div.item里面包含一个img标签放 图片


    

此时已经可以轮播了还差一步
左右按钮

4.左右按钮书写
a.carousel-control-prev 添加属性data-slide="prev"
href="指向轮播id”


    

        
    
    
        
    

完整代码




    
    
    Title


    

    
    
    







你可能感兴趣的:(bootstrap轮播用法)