用bootstrap编一个有下拉列表的网站,要求有nav,背景图,footer
时间: 2024-03-16 09:45:18 浏览: 12
好的,以下是一个简单的用Bootstrap编写的网站,包括了导航栏、背景图和底部页脚:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Website with Dropdown Menu</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.2/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.2/js/bootstrap.min.js"></script>
<style>
/* Set background image */
body {
background-image: url('https://picsum.photos/1920/1080');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Website Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 3</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid text-center text-white pt-5 pb-5">
<h1>Welcome to My Website</h1>
<p>Here you can find all the information you need!</p>
</div>
<footer class="bg-dark text-white pt-3 pb-3">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>Contact Us:</p>
<p>123 Main St</p>
<p>Anytown, USA 12345</p>
<p>Phone: 555-555-5555</p>
<p>Email: info@website.com</p>
</div>
<div class="col-md-6">
<p>Follow Us:</p>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
</div>
</div>
</div>
</footer>
</body>
</html>
```
你可以将上述代码保存为一个HTML文件并打开查看效果。注意,为了使下拉菜单正常工作,你需要在页面中包含Bootstrap的JavaScript文件。