用bootstrap做一个我的帖子页面
时间: 2024-01-29 09:03:35 浏览: 25
好的,以下是一个用 Bootstrap 4.5 实现的简单的帖子页面示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Post</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-lg-8">
<h1>My Post Title</h1>
<p>Posted on January 1, 2021 by John Doe</p>
<hr>
<img src="https://via.placeholder.com/800x400" class="img-fluid mb-3" alt="Post Image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec facilisis ex. In vitae augue et metus venenatis tincidunt. Etiam augue magna, lobortis et lobortis ut, consectetur vel neque. Sed euismod ex nec leo euismod, vel aliquet velit euismod. Nam id dapibus sapien. Sed euismod neque metus, non vestibulum dolor iaculis vel. Curabitur aliquam nulla vitae risus aliquam, nec tempor augue congue. Sed bibendum tellus eu ipsum varius, non gravida lectus elementum. Sed dictum leo in lorem iaculis, ut convallis velit venenatis. Proin vel congue tellus. Cras auctor, elit in porttitor efficitur, mauris ipsum facilisis nunc, vel pellentesque arcu sem ac sapien.</p>
<p>Nullam commodo elit eget ipsum interdum, ut egestas mauris egestas. Donec pretium nulla non mauris fringilla, id lobortis orci commodo. Maecenas sodales nulla nec orci dapibus, et vulputate felis scelerisque. Sed dapibus, elit in molestie lobortis, tellus turpis pellentesque magna, vel lacinia velit augue nec sapien. Proin sit amet nunc euismod, vulputate tortor eu, vestibulum turpis. Nullam gravida nisi vel libero ultrices, et interdum velit rhoncus. Sed nec diam eget ipsum vestibulum semper. Praesent ut risus vel tellus pharetra mollis id vitae tellus. Sed maximus sem vel sem faucibus, eget blandit quam euismod. Ut mattis, nunc eu malesuada accumsan, nisi elit suscipit leo, at egestas eros odio ac augue. Suspendisse potenti. Nulla venenatis, nisl vel placerat aliquam, lectus est dictum velit, euismod tempor tellus turpis ac felis. Fusce congue erat vel risus fermentum, sed mollis nulla fringilla. </p>
</div>
<div class="col-lg-4">
<div class="card mb-3">
<div class="card-header">
Categories
</div>
<div class="card-body">
<ul class="list-unstyled">
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
</ul>
</div>
</div>
<div class="card mb-3">
<div class="card-header">
Recent Posts
</div>
<div class="card-body">
<ul class="list-unstyled">
<li><a href="#">Post 1</a></li>
<li><a href="#">Post 2</a></li>
<li><a href="#">Post 3</a></li>
<li><a href="#">Post 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<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"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
```
这是一个简单的帖子页面,其中包括帖子标题、发布时间、内容和侧边栏,侧边栏包括分类和最近的帖子。这个示例使用了 Bootstrap 的网格系统、卡片样式和响应式图像,它可以在不同大小的屏幕上自适应。
你可以根据需要进行更改和扩展,例如添加评论区域、社交分享按钮等等。希望这个示例对你有所帮助!