bootstrap基础

眼睛尿尿了

于 2024-01-02 16:15:13 发布

阅读量372

点赞数 5

文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/kkdsgjg/article/details/135343640

版权

本文指导如何使用Bootstrap5.2.0构建基本博客，包括引入CSS和JS文件，创建导航栏、博客文章列表以及页脚的HTML代码示例。

摘要由CSDN通过智能技术生成

当创建一个基础的 Bootstrap 博客时，你需要了解如何使用 HTML 和 Bootstrap 的基本组件。以下是一个简单的示例，包括导航栏、博客文章列表和页脚。

首先，确保你已经引入了 Bootstrap 的 CSS 文件和 JavaScript 文件。你可以通过以下方式引入它们：

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"> <title>Bootstrap Blog</title>  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body>

接下来，创建导航栏：

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="#">My Blog</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto"> <li class="nav-item"> <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> </div> </nav>

接下来，创建一个博客文章列表：

html

<div class="container mt-4"> <div class="row"> <div class="col-md-8"> <h2>Blog Post Title</h2> <p class="text-muted">Posted on January 1, 2024</p> <p>This is the content of the blog post. You can write your article here.</p> <h2>Another Blog Post</h2> <p class="text-muted">Posted on January 2, 2024</p> <p>This is another example blog post. Add as many as you want.</p> </div> <div class="col-md-4"> <h3>Recent Posts</h3> <ul class="list-group"> <li class="list-group-item"><a href="#">Blog Post Title 1</a></li> <li class="list-group-item"><a href="#">Blog Post Title 2</a></li> <li class="list-group-item"><a href="#">Blog Post Title 3</a></li> </ul> </div> </div> </div>

最后，添加页脚：

html

<footer class="bg-dark text-light text-center p-3"> <p>© 2024 My Blog. All Rights Reserved.</p> </footer>  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

这只是一个简单的例子，你可以根据需要进行扩展和自定义。确保替换示例内容为你自己的博客文章和信息。

眼睛尿尿了

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
bootstrap基础

当创建一个基础的 Bootstrap 博客时，你需要了解如何使用 HTML 和 Bootstrap 的基本组件。以下是一个简单的示例，包括导航栏、博客文章列表和页脚。首先，确保你已经引入了 Bootstrap 的 CSS 文件和 JavaScript 文件。这只是一个简单的例子，你可以根据需要进行扩展和自定义。确保替换示例内容为你自己的博客文章和信息。
复制链接

扫一扫