这是我参与更文挑战的第12天，活动详情查看：更文挑战css

《Bootstrap5零基础到精通》俺老刘原创，争取天天更新一节。html

14.1 滑动导航特色

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

它具备以下几个特色canvas

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

听起来彷佛不是很明白，不过不要紧，这并不影响你继续往下学习，下面咱们来经过例子学会使用它。安全

14.2 滑动导航示例演示

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>表格演示</title>
  </head>
  <body>
       
    <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
      经过连接显示
      </a>
      <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
      经过按钮显示
      </button>
      
      <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
      <div class="offcanvas-header">
      <h5 class="offcanvas-title">我的中心</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
      <div>
      这里能够放文字、列表、表单等一切元素，点右上角X能够关闭
      <ul>
        <li>个人帖子</li>
        <li>个人收藏</li>
        <li>我赞过的</li>
      </ul>
      </div>
      <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        个人好友
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">牛头</a></li>
        <li><a class="dropdown-item" href="#">马面</a></li>
        <li><a class="dropdown-item" href="#">孙大圣</a></li>
      </ul>
      </div>
      </div>
      </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
复制代码

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

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

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

14.3.1 容器

全部的滑动导航内容都在div class="offcanvas offcanvas-start"> </div>直接，容器就是滑动导航最外层的壳。post

容器中位置参数，有三个值学习

offcanvas-start，如上面例子中所示，弹出的导航在屏幕左上角
offcanvas-end，弹出的导航在屏幕的右侧
offcanvas-bottom，弹出的导航在屏幕的底部
若是无该参数，则位置不肯定，个人演示是在左下角

下面是不一样参数时候的图片动画

offcanvas-end

offcanvas-bottom

无位置参数

14.3.2 导航头

<div class="offcanvas-header">
      <h5 class="offcanvas-title">我的中心</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
复制代码

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

14.3.3 导航体

全部包含在<div class="offcanvas-body"> <div>之间的内容都是导航条，里面能够放置任意元素。

14.3.4 导航激活按钮

这个理论上来讲不是导航的一部分，可是通常来讲都要在页面设置某个按钮或者图标，当导航隐藏的时候，经过点击或者滑动到某个区域来激活滑动导航。固然，你也能够开始就让导航显示，关闭以后再也不显示了。

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
      经过连接显示
      </a>
      <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"> 经过按钮显示 </button>
复制代码

上面导航按钮中

data-bs-toggle="offcanvas"代表对滑动导航起做用
href="#offcanvasExample" 或data-bs-target="#offcanvasExample"是关键起做用的代码，其中#offcanvasExample中的offcanvasExample就是容器的id。
aria-controls="offcanvasExample"是设置键盘焦点的，能够不写。

14.3.5 默认显示与关闭

这个很简单，直接在容器上添加一个参数show便可。这样打开页面不用点击按钮导航就出现了。

<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
复制代码

在容器添加 data-bs-keyboard="true"能够实现按escape键时关闭offcanvas。

14.3.6 页面蒙板与禁止滚动

默认状况下，当滑动导航出现的时候，本来的网页会出现，并将禁用页面的上下滚动效果，也就常说的锁定。可使用data-bs-scroll属性切换body滚动，使用data-bs-backdrop切换背景，直接加在容器上便可。

data-bs-scroll="true"，默认false
data-bs-backdrop="false"，默认true

这是一个综合实例，显示滑动导航后试着滚动鼠标中间滚轮看页面可否滑动，显示效果我就不演示了。

<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>滑动窗口</title>
</head>

<body>
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling"
        aria-controls="offcanvasScrolling">容许页面滚动</button>
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop"
        aria-controls="offcanvasWithBackdrop">默认</button>
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions"
        aria-controls="offcanvasWithBothOptions">容许蒙板和页面滚动</button>

    <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
        id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <p>Try scrolling the rest of the page to see this option in action.</p>
        </div>
    </div>

    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop"
        aria-labelledby="offcanvasWithBackdropLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <p>.....</p>
        </div>
    </div>

    <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions"
        aria-labelledby="offcanvasWithBothOptionsLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <p>Try scrolling the rest of the page to see this option in action.</p>
        </div>
    </div>

