這是我參與更文挑戰的第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滑動導航組件用法