一套不错的基于Bootstrap的博客系统静态页面

一套不错的基于Bootstrap的博客系统静态页面,能够为省去前端技术不是太好 ,又想做博客系统的朋友们提供一个不错的前端页面模板。 该博客系统静态页面采用bootstrap前端框架,能够兼容移动端访问,外观轻便简洁,进一步开发后台程序方便。 同时本静态页面配套了一个后台程序,形成了一个完整的博客系统。 目前,这套基于Bootstrap的博客系统静态页面已经由V1.0发展到V2.0。页面和功能大大增加。 V1.0版本的页面包含: 博客首页 博文列表 个人主页 好几套新增博客页面(这几套新增页面分别采用不同的富文本编辑器插件,方便使用者选用符合自己的习惯的插件) 个人管理中心页面(包含密码管理、用户头像管理 、编辑个人资料、收藏文章管理 、关注人管理、博文分类管理 、草稿箱管理) 博文页面 登陆页面

V2.0版本新增页面: 注册页面 找回密码页面 个人消息中心管理(包含系统消息、回复、评论、私信、粉丝) 文档管理页面

下面展示静态 页面: : 博客首页

博客首页

文档管理

文档管理

个人主页

个人主页

博文内容页:

博文内容页

关于博客页面

关于博客页面

发表博文页面

发表博文页面

修改个人信息

修改个人信息

修改个人头像

修改个人头像

我关注的人

我关注的人

用户消息中心

用户消息中心

登陆页面-注册页面、找回密码页面不再贴图

登陆页面

这套前端页面静态文件完全为个人开发,能够为想开发博客系统又没有前端HTML5或者bootstrap技术的朋友们提供一个好的模板。 静态页面链接:链接 查看演示:演示

转载于:https://my.oschina.net/guopengfei/blog/847019

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当然可以!以下是一个基于Bootstrap 5的简单个人博客管理页面的示例代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>个人博客管理</title> <!-- 引入Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="#">个人博客管理</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 ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">首页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">文章管理</a> </li> <li class="nav-item"> <a class="nav-link" href="#">分类管理</a> </li> <li class="nav-item"> <a class="nav-link" href="#">标签管理</a> </li> </ul> </div> </div> </nav> </header> <main> <div class="container mt-4"> <h1>欢迎来到个人博客管理页面</h1> <p>在这里你可以管理你的文章、分类和标签。</p> </div> </main> <footer class="bg-dark text-light text-center py-3 mt-4"> <div class="container"> © 2022 个人博客管理 </div> </footer> <!-- 引入Bootstrap的JS文件(需要先引入jQuery) --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html> ``` 这是一个简单的页面结构,其中包含了一个导航栏、主要内容区域和页脚。你可以根据需要在主要内容区域添加文章管理、分类管理和标签管理的相关内容。 注意:这里使用了Bootstrap 5的CDN链接来引入CSS和JS文件,确保你的网络环境正常以便能够加载这些文件。你也可以下载这些文件到本地并相应地修改链接。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值