首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端|Bootstrap——导航组件

前端|Bootstrap——导航组件

作者头像
算法与编程之美
发布2020-03-25 17:39:42
6.5K0
发布2020-03-25 17:39:42
举报

Bootstrap是一个用于快速开发Web 应用程序和网站的前端框架,它提供了一个带有网格系统、链接样式、背景的基本结构。Bootstrap提供了许多的组件,其中就包括导航组件。这在很大程度上简化了操作。通常都是利用列表实现来导航的,常用的是无序列表(<ul>)和有序列表(<ol>)。自定义列表(<dl>)一般不会用来实现导航。

常见的导航菜单有标签式的导航菜单,胶囊式的导航菜单等等。导航菜单的样式多种多样,其在各式软件中的应用也是不可或缺的。今天就来简单制作一个导航菜单。效果如下:

图1.1 效果图

问题描述

如何制作导航菜单

首先要引入jquery.js、bootstrap.min.js和bootstrap.min.css文件。(这里需要注意jquery.js文件必须在bootstrap.min.js之前引入)在这些文件里已经封装好了一些样式和功能,引入之后就可以利用代码实现相关功能了。

解决方案

(1)常规导航栏

先创建一个无序或者有序列表,把基本的元素先放进去。以一个带有 class=“nav”的无序列表开始,再添加class=“nav nav-tabs”。还可以向上面的元素添加role="navigation",这样有助于增加可访问性,也可以不加,对于功能的实现没有很大的影响。向 <div> 元素添加一个标题class="active",则表示当前默认菜单选项,添加class=“navbar-header”,会让文本看起来更大一号如下图就是现在的效果图:

图2.1 效果图

(2)页面可跳转的菜单栏

常见的导航菜单是一定可以实现页面切换的。这里就可以利用a标签。实现标签切换只需要在a标签上添加自定义属性data-toggle=“tab”。向标签添加class="tab-pane fade ",就可以实现淡入淡出效果。如果需要为标签页设置淡入淡出效果,请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类,以便淡入显示初始内容。如下代码就可以实现跳转到B页面:

<!-- 跳转到B页面--><li ><a href="#B" data-toggle="tab">详情1</a></li><!--实现页面切换--> <div id="tab-content"> <div class="tab-pane fade in active" id="A"> <p>AAAAAAAAAAAAAA</p> </div> </div>

(3)可切换的下拉的菜单栏

下来菜单的实现需要使用到触发器“dropdown”,向标签添加添加data-toggle="dropdown" 就可以实现切换下拉菜单功能。这里需要注意dropdown-toggle是下拉菜单样式,data-toggle是js属性,而dropdown是属性值。data-toggle="dropdown"表示引用js给外层添加一个open类,class="dropdown"默认没有open,点击一次为class="dropdown open",再点击一次为class="dropdown"。如果没有data-toggle="dropdown"的话,即使被定义为dropdown-toggle类,也不能实现动态的菜单下拉和收回的效果。当添加 data-toggle="dropdown" 属性,就可以让下拉菜单默认隐藏,只有在点击按钮或链接时,它才显示出来。

此外,这里的下拉菜单,还使用了使用来指示按钮作为下拉菜单。dropdown-menu设置了display:none,下拉菜单项就默认隐藏。这里需要注意aria-labelledby属性的作用是当想要的标签文本已在其他元素中存在时,可以将其值为该元素的id。tabindex="-1":不允许使用tab键。

<li> <a href="#" id="dropdown" data-toggle="dropdown">详情3<i></i></a> <ul role="menu" aria-labelledby="dropdown"> <li><a href="#a" tabindex="-1" data-toggle="tab">1</a></li> <li><a href="#b" tabindex="-1" data-toggle="tab">2</a></li> <li><a href="#c" tabindex="-1" data-toggle="tab">3</a></li> </ul> </li>

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-03-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 算法与编程之美 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档