《bootstrap底部导航栏(bootstrap4 导航栏)》

解决方案简述

Bootstrap4为我们创建底部导航栏提供了便捷的方式。借助其预定义的类和强大的栅格系统，可以快速构建出响应式的、美观的底部导航栏，以满足不同设备上的显示需求，为用户提供良好的导航体验。

使用navbar组件实现底部导航栏

这是最直接的一种思路。在页面中引入Bootstrap4的css和js文件。

html  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="external nofollow" >

然后编写底部导航栏代码：

html</p>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">首页</a>
  <a class="navbar-brand" href="#">关于我们</a>
  <a class="navbar-brand" href="#">联系我们</a>
</nav>

<p>``<code>
fixed - bottom类使得导航栏固定在页面底部。navbar - light和bg - light设置导航栏的颜色风格，可以根据需要更改为其他颜色样式，如navbar - dark bg - dark等。navbar - brand用于定义导航项，这里简单地用a`标签表示链接形式的导航项。

使用footer结合flex布局实现

这种方式更加灵活。先引入Bootstrap4文件后：

```html


    
        首页
        产品
        服务

这里利用了Bootstrap4中的flex布局相关类。d - flex将footer元素变为弹性容器，flex - column使子元素按列排列（如果需要横向排列可改为flex - row），justify - content - between和align - items - center分别设置主轴和交叉轴的对齐方式。通过设置height属性来控制footer的高度，并且可以通过调整p - 2类等来改变导航项之间的间距等样式。

无论是使用navbar组件还是footer结合flex布局的方式，都可以根据实际项目的需求添加更多的样式定制，如增加图标、更改字体大小和颜色等，以打造独特的底部导航栏。