집 > 기사 > 웹 프론트엔드 > Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석

Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석

青灯夜游앞으로: 2021-11-23 18:48:441961검색

이 기사에서는 bootstrap의 탐색 및 탭 구성 요소에 대해 알아보고 탐색 구성 요소 및 탭 구성 요소를 사용하는 방법을 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.

1 네비게이션 기본

네비게이션 바는 웹 사이트 시스템의 필수 기능입니다. 과거에는 네비게이션 바를 만드는 데 많은 노력이 필요했습니다. 이제 Bootstrap5 네비게이션을 사용하면 만드는 데 시간이 걸립니다. 아름다운 내비게이션 바를 복사하여 붙여넣기만 하면 끝입니다. [관련 추천: "부트스트랩 튜토리얼"]

<!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>
        <div>
            <ul>
                <li>
                <a class="nav-link href="#">首页</a>
                </li>
                <li>
                <a href="#">文章</a>
                </li>
                <li>
                <a href="#">图片</a>
                </li>
                <li>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
                </li>
                </ul>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석

코드를 더 간결하게 만들 수도 있습니다

<nav class="nav">
  <a class="nav-link" href="#">首页</a>
  <a class="nav-link" href="#">文章</a>
  <a class="nav-link" href="#">图片</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
</nav>

이 코드는 일부 경우를 제외하고는 내부의 사용할 수 없는 버튼에 대해 위와 동일하게 표시됩니다. 특별한 목적(예: 회원은 이용할 수 있지만 일반 사람들은 이용할 수 없는 경우), 그렇지 않으면 메뉴에 넣을 필요가 없습니다.

두 가지 작성 방법 모두 장점이 있습니다.

첫 번째 방법은 탐색에 아이콘 등 다른 장식 요소가 있을 때 더 체계적이고 명확합니다. 또한 스타일을 작성하여 링크를 변경할 수도 있습니다. li 디스플레이 방식의 클래스에서는 일부 회사에서도 직원의 업무 성과를 코드 양으로 평가합니다(많은 회사에서 이렇게 한다고 들었습니다).
두 번째가 더 간결합니다. 두 번째가 달성할 수 있는 것은 첫 번째로 달성할 수 있지만, 결국 라이트 버전은 일부 기능을 거세한 것입니다.
다음 시연에서는 두 번째 유형을 사용하겠습니다. 모든 시연에서는 첫 번째 유형으로 전환해도 문제가 없습니다.

2 공통 스타일

2.1 가로 정렬

Flexbox 일반 클래스를 사용하면 탐색의 가로 정렬을 쉽게 변경할 수 있습니다. 내비게이션은 기본적으로 왼쪽에 정렬되어 있으며 중앙이나 오른쪽으로 쉽게 변경할 수 있습니다.

중앙 정렬을 위해 .justify-content-center 사용:
오른쪽 정렬을 위해 .justify-content-end 사용:

<!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>
        <div>
            <nav class="nav justify-content-center">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>

            <nav class="nav justify-content-end">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석

한 페이지에 여러 탐색 기능을 배치할 수도 있습니다.

2.2 수직 탐색

.flex-column 일반 클래스를 사용하여 탐색을 수직 탐색으로 변경합니다. 특정 뷰포트 아래에만 스택하려면 반응형 버전(예: .flex-sm-column)을 사용하세요.

<!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>
        <div>
            <nav class="nav flex-column">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>

            <nav class="nav flex-sm-column">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석

ps: 세로 탐색은 일반적으로 보조 탐색이나 페이지 내 탐색에 사용되기 때문에 중단점보다 클 때 이 응답은 세로입니다. 화면이 너무 작으면 세로 탐색이 읽기 공간을 차지합니다. 그래서 그것은 필요하지 않습니다. 화면이 작아졌을 때 가로 내비게이션 기능을 숨기고 싶다면 다음 장에서 내비게이션 툴바에 대해 자세히 소개하겠습니다.

2.3 탭 스타일

기본 탐색을 사용하고 .nav-tabs를 추가하여 페이지가 매겨진 탭이 있는 인터페이스를 생성하세요. 아래의 "탭 사용" 섹션에 있는 페이징 JavaScript 플러그인을 통해 전환 가능한 블록을 생성하세요. 탭 스타일은 매우 간단합니다. 특정 기능을 구현하려는 경우 나중에 자세히 소개하고 자세한 코드도 나중에 설명합니다.

Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석

2.4 캡슐

캡슐은 탭과 동일하게 사용되지만 nav-tabs 대신 .nav-pills를 사용합니다.

<ul class="nav nav-pills">

Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석

2.5 채우기 및 정렬

