旅游景点 旅游攻略 日本旅游 文化旅游 旅游景区 昆明旅游 桂林旅游 乡村旅游 上海旅游

bootstrap如何实现二级菜单导航,面包屑导航

时间:2024-10-18 08:53:50

1、二级导航实际上是相当于下拉菜单样式基础上实现的。首先实现导航菜单的样式:<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><% pageContext.setAttribute("APP_PATH",request.getContextPath());%><!-- 此时表示根据设备的大小调整页面的显示宽度 --><meta name="viewport" content="width=device-width,initial-scale=1"><script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script><link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" /><script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><html><body> <div class="container"> <div class="row"> <div class="col-md-6"> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">主页</a></li> <li><a href="#">个人信息</a></li> <li class="disabled"><a href="#">培训</a></li> <li><a href="#">图书</a></li> </ul> </div> </div> </div></body></html>

bootstrap如何实现二级菜单导航,面包屑导航

3、在浏览器查看此二级菜单的渲染效果

bootstrap如何实现二级菜单导航,面包屑导航

5、在浏览器中查看面包屑导航的效果:

bootstrap如何实现二级菜单导航,面包屑导航
© 途途旅游