怎么使用Bootstrap5中滑动导航组件

本篇内容主要讲解“怎么使用Bootstrap5中滑动导航组件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用Bootstrap5中滑动导航组件”吧!

我们提供的服务有：成都网站建设、成都网站设计、微信公众号开发、网站优化、网站认证、西市ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的西市网站制作公司

Bootstrap5滑动导航组件用法

1 滑动导航特点

滑动导航（Offcanvas）是一个侧边栏组件，可以通过JavaScript进行切换，从窗口的左、右或下边缘显示和隐藏，在项目中常用来构建可隐藏的侧边栏，用于导航、购物车等。

它具有如下几个特点

滑动导航Offcanvas与模态框modals共享一些相同的JavaScript代码。从概念上讲，它们非常相似，但它们是独立的插件。
当显示时，Offcanvas包括一个默认的背景，可以点击隐藏隐藏的画布。
与modals类似，一次只能显示一个offcanvas。
注意！考虑到CSS处理动画的方式，您不能在.offcanvas元素上使用margin或translate。相反，应该将类用作独立的包装元素。

听起来似乎不是很明白，不过没关系，这并不影响你继续往下学习，下面我们来通过例子学会使用它。

2 滑动导航示例演示



  
    
    
    
    
    
    表格演示
  
  
       
    
      通过链接显示
      
      
      通过按钮显示
      
      
      
      
      个人中心
      
      
      
      
      这里可以放文字、列表、表单等一切元素，点右上角X可以关闭
      
        我的帖子
        我的收藏
        我赞过的
      
      
      
      
        我的好友
      
      
        牛头
        马面
        孙大圣

怎么使用Bootstrap5中滑动导航组件

点击上面的任一个按钮，则在窗口弹出如下界面

怎么使用Bootstrap5中滑动导航组件

是不是很熟悉，你也可以把上面的文字改变表单，做成购物车。从上面的例子可以看出滑动导航组件包括容器、导航头、导航主体，下面我会做详细介绍。

3 滑动导航组件及参数含义

3.1 容器

所有的滑动导航内容都在div class="offcanvas offcanvas-start">

如上面的代码，到航头包含一个导航标题和按钮，按钮就是导航右上角的那个X 导航头一般只需要改标题内容就好了，其他保持原样就好。

滑动窗口

允许页面滚动默认允许蒙板和页面滚动

Colored with scrolling

Try scrolling the rest of the page to see this option in action.

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas')) var offcanvasList = offcanvasElementList.map(function (offcanvasEl) { return new bootstrap.Offcanvas(offcanvasEl) })

重庆分公司，新征程启航

怎么使用Bootstrap5中滑动导航组件

Bootstrap5滑动导航组件用法

个人中心

其他资讯