.nav 콘텐츠에는 두 가지 너비가 있습니다. 확장을 위한 클래스 , .nav-fill을 사용하면 .nav-item 콘텐츠에 비례적으로 공간이 할당됩니다. 이는 가로 공간을 모두 차지하지만 모든 탐색 항목의 너비가 동일한 것은 아닙니다.

동일 너비 요소를 생성하려면 .nav-justified를 사용하세요. 모든 수평 공간은 탐색 링크가 차지하지만 위의 .nav-fill과 달리 각 탐색 항목의 너비는 동일합니다.

 <ul class="nav nav-pills nav-fill">
                <li class="nav-item">
                <a class="nav-link href="#">首页</a>
                </li>
                <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">文章</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">图片</a>
                </li>
                <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">只有会员可以观看的视频视频</a>
                </li>
            </ul>

            <br><br>

            <ul class="nav nav-pills nav-justified">
                <li class="nav-item">
                <a class="nav-link href="#">首页</a>
                </li>
                <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">文章</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">图片</a>
                </li>
                <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">只有会员可以观看的视频视频</a>
                </li>
            </ul>

Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석

두 정렬의 차이를 비교할 수 있습니다.

3 탐색 구성 요소의 추가 확장

3.1 유연한 상자 유틸리티 클래스 사용

반응형 탐색 변경이 필요한 경우 일련의 유연한 상자 공통 클래스를 사용하세요. 이러한 일반 클래스는 중단점 간에 더 많은 사용자 정의를 제공합니다. 아래 예에서는 탐색이 작은 중단점 아래에 스택되고 사용 가능한 모든 너비를 채우기 위해 작은 중단점에서 수평으로 레이아웃됩니다.

<!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>
      <br><br>
        <div>
            <nav class="nav nav-pills flex-column flex-sm-row">
                <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
                <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
                <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
                <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

다른 브라우저 너비로 표시됩니다.

Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석

3.2 使用下拉列表

加入额外的HTML和下拉菜单JavaScript插件

带下拉列表的选项卡

<!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>
        <div>
            <br><br><br>
            <ul class="nav nav-tabs">
                <li>
                <a class="nav-link active" aria-current="page" href="#">Active</a>
                </li>
                <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
                <ul>
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><hr></li>
                <li><a href="#">Separated link</a></li>
                </ul>
                </li>
                <li>
                <a href="#">Link</a>
                </li>
                <li>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
                </ul>
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석

带下拉列表的胶囊只需要将nav-tabs换成nav-pills

<ul class="nav nav-pills">

Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석

4 使用选项卡

4.1 普通选项卡

前面的选项卡只有样式，是不起作用的。其实bootstrap已经为我们写好js代码，他们都在bootstrap.bundle.min.js中了。

<!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>
      <br><br>
        <div>
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首页</button>
                </li>
                <li role="presentation">
                <button id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">资料</button>
                </li>
                <li role="presentation">
                <button id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">联系方式</button>
                </li>
                </ul>

                <div id="myTabContent">

                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <h1>首页内容</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <h1>个人资料</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        <h1>联系方式</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                </div>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

1Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석

4.2 胶囊选项卡

跟前面胶囊一样，只是换一个标签这么简单。

<ul class="nav nav-pills" id="myTab" role="tablist">

1Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석

4.3 垂直胶囊选项卡

这个段代码把普通链接改成了按钮，其实也是一样的，看着貌似很复杂，其实只需要复制进去，修改一下你要的地方就好了。

需要注意的是，垂直标签的内容显示在右侧（当然也可以菜单在右边，内容在左边），所以在布局的时候跟前面不太一样。

<!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>
      <br><br>
        <div>
            <div class="d-flex align-items-start">
                <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">首页</button>
                <button id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">资料</button>
                <button id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">信息</button>
                </div>

                <div id="v-pills-tabContent">

                    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                        <h1>首页内容</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                        <h1>个人资料</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                        <h1>联系方式</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
               
            </div>
            </div>

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

1Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석

4.4 淡入淡出效果

要使选项卡或菜单淡入淡出，请将.fade加到每个.tab-pane分页中。第一个分页内容还必须具有.show以使初始内容可见。事实上上面已经用了淡入淡出效果，试着去掉tab-pane中的fade，看一下效果。

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

위 내용은 Bootstrap에 탐색 구성 요소와 탭 구성 요소를 추가하는 방법은 무엇입니까? 사용법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript bootstrap html 堆 class JS column flex li

성명：

이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Bootstrap에서 테이블을 사용하는 방법은 무엇입니까? 강력한 테이블의 사용법에 대한 간략한 분석다음 기사：Bootstrap에서 테이블을 사용하는 방법은 무엇입니까? 강력한 테이블의 사용법에 대한 간략한 분석