响应式布局2:手写响应式导航栏(BootStrap实现以及原生实现)

1.响应式导航栏介绍

响应式导航栏是一种在不同设备和屏幕尺寸下自适应布局和显示的导航栏。它可以根据用户所使用的设备(如桌面电脑、平板电脑或手机)自动调整其外观和交互方式,以提供更好的用户体验。

pc端:

响应式布局2:手写响应式导航栏(BootStrap实现以及原生实现)_第1张图片

手机端: 

响应式布局2:手写响应式导航栏(BootStrap实现以及原生实现)_第2张图片

2.BootStrap实现

最简单的方式是使用Bootstrap 框架,它提供了响应式的导航栏组件(Navbar),在电脑端显示为完整的导航栏,而在移动端则会以可展开的按钮形式呈现。

在 Bootstrap 中创建一个响应式导航栏,需要使用以下组件和类:

  1. .navbar 类:应用于 
  2. .navbar-expand-* 类:用于控制导航栏在不同屏幕大小下的展开方式。* 可以是 sm(小屏幕)、md(中屏幕)、lg(大屏幕)或 xl(超大屏幕)。
  3. .navbar-toggler 类:用于创建导航栏的可展开按钮。
  4. .collapse 类:用于定义可折叠的导航栏内容。
  5. .navbar-collapse 类:应用于包含导航栏内容的容器,与 .collapse 类一起使用。

以下是一个示例代码,展示了如何使用 Bootstrap 创建一个响应式导航




  
  
  
  Responsive Navbar








效果:

响应式布局2:手写响应式导航栏(BootStrap实现以及原生实现)_第3张图片

响应式布局2:手写响应式导航栏(BootStrap实现以及原生实现)_第4张图片

3. 原生基于Flex布局实现

这里使用了@media来查询媒体的最大宽度,并以此改变样式,再使用flex弹性布局实现响应式导航栏:




    
    
    
    Responsive Navbar





效果和bootstrap效果一样,就是按钮我只用了文字,没有加上icon

你可能感兴趣的:(前端开发,bootstrap,前端,html)