SQL Server2008的安装,SQLServer2008的安装......
2023-02-22 274 安装
bootstrap如何实现二级菜单导航，面包屑导航
来源：互联网
2023-02-20 22:45:14 版权归原作者所有，如有侵权，请联系我们
bootstrap如何实现二级菜单导航
工具/原料
- bootstrap
- eclipse
方法/步骤
二级导航实际上是相当于下拉菜单样式基础上实现的。
首先实现导航菜单的样式：
%@ 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>
现在我们在导航菜单上实现一个二级菜单
%@ 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="dropdown">
a href="#" class="dropdown-toggle" data-toggle="dropdown">
培训span class="caret">/span>
/a>
ul class="dropdown-menu">
li>a>java培训/a>
li>a>oracle培训/a>
/ul>
/li>
li>a href="#">图书/a>/li>
/ul>
/div>
/div>
/div>
/body>
/html>
在浏览器查看此二级菜单的渲染效果
利用面包屑导航可以清楚的标记处用户浏览信息在整个网站的具体位置，这样就方便用户惊醒信息的浏览，在bootstrap中可以使用".breadcrumb"样式实现样式的显示。
%@ 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="breadcrumb">
li class="active">a href="#">主页/a>/li>
li>a href="#">个人信息/a>/li>
li class="dropdown">
a href="#" class="dropdown-toggle" data-toggle="dropdown">
培训span class="caret">/span>
/a>
ul class="dropdown-menu">
li>a>java培训/a>
li>a>oracle培训/a>
/ul>
/li>
li>a href="#">图书/a>/li>
/ul>
/div>
/div>
/div>
/body>
/html>
在浏览器中查看面包屑导航的效果：
这样的导航在一些信息浏览的页面上真的很常见的功能。可以进行准备的定位。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：龙神契约正式版攻略开局完美流程 下一篇：win7 host文件怎么配置
相关文章
