• 회원가입
  • 로그인
  • 구글아이디로 로그인
웹디자인언어 Bootstrap 5Lv 1 : 손님

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

홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1,648  
목차
  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 메뉴) 소스 동일.
방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

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토글)
basic BS5 - Nav (네브) - 간단메뉴 + 일반탭 + 알약탭
basic BS5 - Navbar (메뉴바) - 네비게이션 메뉴바 (= 네브바 = 네비바) ※ BS5분기점
basic BS5 - Carousel (BS캐러셀) ※ Slideshow (슬라이드쇼)
basic BS5 - Modal (BS모달)
basic BS5 - Tooltip (BS툴팁 = BS말풍선 허버형)
basic BS5 - Popover (BS팝오버) ★ - 클릭형말풍선
basic BS5 - Toast (BS토스트) - 순간말풍선 (= 팝업상자 = 짧은경고창 = 스낵바)
basic BS5 - Scrollspy (BS스크롤스파이) - 원페이지메뉴링크 (= 내부링크)
basic BS5 - Offcanvas (오프캔버스) - 숨겨진 사이드바 메뉴
basic BS5 - Utilities (BS유틸클래스) ★★★★★
basic BS5 - Flex (BS플렉스박스) ★★★★★
목록
오늘: 8,958 | 어제: 25,139 | 최대: 31,885 | 전체: 8,429,877
  • 채팅방
  • 필독
1. 채팅창 헤드에서 접속자 확인 2. 닉네임 클릭해 1:1 채팅 가능 3. 닉네임 클릭해 귓속말 가능 4. 닉네임 클릭해 호출하기 가능 5. 우하단 클릭해 환경 설정 가능 6. 의뢰글 작성 후 의뢰 상담 가능 7. 질문글 작성 후 질문 상담 가능 8. 채팅방에 개인정보 입력 금지 9. 채팅방에 광고 욕설 비방 금지
  • (견적/의뢰/질문/등업) 상담은 게시판 이용해 주세요.
  • 인터넷 임시파일 제거 시 속도 ↑ (Ctrl + Shift + Del)

공지사항

최신글

최신댓글

사이트명:홈짱닷컴, 연락처:
Copyright ⓒ https://homzzang.com. All rights reserved.
찾아주셔서 감사합니다. Since 2012