Bootstrap 4

有些 typecho 没有菜单栏，这是一个简易的菜单栏目教程：以下 html 代码，找个位置插入，然后写个 CSS 就完事了。 <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="//cansnow.cn">首页</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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"> <li class="nav-item active"> <a class="nav-link" href="/ai.html">AI画廊</a> </li> <li class="nav-item"> <a class="nav-link" href="/category/natural-scenery/">风光相册</a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于我</a> </li> </ul> </div> </nav> CSS： /* 在这里编写您自己的 CSS 样式 */ .navbar-brand { font-size: 1.5rem; font-weight: bold; margin: 0 2rem; } .navbar-nav .nav-link { font-size: 1.2rem; margin-right: 1rem; } .navbar-nav .nav-item.active .nav-link { color: #fff; /* 高亮显示导航栏项 */ } .navbar-toggler { border: none; } .navbar-toggler-icon { background-color: #fff; /* 菜单 */ } CSS2： /* 在这里编写您自己的 CSS 样式 */ .navbar-nav .nav-item .nav-link.active { color: #fff; background-color: #d89910; /* 设置活动菜单项的背景色和文本颜色 */ justify-content: center; margin: 0; padding: 0; list-style: none; text-align: center; /* 文字居中 */ } 我们将代码分为两部分：导航栏 HTML 代码和单独的 CSS 文件。导航栏 HTML 代码是与之前相同的。在单独的 CSS 文件中，可编写您自己的样式。请注意，如果您使用一个单独的 CSS 文件而没有使用样式库，需要确保将 Bootstrap 的 CSS 和 JS 文件正确引用到您的 HTML 页面中。在 HTML 页面 head 标签中加入以下代码即可引用 Bootstrap 文件和独立的 CSS 文件： 在这个例子中，我们引用了 Bootstrap 的 CSS 和 JS 文件，还引用了名为 mystyle.css 的自定义样式文件。请注意，Bootstrap 的 JS 文件需要在页面底部加载，以确保所有的 DOM 元素加载完毕时才会启动。这样，在单独的 CSS 文件中，就可以编写更具体化的样式，以实现您的自定义效果。网址自己修改一下吧。 2023 年 6 月份更新 页面滚动后，导航栏无法固定，这样滚动了 N 久再切换分类的时候很麻烦。使导航条固定在页面的顶部，并随着浏览器滚动而变动，在导航条的外层包裹一个固定位置的容器。以下是修改后的代码： <div class="fixed-top"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="//www.cansnow.cn">首页</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"…