Bootstrap 5 - 导航栏
2023年11月13日 2024年2月13日
前置
- Bootstrap是前端插件库
Bootstrap - 使用
RUNOOB-Bootstrap5教程
说明
- 不同颜色导航栏
- 品牌/Logo
- 导航栏使用下拉菜单
- 固定导航栏
框架
使用bootstrap5
1<!DOCTYPE html> 2<html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>{{ .Title }}</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> 8 <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> 9 </head> 10 11 <!-- 导航栏逻辑 --> 12</html>
添加导航栏
框架
-
暗色背景需对应浅色文本
navbar-dark, 浅色背景需要深色文本navbar-light- 浅色文本 navbar-dark 背景色是深色 深色文本 navbar-light 背景色时浅色 没有写错
-
背景颜色
- 文本色 bg-light 浅灰色 navbar-light bg-dark 黑色 navbar-dark bg-primary 蓝色 navbar-dark bg-success 绿色 navbar-dark bg-info 青色 navbar-dark bg-warning 黄色 navbar-dark bg-danger 红色 navbar-dark bg-secondary 深灰色 navbar-dark -
使用
fixed-top将导航栏固定在顶部
1<body> 2 <nav class="navbar navbar-expand-sm bg-info navbar-light fixed-top"> 3 <!-- logo --> 4 <a class="navbar-brand" href="/">六一的部落格</a> 5 <ul class="navbar-nav"> 6 <!-- 遍历菜单 --> 7 </ul> 8 </nav> 9</body>
遍历菜单
支持二级, 显示在下拉框
1{{ range .Site.Menus.main }} 2{{ if .HasChildren }} 3<li class="nav-item dropdown"> 4 <a href="#" class="nav-link dropdown-toggle" id="navbardrop" data-bs-toggle="dropdown"> 5 {{ .Name }} 6 </a> 7 <div class="dropdown-menu"> 8 {{ range .Children }} 9 <a class="dropdown-item" href="{{ .URL }}">{{ .Name }}</a> 10 {{ end }} 11 </div> 12</li> 13{{ else }} 14<li class="nav-item"><a class="nav-link" href="{{ .URL }}">{{ .Name }}</a></li> 15{{ end }} 16{{ end }}
