下拉菜单

用于显示连接裂变的可切换，有上下文的菜单

下拉菜单中自定义属性的含义

Data-* 触发器，操纵交互的

aria-*和role类为不方便人士提供服务如屏幕阅读器

aria-*一般表示行为，role当前的状态（separator为线）（disabled为禁用）

<div class="container"><div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">选择事件<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">事件一</a></li><li class="disabled"><a href="#">禁用事件</a></li><li><a href="#">事件二</a></li><li role="separator" class="divider"></li><li><a href="#">事件三</a></li></ul></div>
</div>

分页器

为网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件

一个小例子，希望大家能试下，不要忘了引入Bootstrap

<div class="container"><ul class="pager"><li class="prev"><a href="#">上一页</a></li><li class="next"><a href="#">下一页</a></li></ul><ul class="pagination"><li class="disabled prev"><a href="#">&laquo;</a></li><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li class="next"><a href="#">&raquo;</a></li></ul>
</div>

let iNow = 1;let len = $(".pagination li").length;$(".pagination li").click(function () {var index = $(this).index();if(index==0||index==len-1){return}iNow = $(this).index();console.log(iNow);$(this).addClass("active").siblings().removeClass("active");if(index==1){$(".pagination li").eq(0).addClass("disabled");$(".pagination li").eq(len-1).removeClass("disabled");} elseif(index==len-2){$(".pagination li").eq(len-1).addClass("disabled");$(".pagination li").eq(0).removeClass("disabled");}else{$(".pagination li").eq(0).removeClass("disabled");$(".pagination li").eq(len-1).removeClass("disabled");}});$('.prev').click(function(){iNow--;add();$(".pagination li").eq(len-1).removeClass("disabled");// console.log(iNow)});$('.next').click(function () {$(".pagination li").eq(0).removeClass("disabled");iNow++;add();// console.log(iNow)});function add() {if (iNow <= 1) {iNow = 1;$(".pagination li").eq(0).addClass("disabled");$(".pagination li").eq(len-1).removeClass("disabled");} else if(iNow >= len-2){iNow = len-2;$(".pagination li").eq(len-1).addClass("disabled");$(".pagination li").eq(0).removeClass("disabled");}else{$(".pagination li").eq(0).removeClass("disabled");$(".pagination li").eq(len-1).removeClass("disabled");}$('.pagination li').eq(iNow).addClass('active').siblings().removeClass('active')}

希望这篇文章对大家有所帮助，可以的话帮忙点亮下旁边的小手，让更多人看到，

如果上述代码有错误和不足，请评论或私信，我好及时改正。

Bootstrap（三）下拉菜单和分页器相关推荐

Bootstrap mouseover 下拉菜单 Enable Hover for Bootstrap Nav Dropdowns
Bootstrap v3′s navigation has menus toggle enabled by default - you have to click to have them open/ ...
Bootstrap 按钮下拉菜单
按钮下拉菜单,就为按钮添加一个下拉菜单,当用户点击按钮时,再显示或隐藏下拉菜单.只需把按钮和下拉菜单包装在一个 .btn-group 中,并为按钮添加 .dropdown-toggle 类和 data ...
Bootstrap 多级下拉菜单
在很多时候,我们可能需要多级下拉菜单.在一个下拉菜单的某个菜单项中,再创建另一个下拉菜单,即可实现多级下拉菜单. 只需为下拉菜单的任意 <li> 元素添加 .dropdown-submen ...
解决bootstrap dropdown 下拉菜单有时候不能显示的问题
解决bootstrap dropdown 下拉菜单有时候不能显示的问题参考文章: (1)解决bootstrap dropdown 下拉菜单有时候不能显示的问题 (2)https://www.cnbl ...
Bootstrap级联下拉菜单，你肯定用得到
今天我将介绍自定义的bootstrap级联下拉菜单(你肯定用得到),主要应用场合有省市级关联菜单等等,那么就先拿这个例子来讲,当然其他场景的关联菜单也同样适用.说实话,封装好一个通用的组件还是需要花费 ...
WEB前端网页设计-Bootstrap 按钮下拉菜单
目录 Bootstrap 按钮下拉菜单分割的按钮下拉菜单按钮下拉菜单的大小按钮上拉菜单 Bootstrap 按钮下拉菜单本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单. ...
html5三级下拉菜单,Bootstrap多级下拉菜单插件
bootstrap-submenu是一款在原生bootstrap Dropdowns组件的基础上进行扩展,可以生成多级子菜单的多级下拉菜单插件. 原生的bootstrap下拉菜单只有一层,通过boot ...
Bootstrap的下拉菜单
下拉菜单引入Boostrap的CSS和JS <div class="dropdown"><a data-toggle="dropdown" ...
Bootstrap按钮下拉菜单的尺寸
按钮下拉菜单的尺寸定义按钮下拉菜单时,无论是按钮下拉菜单,还是拼接式按钮下拉菜单,都可以使用按钮的尺寸类 .btn-lg.或.btn-sm或.btn-xs,来设置按钮的尺寸.如: <!-- L ...

Bootstrap（三）下拉菜单和分页器

下拉菜单

分页器

Bootstrap（三）下拉菜单和分页器相关推荐

最新文章

热门文章