博客前端模板

序言

一直后端开发写接口，时间久了，把前端知识忘得一干二净了。最近公司项目不是很忙，想写一个博客练练手。模仿别人博客用bootstrap写了一个博客模板记录下。

效果展示

首页大屏效果：

首页中屏效果：

首页小屏效果：

详情页大屏效果：

详情页中小屏效果：

菜单栏实现

<!-- 菜单栏 -->
<div class="container-fluid bg-dark">
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark">
      <a href="#" class="navbar-brand">buddha程序员</a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbar-collapse"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="navbar-nav me-auto">
          <li class="nav-item">
            <div class="nav-link">首页</div>
          </li>
          <li class="nav-item">
            <div class="nav-link">PHP开发</div>
          </li>
          <li class="nav-item">
            <div class="nav-link">Java开发</div>
          </li>
          <li class="nav-item">
            <div class="nav-link">Python开发</div>
          </li>
          <li class="nav-item">
            <div class="nav-link">Go开发</div>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

内容布局

布局顺序是先上后下，先左后右，采用bootstrap栅格系统实现响应式

<div class="container mb-5">
  <!-- 分成左右部分 -->
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8"></div>
    <div class="col-lg-4 d-none d-sm-none d-md-none d-lg-block"></div>
  </div>
</div>

底部代码

<footer class="p-5 bg-dark text-white text-center">
  <div class="container">
    <p>
      版权所有：2017-2021 <a
        href="https://beian.miit.gov.cn"
        target="_blank"
        >粤ICP备2021010410号-1</a
      >
    </p>
    <p>联系邮箱：[email protected]</p>
  </div>
</footer>

整体大概是这个样子，细节肯定还有很多需要完善的。后期接入数据，再进行效果局部调试。