Bootstrap写出一个简单的轮播图。

轮播图:
1.创建一个div把轮播图装起来,
然后class里面写.carousel .slide
然后随便创建一个id #banner;
再次添加个属性data-ride="carousel"

carousel slide " id=" banner ">
2.创建切换的小圆点
用ol>li写
在ol的class使用.carousel-indicators
然后有几个图片就创建几个li,
并在li中添加data-target属性,属性中就填写刚才在div中设置的id,再次添加data-slide-to="0" class="active";
    carousel-indicators ">
  • #banner " data-slide-to="0" class=" active ">
  • 3.创建div,装入所有轮播的图片
    class为.carousel-inner;
    4.每个图片都需要用div装起来
    class为.item active,
    img引入图片,
    可添加图片标题与描述,
    在每个图片的div内再次创建div装入对图片的描述
    class写为.carousel-cartion,
    div里可写 h1~6或p等标签;
    carousel-inner ">
    item active ">
    carousel-caption ">

    美丽的大海边

    拍婚纱照的真不少

    item ">
    carousel-caption ">

    美丽的大海边

    拍婚纱照的真不少

    item ">
    carousel-caption ">

    美丽的大海边

    拍婚纱照的真不少

    5.在添加一个左右切换图片的功能
    创建a标签,href属性写上总体div的id,
    class为.left .caroysel-control,
    data-slide为prev,
    在a标签中在创建个span标签,
    class为.glyphicon glyphicon-chevron-left,
    看class内容就可以知道为左方向,右方向只要改成right,data-slide改为next即可;
    glyphicon glyphicon-chevron-left ">
    glyphicon glyphicon-chevron-right ">

    一个简单的轮播图已经完成,最终代码为:




    你可能感兴趣的:(Bootstrap写出一个简单的轮播图。)