写一段基于Bootstrap的网页设计
时间: 2024-02-27 21:58:30 浏览: 63
基于Bootstrap的网页设计实例
好的,以下是一个简单的基于Bootstrap的网页设计代码示例:
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
<title>Bootstrap Webpage</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Bootstrap Webpage</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-5">
<div class="row">
<div class="col-md-6">
<h2>Welcome to Bootstrap Webpage</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi quis nulla porttitor varius. Aliquam erat volutpat. Pellentesque ultrices, justo at malesuada sagittis, diam nisi malesuada mi, sed pretium ligula velit eget enim. Duis vel ante vel massa commodo maximus non sed mauris. Nulla porttitor, arcu ut efficitur tincidunt, eros nisi dapibus libero, a hendrerit leo felis quis arcu. Phasellus malesuada quam nec sapien mollis, eu ullamcorper velit imperdiet. Sed quam neque, aliquam vitae consectetur vel, iaculis auctor nisl. Fusce eget mollis nulla. Duis nec nisl eget turpis auctor consectetur et vel lorem. Morbi vulputate sapien a massa rutrum, ac bibendum risus tempor. Vestibulum bibendum ante in risus ornare, a bibendum quam blandit.</p>
</div>
<div class="col-md-6">
<img src="https://via.placeholder.com/400x300" class="img-fluid" alt="Placeholder Image">
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper-base.min.js" integrity="sha384-Elx2AUFtH+Mw1m7ZP2dgLZ6TjNAUqIzm6YfWK4jW3tqJ3uN6nyY8GzX6A6+8mGrD" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
```
这个代码示例包括了一个简单的导航栏和一个带有文本和图片的两栏布局。同时,它还使用了Bootstrap提供的网格系统,使网页在不同大小的屏幕上都能正常显示。在实际开发过程中,你可以根据自己的需求和设计风格进行修改。
阅读全文