使用bootstrap制作一个简单页面布局实例网站
时间: 2023-09-03 09:06:10 浏览: 57
好的,下面是一个基于Bootstrap的简单页面布局示例网站:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Page Layout Example</title>
<!-- 引入Bootstrap CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- 页面主体 -->
<div class="container mt-3">
<div class="row">
<div class="col-md-8">
<h1>Welcome to my website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, libero a aliquet dictum, nisi lacus lacinia metus, vel rhoncus ipsum mauris et ipsum. Sed scelerisque turpis non augue faucibus, vel tincidunt sapien euismod. Suspendisse quis vestibulum velit, eget laoreet nunc. Maecenas posuere fermentum ante, ac interdum felis ultrices quis. Duis ipsum dolor, scelerisque sit amet tellus et, efficitur rutrum nulla. Nulla facilisi.</p>
</div>
<div class="col-md-4">
<h3>Latest News</h3>
<ul class="list-group">
<li class="list-group-item">News item 1</li>
<li class="list-group-item">News item 2</li>
<li class="list-group-item">News item 3</li>
<li class="list-group-item">News item 4</li>
</ul>
</div>
</div>
</div>
<!-- 引入Bootstrap JS文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>
```
该网站包含一个导航栏和一个主体内容区域。导航栏包含Logo和三个链接,可以通过Bootstrap的内置样式和组件轻松构建。主体内容区域是一个两列布局,左侧是一篇文章,右侧是最新新闻列表。通过Bootstrap的栅格系统,可以轻松实现响应式布局。最后,引入Bootstrap的JS文件,可以增强网站的交互性和用户体验。
希望这个示例可以帮助你了解如何使用Bootstrap制作简单页面布局。