响应式网页设计代码_用 Bootstrap4 制作响应式网页二(导航菜单)

上文已经介绍安装框架的过程，本文接下来制作一个导航菜单。

导航菜单设计左右结构，左边放logo,右边放菜单链接。

pc上面菜单显示效果

切换到手机模式的显示效果

下面是 html部分的整体代码：

用Bootstrap4制作电脑手机响应式网页

Logo

首页 菜单一 菜单二 菜单三 菜单四 菜单五

style.css部分：

header{background-color: #7952b3;}header .navbar-brand img{height: 30px;border-radius: 50%;}header .navbar-dark .navbar-toggler,header .navbar-dark .navbar-toggler:focus,header .navbar-dark .navbar-toggler:hover{border: none;padding: 0;outline: none;}header .navbar-dark .navbar-toggler div{width:25px;height: 4px;background-color: #fff;}

给 header 添加一个背景色 #7952b3

以上是完整代码，初学者可复制代码尝试一下。