无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻 > 公司新闻 >

bootstrap回应式导航栏激活高亮度,dedecms导航栏编码共享

时间:2021-01-19 14:17来源:未知 作者:jianzhan 点击:
短视頻,自新闻媒体,达人种草1站服务完成要求是:当处在某个归类下,或在內容详细信息页时,上1级归类及1级归类,所属导航栏的归类要完成全自动高亮度,有点相近当今部位,对

bootstrap回应式导航栏激活高亮度,dedecms导航栏编码共享


短视頻,自新闻媒体,达人种草1站服务

完成要求是:当处在某个归类下,或在內容详细信息页时,上1级归类及1级归类,所属导航栏的归类要完成全自动高亮度,有点相近当今部位,对客户起到提醒功效,告知客户当今访问的是哪个归类,在网站的甚么部位。另外导航栏是回应式的,针对PC和挪动端可以自融入;因此应用了bootstrap 4.4和融合dedecms全自动加上current的作用,以前共享过1篇子栏目地技术性文章内容,本次是导航栏栏的所有编码,能够立即应用哦。

如上图所示,此时在內容详细信息页,对应的1级归类导航栏也处在高亮度情况,这个对客户体验很好,1眼便可以看到自身在网站的哪个归类下面。假如客户确当前部位在1级归类下面的某1个2级归类也是1样的实际效果。

1、HTML回应式编码

我的这端编码是全部导航栏,只启用了dedecms系统软件的1级归类,能够放在head.htm中立即用,以便不太会dedecms系统软件标识的应用,因此所有都贴出来吧。

1.

2.

{dede:global.cfg_webname/}

3.

4.

5.

6.{dede:channel type='top' row='10' currentstyle="

7.

~typename~

"}

8.

[field:typename/]

9.{/dede:channel}

10.

11.

12.

13.

14.

15.检索

16.

在其中第5~9行是dedecms的1级归类启用标识,别的的是bootstrap导航栏编码,如应用的并不是dedecms系统软件,要是把5~9行更换成对应的数据信息启用便可。

2、自定css编码

由于默认设置bootstrap沒有激活情况下色调等立即能用的编码,必须自定写几行css,下面是自定款式编码,先将其复制到Dreamweaver等编写器里边文件格式化1下,看起来就会很清新了。

a.@media (min-width: 992px) and (max-width:1200px) {.navbar-collapse .form-inline .input-group .form-control {width: 9rem !important}}

b.@media (max-width: 992px) {.navbar-collapse .mr-auto{margin-top: .5rem}.navbar-collapse .mr-auto li:nth-of-type(2n⑴){background: #eee;}}

c.navbar-collapse .mr-auto li a{color: rgba(0, 0, 0, 0.9);display: block;padding: 0.5rem 0.5rem;}

d.navbar-collapse .mr-auto li a:hover,.navbar-collapse .mr-auto li a:active,.navbar-collapse .mr-auto li a:focus{color: #fff;background: #c1962f;text-decoration: none;border-radius: .2rem;}

f.navbar-collapse .mr-auto li .current{background: #af8a33;color: #fff;border-radius: .2rem;}

bootstrap版本号是4.4,立即拷贝应用的话留意不可以使低于此版本号,默认设置完成了挪动端款式。

录制了1个gif演试,由于我的主页模版都还没做出来,当今只是进行了一部分栏目和详细信息页的设计方案制作,挪动端在后边,处在栏目地归类下时也是合理果的,实际能够复制编码在当地检测。

本文由岑辉宇blog梳理公布,手机微信检索手机微信群众号 岑辉宇 可查询更多內容。


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信

在线咨询
联系电话

400-888-8866