bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠

分页:

分页功能是当遇到数据很多时,如果都放到一个页面上,那么找起来很不方便,而且不利于性能。此时采用分页功能就能很好的优化用户体验,可是如果自己开发分页功能,那么就会影响开发效率,bootstrap提供了分页功能,可以很好的解决这个问题,其用法:给父级ul标签添加pagination类,给子级li添加page-item,类样式如下:

类名描述
.pagination分页功能的容器添加的类名,用于布局
.page-item给分页功能里面每一项添加的类名,用于选择伪类 ,布局链接样式
.page-link没项链接中a标签的样式类
.active控制当前页被选中
.disabled控制当前链接不可点击
.pagination-S给父级容器添加的类,用于控制此功能整体布局大小,S的值有lg大、sm小
<!-- 1.分页功能,这里可以采用div+span的方式,推荐列表做分页 -->
<ul class="pagination pagination-sm"><!-- 2.给父级添加 pagination类,pagination-sm控制功能块显示大小--><li class="page-item"><a href="#" class="page-link">上一页</a></li><!-- 第一个链接和最后一个链接常用来跳转上下页--><li class="page-item active"><a href="#" class="page-link">1</a></li><!--3.active类用来显示当前页--><li class="page-item"><a href="#" class="page-link">2</a></li><li class="page-item"><a href="#" class="page-link">3</a></li><!-- 4.给每个li添加page-item类用于a链接布局,里面的链接添加page-link类会产生样式,不添加此类会紧挨在一起--><li class="page-item"><a href="#" class="page-link">4</a></li><li class="page-item disabled"><a href="#" class="page-link">5</a></li><!--5.disabled用来禁用当前的分页链接,按钮也是点不动的--><li class="page-item"><a href="#" class="page-link">下一页</a></li>
</ul>

分页组件推荐bootstrap-paginator,它是基于bootstrap的js插件,其使用方法可阅读相关文档:https://github.com/lyonlai/bootstrap-paginator

面包屑导航:

bootstrap中提供了面包屑导航的类样式,breadcrumb类用于父级容器ul,它控制li水平排列且去掉li默认样式;breadcrumb-item类用于子级li,它控制每层导航后面的/;active表示在当前位置,设置和不设置没太大区别,如:

<ul class="breadcrumb"><li class="breadcrumb-item"><a href="#">首页</a></li><li class="breadcrumb-item"><a href="#">个人中心</a></li><li class="breadcrumb-item"><a href="#">设置</a></li><li class="breadcrumb-item active">头像</li>
</ul>

列表组:

bootstrap提供了列表组,实际上就是对列表进行了样式格式化,类样式如下:

类名描述
.list-group用于ul或ol标签,初始化边距,使li紧靠父级元素
.list-group-item用于li标签,格式化了li的默认样式并设置边框和圆角
.active激活(选中)当前li,选中后当前li背景为蓝色
.disabled禁用当前li
.list-group-item-action设置鼠标悬停当前li时,当前li背景显示灰色
.list-group-item-success设置当前li为淡绿色,表示成功,鼠标悬停突出显示
.list-group-item-secondary设置当前li为淡灰色,表示次要,鼠标悬停突出显示
.list-group-item-info设置当前li为淡蓝色,表示信息,鼠标悬停突出显示
.list-group-item-warning设置当前li为淡黄色,表示警告,鼠标悬停突出显示
.list-group-item-danger设置当前li为淡红色,表示危险,鼠标悬停突出显示
.list-group-item-primary设置当前li为天蓝色,表示主要,鼠标悬停突出显示
.list-group-item-dark设置当前li为深灰色,鼠标悬停突出显示
.list-group-item-light设置当前li为暗白色,鼠标悬停突出显示
ul变div,li变a型上面类样式可以用来设置链接列表,只需要将ul变为div,li变为a即可
<ul class="list-group"><li class="list-group-item">ulList1</li><li class="list-group-item active">ulList2</li><li class="list-group-item">ulList3</li>
</ul><ol class="list-group"><li class="list-group-item disabled">olList1</li><li class="list-group-item">olList2</li>
</ol><div class="list-group"><a href="#" class="list-group-item list-group-item-action">aList1</a><a href="#" class="list-group-item active">aList2</a>
</div>

