快速使用Bootstrap搭建传送带

前端技术 2023/09/03 JavaScript

bootstrap介绍

Bootstrap是前端开发中应用非常广泛的一个框架，最早是Twitter 公司内部的一个工具，开源之后迅速得到了各方的认可。本书基于最新的Bootstrap 3撰写，在简单介绍了安装与配置之后就直奔主题，分别讨论了个人作品站点、WordPress主题、企业网站、电子商务网站和单页营销网站等几个最具代表性的应用案例，结合这些案例细致地剖析了Bootstrap还有LESS的使用方式和技巧。

说了这么多，都是题外话，下面看看bootstrap搭建传送带的代码。

进度指示器

<div id=\"homepage-feature\" class=\"carousel slide\">
<ol class=\"carousel-indicators\">
<li data-target=\"#homepage-feature\" data-slide-to=\"0\" class=\"active\"></li>
<li data-target=\"#homepage-feature\" data-slide-to=\"1\" ></li>
<li data-target=\"#homepage-feature\" data-slide-to=\"2\" ></li>
<li data-target=\"#homepage-feature\" data-slide-to=\"3\" ></li>
</ol>

进度指示器的data-target属性必须使用传送带的ＩＤ homepage-featureJS插件为传送带添加active类。

<div class=\"carousel-inner\">
<div class=\"item active\">
<img >
</div>
<div class=\"item \">
<img >
</div>
...
</div>

然后是显示前一个后一个的按钮

<a class=\"left carousel-control\" href=\"#homepage-feature\" data-slide=\"prev\">
<span class=\"glyphicon glyphicon-chevron-left\"></span>
</a>
<a class=\"right carousel-control\" href=\"#homepage-feature\" data-slide=\"next\">
<span class=\"glyphicon glyphicon-chevron-left\"></span>
</a></div>

如此便好了。以上内容是小编给大家介绍的Bootstrap搭建传送带的相关知识，希望对大家有所帮助，在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/6588

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案