成都-第六十四期bootstrap有哪些常用组件？

Posted 2021-03-29 葡萄藤IT技能树

一、背景介绍

  Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 html、CSS、javascript 的，它简洁灵活，使得 Web 开发更加快捷。Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。

二、知识剖析

什么是组件：一般是指软件系统的一部分，承担了特定的职责，可以独立于整个系统进行开发和测试，一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。 例如bootstrap的轮播图就是一个组件。他可以应用在不同的网站开发中。

目前常用的bootstrap组件：轮播图，下拉菜单，响应式导航栏。

三、常见问题

如何使用bootstrap组件做一个轮播图？

四、解决方案

一个轮播图的组成部分：

整个轮播是放在一个div .carousel和.slide的div中的。给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。data-ride 属性：取值 carousel，并且将其定义在 carousel 上。

  1.轮播计数器

     其表现形式为底部小圆点。在容器 div.carousel 的内部添加轮播图片计算器。 采用 carousel-indicators 样式，其主要功能是显示当前图片的播放顺序。 一般采用有序列表来制作。

  2.轮播图片容器

     每多一张需要轮播的图片就多一个item。 第一个item需要添加active。

  3.轮播控制器

     data-slide：取值包括 prev，next。 prev表示向后滚动，next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上

五、编码实战

<div id="slidershow" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators">

        <li class="active" data-target="#slidershow" data-slide-to="0"></li>

        <li data-target="#slidershow" data-slide-to="1"></li>

        <li data-target="#slidershow" data-slide-to="2"></li>

    </ol>

    <div class="carousel-inner">

        <div class="item active">

            <a href="#"><img ></a>

            <div class="carousel-caption">

                <p>死亡の潮の潮、私の古い友達を探して</p>

            </div>

        </div>

        <div class="item">

            <a href="#"><img ></a>

            <div class="carousel-caption">

                <p>私の存在を感じるでしょう</p>

            </div>

        </div>

        <div class="item">

            <a href="#"><img ></a>

            <div class="carousel-caption">

                <p>孤独の死、私は孤独のように生きている</p>

            </div>

        </div>

    </div>

    <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left"></span>

    </a>

    <a class="right carousel-control" href="#slidershow" role="button" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right"></span>

    </a>

</div>

六、扩展思考

      有没有不使用bootstrap就能实现轮播图的方法

七、参考文献

参考一：http://www.jb51.net/article/75806.htm全面解析Bootstrap图片轮播效果

参考二：http://www.cnblogs.com/bkylee/p/6385973.html博客园bootstrap的carousel图片轮播

八、更多讨论

       国人开发的其他框架

PPT链接：