卡片:

bootstrap中提供了卡片类样式,其类样式如下:

类名描述
.card设置一个有边框有圆角的容器,可理解为卡片容器
.card-body设置一个有高度的容器,可理解为卡片主体
.card-header设置一个有高度淡灰色容器,可理解为卡片的头部
.card-footer设置一个有高度淡灰色容器,可理解为卡片的尾部
.card-title设置卡片标题,使文字加粗加黑
.card-text设置卡片正文内容
.card-link设置卡片链接
.card-img-top当卡片中有img时,给img此类样式,表示图片在文本上面
.card-img-bottom当卡片中有img时,给img此类样式,表示图片在文本下面
.card-img-overlay容器加此类后,容器会将同级别中靠容器前面的img图片设置为容器的背景且背景为响应式,容器前面没有img会向后找
<div class="card"><div class="card-header">carHeader</div><div class="card-body bg-primary">carBody</div><!--可设置背景颜色和字体颜色--><div class="card-footer text-success">carFooter</div>
</div><div class="card"><div class="card-header"><img class="card-img-top" src="2.PNG"></div><div class="card-body"><h5 class="card-title">carTitle</h5><h5 class="card-text">carText</h5><a href="#" class="card-link">carLink</a></div><img class="card-img-top" src="2.PNG"><div class="card-footer">carFooter</div>
</div><div class="card"><img class="card-img-bottom" src="2.PNG"><div class="card-img-overlay"><h3>hello</h3></div><!-- <img class="card-img-bottom" src="1.png"> -->
</div>

下拉菜单:

bootstrap中下拉菜单依赖于popper.js插件,使用时记得引入此依赖,相关类样式和下拉按钮相似,如下:

类名描述
.dropdown指定一个容器为下拉菜单,实际上是给此容器 position: relative
.dropdown-toggle定义一个小三角形,用于下拉菜单按钮的指示器
data-toggle=“dropdown”实现下拉菜单功能的自定义属性
.dropdown-menu使下拉菜单选项收起
.dropdown-item初始化下拉菜单选项样式
.dropdown-divider给下拉菜单中的项加一条分割线,此类给div
disabled警用下拉菜单中的此项
dropdown-menu-right使 dropdown-menu靠右排列,测试没有作用
.dropright、 .dropup、 .dropleft此类类名用于规定下拉菜单列表弹出的方向,此类名加在 dropdown-menu容器上
<div class="btn-group dropright"><button class="dropdown-toggle" data-toggle="dropdown">菜单</button><div class="dropdown-menu dropdown-menu-right"><div class="dropdown-header">蔬菜</div><a class="dropdown-item" href="#">白菜</a><a class="dropdown-item disabled" href="#">西红柿</a><div class="dropdown-divider"></div><div class="dropdown-header">水果</div><a class="dropdown-item" href="#">荔枝</a><a class="dropdown-item" href="#">芒果</a></div>
</div>

折叠:

bootstrap中提供折叠功能的封装,很轻松就可以实现元素的显示和隐藏,其具体类样式如下:

类名描述
data-toggle=“collapse”给一个按钮此属性用来控制某元素的显示或隐藏
data-target=“selector”给有data-toggle="collapse"属性的按钮添加此属性,用来选择需要显示或隐藏的元素,后面跟选择器,此属性在a元素中可以用href替换
.collapse此类名给需要折叠的元素,使元素默认是折叠的,不给此类,首次折叠会有bug
.show给要折叠的元素添加此类使初始就显示
data-parent=“groupSelector”给折叠元素本身,选择器指向一组折叠元素的父级,可实现展示某元素时,其他元素折叠(手风琴案例)
<!-- 手风琴案例 -->
<div class="group"><button data-toggle="collapse" data-target=".box1">显示/隐藏</button><div class="box1 show" data-parent=".group">box1</div><button data-toggle="collapse" data-target=".box2">显示/隐藏</button><div class="box2 collapse" data-parent=".group">box2</div><button data-toggle="collapse" data-target=".box3">显示/隐藏</button><div class="box3 collapse" data-parent=".group">box3</div>
</div>

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575322.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

