Bootstrap 导航栏原素

摘要:此章大家将解读 Bootstrap 出示的用以界定导航栏原素的一些选择项。他们应用同样的标识和基类 .nav。Bootstrap 也出示了一个用以共享资源标识和情况的协助器类。更改装饰的 class,能够不...

此章大家将解读 Bootstrap 出示的用以界定导航栏原素的一些选择项。他们应用同样的标识和基类 .nav。Bootstrap 也出示了一个用以共享资源标识和情况的协助器类。更改装饰的 class,能够不在同的款式间开展转换。


基本的胶囊式导航栏莱单

假如必须把标识改为胶囊的款式,只必须应用 class .nav_pills 替代 .nav_tabs 就可以,别的的流程与上边同样。

下边的案例演试了这一点:

p 基本的胶囊式导航栏莱单 /p ul > 试着一下 »

結果以下所显示:

基本的胶囊式导航菜单 竖直的胶囊式导航栏莱单

您能够在应用 class .nav、.nav_pills 的同时应用 class .nav_stacked,让胶囊竖直层叠。

下边的案例演试了这一点:

p 竖直的胶囊式导航栏莱单 /p ul > 试着一下 »

結果以下所显示:

垂直的胶囊式导航菜单
两边两端对齐的导航栏

您能够在显示屏总宽超过 768px 时,根据在各自应用 .nav、.nav_tabs 或 .nav、.nav_pills 的同时应用 class .nav_justified,让标识式或胶囊式导航栏莱单与父原素等宽。在更小的显示屏上,导航栏连接会层叠。

下边的案例演试了这一点:

p 两边两端对齐的导航栏原素 /p ul > 试着一下 »

結果以下所显示:

两端对齐的导航元素

对每一个 .nav class,假如加上了 .disabled class,则会建立一个深灰色的连接,同时禁止使用了该连接的 :hover 情况,以下面的案例所显示:

p 导航栏原素中的禁止使用连接 /p ul > 试着一下 »

結果以下所显示:

导航元素中的禁用链接 该 class 总是更改 a 的外型,不容易更改它的作用。在这里里,您必须应用自定的 JavaScript 来禁止使用连接。

导航栏莱单与往下拉莱单应用类似的英语的语法。默认设置状况下,目录项的锚与一些数据信息特性协作协作来开启含有 .dropdown_menu class 的混乱目录。

含有往下拉莱单的标识

向标识加上往下拉莱单的流程以下:

以一个含有 class .nav 的混乱目录刚开始。 加上 class .nav_tabs。 加上含有 .dropdown_menu class 的混乱目录。
.nav_justified 两边两端对齐的标识页,在超过 768px 的显示屏上,根据 .nav_justified 类能够非常容易的让标识页或胶囊式标识展现出同样总宽。在小显示屏上,导航栏连接展现层叠款式。 试着一下
.tab_content 与 .tab_pane 和 data_toggle="tab" (data_toggle="pill" ) 一同应用, 设定标识页相匹配的內容随标识的转换而变更 试着一下
.tab_pane 与 .tab_content 和 data_toggle="tab" (data_toggle="pill")一同应用, 设定标识页相匹配的內容随标识的转换而变更 试着一下


联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:修图软件