Bootstrap 5

[basic] BS5 - Nav (네브) - 간단메뉴 + 일반탭 + 알약탭

홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2,048
목차
  1. Nav 기본(수평형태)
  2. Nav Align (정렬・배치)
  3. Nav Vertical (수직 형태)
  4. Nav Tab (탭)
  5. Nav Pill (알약)
  6. Nav Justify Tab/Pill (균등배분정렬)
  7. Nav Pill + Dropdown (알약 + 드롭다운)
  8. Nav Tab + Dropdown (탭 + 드롭다운)
  9. Nav Toggle Tab (토글탭)
  10. Nav Toggle Pill (토글알약)

 

Nav 기본(수평형태) 

 

<ul class="nav">

    <li class="nav-item"><a class="nav-link" href="#">링크1</a></li>

    <li class="nav-item"><a class="nav-link" href="#">링크2</a></li>

    <li class="nav-item"><a class="nav-link" href="#">링크3</a></li>

    <li class="nav-item"><a class="nav-link disabled" href="#">링크 비활성화</a></li>

</ul> 

 

※ BS4와 동일

 

Nav Align (정렬・배치)

 

<p class="text-start">왼쪽 배치 (기본값)</p>

<ul class="nav justify-content-start">...

 

<p class="text-center">가운데배치</p>

<ul class="nav justify-content-center">...

 

<p class="text-end">오른쪽배치</p>

<ul class="nav justify-content-end">...

 

PS. 왼쪽 배치 경우 기본값이라 .justify-content-start 클래스 없어도 됨.

※ BS4와 동일

 

Nav Vertical (수직 형태)

 

<ul class="nav flex-column"> 

 

예제보기

※ BS4와 동일

 

Nav Tab (탭)


<ul class="nav nav-tabs">

    <li class="nav-item"><a class="nav-link active" href="#">링크 활성화</a></li>

    <li class="nav-item"><a class="nav-link" href="#">링크</a></li>

    <li class="nav-item"><a class="nav-link" href="#">링크</a></li>

    <li class="nav-item"><a class="nav-link disabled" href="#">링크 비활성화</a></li>

</ul> 

 

※ BS4와 동일

 

Nav Pill (알약)

 

<ul class="nav nav-pills">

    <li class="nav-item"><a class="nav-link active" href="#">링크 활성화</a></li>

    <li class="nav-item"><a class="nav-link" href="#">링크</a></li>

    <li class="nav-item"><a class="nav-link" href="#">링크</a></li>

    <li class="nav-item"><a class="nav-link disabled" href="#">링크 비활성화</a></li>

</ul>  

 

※ BS4와 동일

 

Nav Justify Tab/Pill (균등배분정렬)

 

<ul class="nav nav-pills nav-justified">..</ul>

<ul class="nav nav-tabs nav-justified">..</ul> 

 

※ BS4와 동일

 

Nav Pill + Dropdown (알약 + 드롭다운)

 

<ul class="nav nav-pills">

    <li class="nav-item"><a class="nav-link active" href="#">링크 활성화</a></li>

    <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">드롭다운</a>

        <div class="dropdown-menu">

            <a class="dropdown-item" href="#">링크1</a>

            <a class="dropdown-item" href="#">링크2</a>

            <a class="dropdown-item" href="#">링크3</a>

        </div>

    </li>

    <li class="nav-item"><a class="nav-link" href="#">링크</a></li>

    <li class="nav-item"><a class="nav-link disabled" href="#">링크 비활성화</a></li>

</ul> 

 

예제보기 

cf. BS4 경우, data-toggle="dropdown" 속성 사용.

 

Nav Tab + Dropdown (탭 + 드롭다운)

 

<ul class="nav nav-tabs">

    <li class="nav-item"><a class="nav-link active" href="#">링크 활성화</a></li>

    <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">드롭다운</a>

        <div class="dropdown-menu">

            <a class="dropdown-item" href="#">링크1</a>

            <a class="dropdown-item" href="#">링크2</a>

            <a class="dropdown-item" href="#">링크3</a>

        </div>

    </li>

    <li class="nav-item"><a class="nav-link" href="#">링크</a></li>

    <li class="nav-item"><a class="nav-link disabled" href="#">링크 비활성화</a></li>