<p>    核心提示：鸿蒙系统可用于手机、汽车、家电、智能家居、智能穿戴设备等产品，为不一样设备的智能化、互联与协同提供统一的语言。</p>
<p>    参考消息网6月15日报道</p>
<p>    新加坡《联合早报》网站近日报道称，中国科技巨头华为公司近期力推其研发的鸿蒙系统。分析人士认为，鸿蒙操做系统在国际上将受到谷歌、苹果、三星等厂商打压，与华为有竞争关系的中国其余手机厂商也未必会立刻使用该系统。所以，鸿蒙操做系统将面临许多挑战。</p>
<p>    报道称，鸿蒙系统可用于手机、汽车、家电、智能家居、智能穿戴设备等产品，为不一样设备的智能化、互联与协同提供统一的语言。华为公司预计，今年年末搭载鸿蒙操做系统的设备数量将达3亿台，其中华为设备超过2亿台，面向第三方合做伙伴的各种终端设备数量超过1亿台。</p>
<p>    华为使用本身开发的鸿蒙系统，意味着它再也不依赖安卓。并且，鸿蒙系统属于一次开发、多端部署的系统，更适合物联网时代的需求，应用前景广阔。华为公司称，它正在与全球排名前200位的应用程序（App）厂商沟通合做，共同开发跨终端设备的应用。</p>
<p>    鸿蒙系统是华为“晋级”入场券？</p>
<p>    鸿蒙操做系统可做为华为汽车的战略支点，帮助智能汽车领域与生活串联。（路透社）</p>
<p>    华为创始人任正非此前在公司内部会议上表示，华为在纯软件领域，要勇于领先世界；软件领域将来的发展基本不受美国控制，有较大的独立自主权，能够“扎到根，捅破天”。</p>
<p>    小米等中国著名手机厂商对鸿蒙系统持观望态度</p>
<p>    不过，尽管华为已宣布鸿蒙系统采起开源策略，小米、OPPO、vivo等中国著名手机厂商仍对鸿蒙系统持观望态度。</p>
<p>    业内人士指出，小米等中国手机大厂商与华为都有竞争关系，华为遭美国制裁后手机销量大跌，这些厂商都是直接或间接的获益者，天然不肯意为华为的鸿蒙操做系统站台。</p>
<p>    并且，这些依赖安卓系统的厂商也担忧，若是采用鸿蒙系统，可能受到谷歌的压制，甚至致使它们的出口产品不能使用安卓系统，影响海外出货量。</p>
<p>    同时，鸿蒙系统的安全性和稳定性有待观察。华为强调鸿蒙将实现万物互联，但其技术优点目前并无体现出来。华为高管余承东也曾表示，目前鸿蒙的成熟度只达到了安卓的70%。</p>
<p>    但鸿蒙系统的推出，将展现华为雄厚的技术实力和发展前景，使其具有更强的抗压能力。万一小米等中国科技企业也像华为同样被外部势力“卡脖子”，鸿蒙系统将是一个很好的备选。</p>
<p>    专业机构：鸿蒙系统对华为意义重大</p>
<p>    方正证券分析，鸿蒙系统对华为的意义有3点：一是做为华为跻身生态巨头的入场券。数字商业的终极竞争，归根到底就是操做系统的竞争，全球市值前3名苹果、谷歌、微软的共同特色，都是具有本身的操做系统。</p>
<p>    二是倒逼华为改变直接售卖硬件的商业模式，摆脱芯片封锁带来的业务风险，经过鸿蒙来实现业务的延续。</p>
<p>    三是充当华为汽车的战略支点。鸿蒙将帮助智能汽车领域与生活串联，也将在将来的自动驾驶及车联网领域中给用户带来更多的智能生活的体验。</p>

    <script src="bootstrap5/bootstrap.bundle.min.js"></script>
</body>

</html>
复制代码

14.4 经过JavaScript控制

14.4.1 经过数据属性使用

前面的例子，咱们都是经过数据属性使用的，经过向元素添加data-bs-toggle="offcanvas"和data-bs-target 或者连接 href，以自动分配对一个offcanvas元素的控制。若是但愿它默认打开，能够添加额外的show类。

14.4.2 经过JavaScript设置属性

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

能够经过JavaScript传递数据属性。对于数据属性，将下面选项名称附加到data- bs-，如

data-bs-backdrop="true"，当offcanvas打开时在主体上应用背景
data-bs-scroll="false"，容许在offcanvas打开时滚动正文
data-bs-keyboard="true"，按escape键时关闭offcanvas

14.4.3 显示关闭滑动导航

用js控制能够简单实现鼠标滑过某块区域显示导航、鼠标滑走关闭导航效果

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

复制代码

toggle 将offcanvas元素切换为“显示”或“隐藏”。在实际显示或隐藏offcanvas元素以前（即在发生show.bs.offcanvas或hidden.bs.offcanvas事件以前）返回调用方。
show 显示offcanvas元素。在实际显示offcanvas元素以前（即，在show.bs.offcanvas事件发生以前）返回调用方。
hide 隐藏offcanvas元素。在offcanvas元素实际隐藏以前（即在hidden.bs.offcanvas事件发生以前）返回给调用方。
_getInstance 静态方法，它容许您获取与DOM元素关联的offcanvas实例

14.4.4 事件

Bootstrap的offcanvas类公开了一些事件，用于链接到offcanvas功能。

show.bs.offcanvas 调用show instance方法时，此事件当即激发。
shown.bs.offcanvas 当offcanvas元素对用户可见时（将等待CSS转换完成），将触发此事件。
hide.bs.offcanvas 调用hide方法后，会当即激发他的事件。
hidden.bs.offcanvas 当对用户隐藏offcanvas元素时（将等待CSS转换完成），将触发此事件。

今天的课程就到这里，到此，关于网格终于也要告一个段落了。请关注我，及时学习俺老刘原创的《Bootstrap5零基础到精通》第15节 Bootstrap5面包屑导航组件用法。若是这篇文章对你有帮助，记得随手点赞哦！

《Bootstrap5零基础到精通》第14节 Bootstrap5滑动导航组件用法