当ASP.NET Forms验证方式遭遇苹果IOS

一、问题出现 我在用ASP.NET MVC4做微信开发的时候&#xff0c;用Forms验证方式做为authentication。 一般都是在web.config加&#xff1a; <authentication mode"Forms" ><forms loginUrl"~/Account/Login" name"webcookies" sliding…

bootstrap中导航、导航栏、表单及自定义表单

导航&#xff1a; bootstrap中使用列表封装了水平导航&#xff0c;其类样式如&#xff1a; 类名描述.nav给ul或ol&#xff0c;用于清除列表默认样式&#xff0c;并将列表项水平排列.nav-item给li,用于布局.nav-link给li里面的a,用于a布局.justify-content-center用于居中ul或…

Haproxy安装及配置(转)

1.安装 # wget http://haproxy.1wt.eu/download/1.3/src/haproxy-1.3.20.tar.gz # tar zcvf haproxy-1.3.20.tar.gz # cd haproxy-1.3.20 # make TARGETlinux26 PREFIX/usr/local/haproxy #将haproxy安装到/usr/local/haproxy # make install P…

bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象

轮播图&#xff1a; bootstrap封装了轮播图的功能&#xff0c;其具体如下&#xff1a; 类名描述.carousel创建一个轮播图块的容器&#xff0c;实质是做布局用&#xff1b;且此容器应该有一个di属性&#xff0c;其属性值提供给下面左右按钮href锚点值&#xff0c;用于左右按钮…

hive 常用UDF

