bootstrap4(bootstrap响应式导航激活高亮，dedecms导航代码分享)

实现需求是：当处在某一归类下，或是在內容宝贝详情时，上一级归类及一级归类，所属导航栏的归类要完成全自动高亮度，有点儿相近所在位置，对客户具有提醒功效，告知客户当今访问的是哪一个归类，在网址的什么位置。


另外导航栏是响应式网站的，针对PC和手机端可以响应式；因此应用了bootstrap 4.4和融合dedecms全自动加上current的作用，以前共享过一篇子频道的技术性文章内容，此次是导航条的所有编码，能够立即应用哦。

如圖所显示，这时在內容宝贝详情，相匹配的一级归类导航栏也处在高亮度情况，这一对客户体验非常好，一眼就可以见到自身在网址的哪一个归类下边。
假如客户的所在位置在一级归类下边的某一个二级归类也是一样的实际效果。

一、HTML响应式网站编码

我的这端编码是全部导航栏，只启用了dedecms系统的一级归类，能够放到head.htm中立即用，为了更好地不怎么会dedecms系统标识的应用，因此所有都贴上去吧。

1.

2.

{dede:global.cfg_webname/}

3.

4.

5.

6.{dede:channel type='top' row='10' current}

8.

[field:typename/]

9.{/dede:channel}

10.

11.

12.

13.

14.

15.检索

16.

在其中第5~9行是dedecms的一级归类启用标识，别的的是bootstrap导航代码，如应用的并不是dedecms系统，只需把5~9行换成相匹配的数据信息启用就可以。

二、自定css代码

由于默认设置bootstrap沒有激活状态下色调等立即能用的编码，必须自定写两行css，下边是自定款式编码，先将其拷到Dreamweaver等在线编辑器里边恢复出厂设置一下，看上去便会很清新了。

a.@media (min-width: 992px) and (max-width:1201080x) {.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-1){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，立即拷贝应用得话留意不可以使小于此版本号，默认设置完成了挪动端款式。

视频录制了一个gif演试，由于我的首页模板都还没做出去，当今仅仅完成了一部分频道和宝贝详情的制作，手机端在后面，处在频道的归类下时也是有实际效果的，实际能够复制编码在当地检测。

文中由岑辉宇blog梳理公布，搜索微信微信公众平台“岑辉宇 ”可点击查看內容。

广州市高手出示系统软件的SEO挣钱课程培训，协助SEO学生学精SEO白白帽黑客技术性，迅速提高网址关键字排名。