发表于: 2018-12-05 20:45:10

1 706


今天完成的事:

今天继续做任务8,学习用bootstrap做轮播图,Bootstrap中的轮播图大致可以分为以下几个部分:

图片部分:用于展示内容的图片。

计数器:用于计算当前切换的图片索引。

控制器:控制图片的显示对象。

1、首先我们定义一个<div>容器,这个容器用class="carousel"样式:

<div id="carouselcontainter" class="carousel"></div>

2、轮播图片的计数器,用于显示图片的播放顺序。我们通常使用<li>元素,并且使用class="carousel-indicators"样式,图片的数量与<li>的数量一致,代码如下:

<div id="carouselcontainter" class="carousel">

<ol class="carousel-indicators">

<li class="active">1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ol>

</div>

3、设置轮播图片。轮播效果主要在于轮播图片,我们使用class="carousel-inner"样式类控制轮播区域,并将这个轮播区放到class="carousel"容器内,代码如下:

4、给图片添加文字。很多时候我们需要在图片底部添加一些文字和链接,作为图片的说明信息。我们可以使用class="carousel-caption"样式,代码如下:

5、控制器。有时候需要使用鼠标来控制图片的左右滚动,我们称之为控制器。在Bootstrap中我们只需使用carousel配合样式left和right来实现。left表示向左边滚动,right表示向右边滚动,代码如下:

然后就是使用栅格系统做的footer,感觉对栅格系统的应用和理解也更熟悉了。

明天的任务

继续任务8

今天遇到的问题:

导航栏那个带滑块的<a>标签,我没搞

今天的收获:

对bootstrap的使用也更熟悉了



返回列表 返回列表
评论

    分享到