请使用bootstrap写一个面包屑导航栏,导航栏左侧可插入logo图片,右侧有一个汉堡菜单
时间: 2024-02-20 20:02:09 浏览: 105
BootStrap学习笔记之nav导航栏和面包屑导航
以下是一个示例代码,实现了一个包含面包屑导航栏、Logo图片和汉堡菜单的基本布局。需要注意的是,这只是一个示例代码,具体的样式和布局可以根据具体需求进行调整。
```HTML
<!DOCTYPE html>
<html>
<head>
<title>面包屑导航栏</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
.logo {
margin-top: 10px;
margin-left: 20px;
height: 40px;
}
.breadcrumb {
margin-top: 20px;
margin-bottom: 0;
background-color: #f2f2f2;
padding: 10px;
border-radius: 0;
font-size: 16px;
font-weight: 600;
}
.breadcrumb a {
color: #333;
text-decoration: none;
}
.breadcrumb a:hover {
color: #0066cc;
text-decoration: underline;
}
.hamburger {
margin-top: 10px;
margin-right: 20px;
font-size: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md bg-light navbar-light">
<a class="navbar-brand" href="#"><img src="logo.png" class="logo"></a>
<button class="navbar-toggler hamburger" type="button" data-toggle="collapse" data-target="#navbarCollapse">
☰
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto"></ul>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container-fluid">
<nav aria-label="breadcrumb" class="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
</div>
</body>
</html>
```
在这个示例代码中,使用了Bootstrap提供的导航栏、面包屑、Logo图片和汉堡菜单等组件。其中,导航栏包含Logo图片和汉堡菜单,面包屑导航栏用于显示当前页面的位置信息。在样式方面,对Logo图片、面包屑导航栏和汉堡菜单进行了简单的调整,使其适应不同的屏幕尺寸和设备类型。
阅读全文