Hive UDF整理(可以直接在mysql上测试&#xff0c;hive中没有伪表&#xff0c;需要手动创建&#xff0c;反应慢)字符串函数字符串长度函数&#xff1a;length 语法: length(string A)返回值: int说明&#xff1a;返回字符串A的长度举例&#xff1a;hive> select length(‘abc…

摄影网站收集

图虫网 http://tuchong.com/tags/%E9%95%BF%E6%B2%99/?orderweekly&page2 转载于:https://www.cnblogs.com/PS-apple/p/3902533.html

node简介及安装、下载及运行hexo

node简介&#xff1a; 1.node.js的可以打开服务端的黑盒子及高级前端(Vue、React 、Angular)的学习&#xff0c;例如&#xff1a;文件的读写、网络服务的构建、网络通信等。 2.node.js是操作服务器的一种工具&#xff0c;构建于Chrome的v8引擎之上&#xff0c;可以操作服务器…

node中模块系统及核心模块、执行node文件

node中模块系统&#xff1a; 1.模块系统&#xff1a;核心模块、第三方模块、 自己写的模块。 2.网页中所有的路径都是URL&#xff0c;而不是文件路径。 3.node偏底层开发&#xff0c;开启的服务器完全是一个黑盒子&#xff0c;所有的资源默认都是不能被用户访问的&#xff0…

Repository 仓储,你的归宿究竟在哪?(一)-仓储的概念

写在前面 写这篇博文的灵感来自《如何开始DDD(完)》&#xff0c;很感谢young.han兄这几天的坚持&#xff0c;陆陆续续写了几篇有关于领域驱动设计的博文&#xff0c;让园中再次刮了一阵“DDD探讨风”&#xff0c;我现在不像前段时间那样“疯狂”了&#xff0c;写博文需要灵感&a…

node中模板引擎、模块导出、package.json简介

在node.js中使用引擎模板&#xff1a; art-template不仅在浏览器可以使用&#xff0c;也可以在node中使用&#xff0c;并且模板引擎起早诞生于服务器领域&#xff0c;在node中使用模板引擎&#xff1a; 1.安装&#xff1a;在一个文件目录下执行命令&#xff1a;npm install a…

富爸爸穷爸爸

推荐大家看看&#xff0c;虽然我只看了第一章&#xff0c;但是我觉得写的确实挺好的&#xff0c;也确实符合这个社会规律。 老实本分的工作已经是过去式了。为自己工作才是出路。转载于:https://www.cnblogs.com/joysky/p/3909127.html

Java和C++在细节上的差异(转)

Java的基本程序结构、关键字、操作符都和C/C非常相似&#xff0c;以下为主要的几点区别: 一、基本程序设计结构&#xff1a; Java的基本程序结构、关键字、操作符都和C/C非常相似&#xff0c;以下为主要的几点区别&#xff1a; 1. Java的原始数值型数据类型中不包含无符号类型&…

文件路径和模块路径、nodemon工具

文件路径和模块路径&#xff1a; //在文件操作相对路径中&#xff0c;前面的 ./ 可以省略&#xff0c;但是 在模块标识路径中 &#xff0c;前面的 ./ 不能省略。// ./-----表示相对于当前目录 /-------当前文件所属磁盘根目录 var fs require(fs);fs.readFile(t…

Express框架简介、express使用模块引擎、模式数据

Express简介&#xff1a; 原生的http不足以应对我们的开发需求&#xff0c;所以我们需要使用框架来加快我们的开发&#xff0c;这里推荐expressjs&#xff0c;其官网&#xff1a;expressjs.com&#xff0c;中文文档推荐&#xff1a;http://javascript.ruanyifeng.com/nodejs/e…

数据库字段关联更新

MS SQL Server 子查询更新&#xff1a; update log set uin b.uin from log a,logs b where a.accountuin b.accountuin mysql 更新&#xff1a; update t_stat_month_user a INNER JOIN t_dept b on a.op_deptb.op_id set a.dept_short_nameb.dept_short_name;转载于:https:/…

浏览器基础知识

Web浏览器的主要功能是展示网页资源&#xff0c;即请求服务器并将结果展示在窗口中。工作原理大概如下&#xff1a; 地址栏输入URL 浏览器根据输入的URL查找域名的IP地址&#xff0c;DNS查找过程如下&#xff1a; 浏览器缓存——浏览器会缓存DNS记录一段时间&#xff0c;不同浏…

MongoDB简介、在node中使用MongoDB

MongoDB数据库简介&#xff1a; 使用MongoDB的好处是不用SQL语句&#xff0c;它提供了对应的API&#xff0c;其功能和MYSQL基本相同&#xff0c;是最像关系型数据库的非关系型数据库&#xff1b;不需要设计表的结构&#xff0c;文档相当于json&#xff0c;如果想要了解更多&am…

喜用神最正确的算法_各种电磁仿真算法的优缺点和适用范围(FDTD, FEM和MOM等)...

从实际工程应用的角度谈一下我对这几种算法的理解。先说结论&#xff0c;FDTD算的快但是不精确&#xff0c;可以用来算电大尺寸的物体&#xff0c;要是一个物体的尺寸大于10个波长&#xff0c;一般的服务站是跑不动FEM的&#xff0c;那必须得用FDTD了。FEM最经典的电磁仿真软件…

Linux下实现自动设置SSH代理

SSH的巨大价值体现在能够配置为代理服务器上。不像在Windows下每次还需要手动登录设置&#xff0c;Linux有很好的工具链能够实现自动设置SSH代理&#xff0c;就是expect和ssh的联合使用&#xff0c;再加上proxychains&#xff0c;任何程序都可以享用代理了&#xff0c;在此我简…

node中操作MySQL

node操作MySQL数据库&#xff1a; 在node中操作MySQL数据库的基本流程如下&#xff1a; // node操作MySQL需要在npm官网下载mysql包并载入node执行代码&#xff1a;// 1.载入MySQL数据库包var mysql require(mysql);// 2.创建连接&#xff1a;var connection mysql.createCo…