怎么用bootstrap写一个网站,来显示一些图片
时间: 2023-12-01 17:03:29 浏览: 40
首先,你需要在你的HTML代码中引入Bootstrap的CSS和JavaScript文件。你可以在Bootstrap官网上下载这些文件,或者使用CDN来引入这些文件。以下是一个基本的HTML代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>My Bootstrap Website</title>
<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>My Bootstrap Website</h1>
<p>Here are some pictures:</p>
<div class="row">
<div class="col-sm-4">
<img src="image1.jpg" alt="Image 1" class="img-fluid">
</div>
<div class="col-sm-4">
<img src="image2.jpg" alt="Image 2" class="img-fluid">
</div>
<div class="col-sm-4">
<img src="image3.jpg" alt="Image 3" class="img-fluid">
</div>
</div>
</div>
<!-- 引入Bootstrap的JavaScript文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
```
在这个示例中,我们使用了Bootstrap的网格系统来创建一个包含三张图片的行。每个图片都被包含在一个列(`col-sm-4`)中,并且使用了`img-fluid`类来使图片在不同屏幕大小下自适应。你可以更改图片的宽度和高度,以便它们适应你的需要。
记得在你的图片文件夹中上传你的图片,并用正确的文件名替换示例代码中的`image1.jpg`、`image2.jpg`和`image3.jpg`。