</ul> 


cf. BS4 경우, data-toggle="dropdown" 속성 사용.

 

Nav Toggle Tab (토글탭)

 

<!-- pill 메뉴 -->

<ul class="nav nav-tabs">

    <li class="nav-item">

        <a class="nav-link active" data-bs-toggle="tab" href="#HTML">HTML</a>

    </li>

    <li class="nav-item">

        <a class="nav-link" data-bs-toggle="tab" href="#CSS">CSS</a>

    </li>

    <li class="nav-item">

        <a class="nav-link" data-bs-toggle="tab" href="#JS">JS</a>

    </li>

</ul>


<!-- Tab 영역-->

<div class="tab-content">

    <div class="tab-pane container active" id="HTML">...</div>

    <div class="tab-pane container fade" id="CSS">...</div>

    <div class="tab-pane container fade" id="JS">...</div>

</div>

 

예제보기

cf. BS4 경우, data-toggle="tab" 속성 사용.

 

Nav Toggle Pill (토글알약)

 

<!-- tab 메뉴 -->

<ul class="nav nav-pills">

    <li class="nav-item">

        <a class="nav-link active" data-bs-toggle="pill" href="#HTML">HTML</a>

    </li>

    <li class="nav-item">

        <a class="nav-link" data-bs-toggle="pill" href="#CSS">CSS</a>

    </li>

    <li class="nav-item">

        <a class="nav-link" data-bs-toggle="pill" href="#JS">JS</a>

    </li>

</ul>


<!-- Tab 영역-->

<div class="tab-content">

    <div class="tab-pane container active" id="HTML">...</div>

    <div class="tab-pane container fade" id="CSS">...</div>

    <div class="tab-pane container fade" id="JS">...</div>

</div> 

 

cf. BS4 경우, data-toggle="pill" 속성 사용.

※ Tab 영역은 (tab메뉴・pill 메뉴) 소스 동일.


Bootstrap 5 관련글

Bootstrap 3 관련글

Bootstrap 4 관련글

코딩동강 관련글

HTML 관련글

CSS 관련글

JavaScript 관련글

jQuery 관련글

PHP 관련글

SQL 관련글
분류 제목
basic BS5 - HOME (BS소개)
basic BS5 - Start (BS시작) - BS5다운로드 / BS5CDN / BS5구문
basic BS5 - Container (BS컨테이너) - 박스형 vs 와이드형 (= .container vs. .co…
basic BS5 - Grid (BS그리드)
basic BS5 - Text/Typography (BS글자/BS텍스트)
basic BS5 - Color (BS색깔/BS색상) - 글자색 / 배경색
basic BS5 - Table (BS테이블) - 테이블테두리 / 테이블배경색 / 반응형테이블
basic BS5 - Image (BS이미지) - 이미지모양 / 이미지정렬 / 반응형이미지
basic BS5 - Jumbotron (BS점보트론) - 지원 X
basic BS5 - Alert (BS경고 = BS얼럿 = BS경보)
basic BS5 - Button (BS버튼) - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS5 - Button Group (BS버튼그룹)
basic BS5 - Badge (BS배지)
basic BS5 - Progress Bar (BS진행바 = BS진도바 = BS프로그레스바)
basic BS5 - Spinner (BS스피너 = BS회전 = BS로더)
basic BS5 - Pagination (BS페이지매기기 = BS페이지번호 = BS페이징 = BS패지네이션) + BS…
basic BS5 - List Group (BS리스트그룹)
basic BS5 - Card (BS카드)
basic BS5 - Dropdown (BS드롭다운/BS드롭업 = BS드랍다운/BS드랍업)
basic BS5 - Collapse (BS접기 = BS컬랩스 = BS토글)
1/4
목록
　홈　 PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱닷컴 PC버전 로그인