Bootstrap5에서 슬라이딩 탐색 구성 요소를 사용하는 방법에 대한 간략한 설명-부트스트랩 튜토리얼-php.cn

Bootstrap5滑动导航组件用法

个人中心

Colored with scrolling

Offcanvas with backdrop

Backdroped with scrolling

집

웹 프론트엔드

부트스트랩 튜토리얼

Bootstrap5에서 슬라이딩 탐색 구성 요소를 사용하는 방법에 대한 간략한 설명

青灯夜游

Oct 27, 2021 pm 07:12 PM

本篇文章给大家介绍一下Bootstrap5中滑动导航组件的用法，希望对大家有所帮助！

Bootstrap5에서 슬라이딩 탐색 구성 요소를 사용하는 방법에 대한 간략한 설명

Bootstrap5滑动导航组件用法

1 滑动导航特点

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

它具有如下几个特点

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

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

2 滑动导航示例演示

<!doctype html>
<html>
  <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>
      <h5 id="个人中心">个人中心</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div>
      <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 aria-labelledby="dropdownMenuButton">
        <li><a href="#">牛头</a></li>
        <li><a href="#">马面</a></li>
        <li><a href="#">孙大圣</a></li>
      </ul>
      </div>
      </div>
      </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

로그인 후 복사

Bootstrap5에서 슬라이딩 탐색 구성 요소를 사용하는 방법에 대한 간략한 설명

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

Bootstrap5에서 슬라이딩 탐색 구성 요소를 사용하는 방법에 대한 간략한 설명

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

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

3.1 容器

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

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

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

下面是不同参数时候的图片

offcanvas-end

Bootstrap5에서 슬라이딩 탐색 구성 요소를 사용하는 방법에 대한 간략한 설명

offcanvas-bottom

Bootstrap5에서 슬라이딩 탐색 구성 요소를 사용하는 방법에 대한 간략한 설명

无位置参数

Bootstrap5에서 슬라이딩 탐색 구성 요소를 사용하는 방법에 대한 간략한 설명

3.2 导航头

<div class="offcanvas-header">
      <h5 id="个人中心">个人中心</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>

로그인 후 복사

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

3.3 导航体

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

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"是设置键盘焦点的，可以不写。

3.5 默认显示与关闭

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

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

로그인 후 복사

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

3.6 页面蒙板与禁止滚动

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

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

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

<!doctype html>
<html>

<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>
            <h5 id="Colored-nbsp-with-nbsp-scrolling">Colored with scrolling</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div>
            <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>
            <h5 id="Offcanvas-nbsp-with-nbsp-backdrop">Offcanvas with backdrop</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div>
            <p>.....</p>
        </div>
    </div>

    <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions"
        aria-labelledby="offcanvasWithBothOptionsLabel">
        <div>
            <h5 id="Backdroped-nbsp-with-nbsp-scrolling">Backdroped with scrolling</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div>
            <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>

로그인 후 복사

4 通过JavaScript控制

4.1 通过数据属性使用

前面的例子，我们都是通过数据属性使用的，通过向元素添加data-bs-toggle="offcanvas"和data-bs-target 或者链接 href，以自动分配对一个offcanvas元素的控制。如果希望它默认打开，可以添加额外的show类。

4.2 通过JavaScript设置属性

var offcanvasElementList = [].slice.call(document.querySelectorAll(&#39;.offcanvas&#39;))
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

4.3 显示关闭滑动导航

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

var myOffcanvas = document.getElementById(&#39;myOffcanvas&#39;)
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实例

4.4 事件

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

show.bs.offcanvas 이 이벤트는 show 인스턴스 메소드가 호출되는 즉시 시작됩니다.
shown.bs.offcanvas 이 이벤트는 offcanvas 요소가 사용자에게 표시될 때 트리거됩니다(CSS 변환이 완료될 때까지 기다립니다).
hide.bs.offcanvas hide 메소드를 호출한 후 해당 이벤트가 즉시 시작됩니다.
hidden.bs.offcanvas 이 이벤트는 offcanvas 요소가 사용자에게 숨겨지면 시작됩니다(CSS 변환이 완료될 때까지 기다립니다).

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 Bootstrap5에서 슬라이딩 탐색 구성 요소를 사용하는 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7695

자바 튜토리얼

1640

Cakephp 튜토리얼

1393

라라벨 튜토리얼

1287

PHP 튜토리얼

1229

Related knowledge

부트 스트랩 사진 중앙에 Flexbox를 사용해야합니까? Apr 07, 2025 am 09:06 AM

부트 스트랩 사진을 중심으로하는 방법에는 여러 가지가 있으며 Flexbox를 사용할 필요가 없습니다. 수평으로 만 중심으로 만 있으면 텍스트 중심 클래스가 충분합니다. 수직 또는 여러 요소를 중심으로 해야하는 경우 Flexbox 또는 그리드가 더 적합합니다. Flexbox는 호환성이 떨어지고 복잡성을 증가시킬 수 있지만 그리드는 더 강력하고 학습 비용이 더 높습니다. 방법을 선택할 때는 장단점을 평가하고 필요와 선호도에 따라 가장 적합한 방법을 선택해야합니다.

부트 스트랩 검색 창을 얻는 방법 Apr 07, 2025 pm 03:33 PM

부트 스트랩을 사용하여 검색 표시 줄의 값을 얻는 방법 : 검색 표시 줄의 ID 또는 이름을 결정하십시오. JavaScript를 사용하여 DOM 요소를 얻으십시오. 요소의 값을 가져옵니다. 필요한 작업을 수행하십시오.

부트 스트랩의 수직 중심을 수행하는 방법 Apr 07, 2025 pm 03:21 PM

부트 스트랩을 사용하여 수직 센터링을 구현하여 : Flexbox Method : D-Flex, 정당화 컨텐츠 중심 및 정렬 중심 센터 클래스를 사용하여 Flexbox 컨테이너에 요소를 배치하십시오. Align-Items-Center 클래스 방법 : Flexbox를 지원하지 않는 브라우저의 경우 상위 요소의 높이가 정의 된 경우 Align-Items 중심 클래스를 사용하십시오.

부트 스트랩에 분할 라인을 작성하는 방법 Apr 07, 2025 pm 03:12 PM

부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.

부트 스트랩 접근성 : 포용적이고 사용자 친화적 인 웹 사이트 구축 Apr 07, 2025 am 12:04 AM

다음 단계를 통해 부트 스트랩을 사용하여 포용적이고 사용자 친화적 인 웹 사이트를 구축 할 수 있습니다. 1. ARIA 태그를 사용한 스크린 리더 지원 향상; 2. WCAG 표준을 준수하도록 색상 대비 조정; 3. 키보드 내비게이션이 친숙한 지 확인하십시오. 이러한 조치는 웹 사이트가 장벽이있는 사용자를 포함하여 모든 사용자가 친숙하고 액세스 할 수 있도록합니다.

부트 스트랩에 사진을 삽입하는 방법 Apr 07, 2025 pm 03:30 PM

Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.

부트 스트랩 버튼을 사용하는 방법 Apr 07, 2025 pm 03:09 PM

부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.

부트 스트랩을위한 프레임 워크를 설정하는 방법 Apr 07, 2025 pm 03:27 PM

부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.

See all articles

Bootstrap5에서 슬라이딩 탐색 구성 요소를 사용하는 방법에 대한 간략한 설명

Bootstrap5滑动导航组件用法

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제