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

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

홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1,677  
목차
  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> 

 

 

Nav Align (정렬・배치)

 

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

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

 

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

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

 

예제보기

 

Nav Vertical (수직 형태)

 

<ul class="nav flex-column"> 

 

예제보기

 

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> 

 

 

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>  

 

 

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

 

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

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

 

 

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-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> 

 

예제보기 

 

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-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> 

 

예제보기 

 

Nav Toggle Tab (토글탭)

 

<!-- pill 메뉴 -->

<ul class="nav nav-tabs">

    <li class="nav-item">

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

    </li>

    <li class="nav-item">

        <a class="nav-link" data-toggle="tab" href="#menu1">메뉴1</a>

    </li>

    <li class="nav-item">

        <a class="nav-link" data-toggle="tab" href="#menu2">메뉴2</a>

    </li>

</ul>


<!-- Tab 영역-->

<div class="tab-content">

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

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

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

</div>

 

예제보기

 

Nav Toggle Pill (토글알약)

 

<!-- tab 메뉴 -->

<ul class="nav nav-pills">

    <li class="nav-item">

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

    </li>

    <li class="nav-item">

        <a class="nav-link" data-toggle="pill" href="#menu1">메뉴1</a>

    </li>

    <li class="nav-item">

        <a class="nav-link" data-toggle="pill" href="#menu2">메뉴2</a>

    </li>

</ul>


<!-- Tab 영역-->

<div class="tab-content">

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

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

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

</div> 

 

※ Tab 영역은 (tab 메뉴・pill 메뉴) 동일.
방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

Bootstrap 4 관련글

Bootstrap 3 관련글

Bootstrap 5 관련글

코딩동강 관련글

HTML 관련글

CSS 관련글

JavaScript 관련글

JQuery 관련글

PHP 관련글

SQL 관련글
분류 제목
basic BS4 - HOME (BS소개)
basic BS4 - Start (BS시작) - BS4다운 / BS4CDN / BS4구문
basic BS4 - Container (BS컨테이너) - 박스형 vs 와이드형 (= .container vs. .co…
basic BS4 - Grid (BS그리드)
basic BS4 - Text/Typography (BS글자 = BS텍스트)
basic BS4 - Color (BS색깔 = BS색상) - BS글자색 + BS배경색
basic BS4 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS4 - Image (BS이미지) - 이미지모양 + 이미지정렬 + 반응형이미지
basic BS4 - Jumbotron (BS점보트론) - 박스형 vs 와이드형
basic BS4 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS4 - Button (BS버튼) - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS4 - Button Group (BS버튼그룹)
basic BS4 - Badge (BS배지)
basic BS4 - Progress Bar (BS진행바 = BS진도바 = BS프로그레스바)
basic BS4 - Spinner (BS스피너 = BS회전 = BS로더)
basic BS4 - Pagination (BS페이지매기기 = BS페이지번호 = BS페이징 = BS패지네이션) + BS…
basic BS4 - List Group (BS리스트그룹)
basic BS4 - Card (BS카드) - Well (BS웰) + Panel (BS패널) + Thumbnail (B…
basic BS4 - Dropdown (BS드롭다운/BS드롭업 = BS드랍다운/BS드랍업)
basic BS4 - Collapse (BS접기 = BS컬랩스 = BS토글)
basic BS4 - Nav (네브) - 간단메뉴 + 일반탭 + 알약탭
basic BS4 - Navbar (메뉴바) - 네비게이션 메뉴바 (= 네브바 = 네비바) ※ BS4분기점
basic BS4 - Form (BS폼양식)
basic BS4 - Input (BS입력 = BS인풋)
basic BS4 - Input Group (BS입력그룹 = BS인풋그룹)
basic BS4 - Custom Form (BS커스텀폼)
basic BS4 - Carousel (BS캐러셀)
basic BS4 - Modal (BS모달)
basic BS4 - Tooltip (BS툴팁 = BS말풍선 허버형)
basic BS4 - Popover (BS팝오버) ★ - 클릭형말풍선
basic BS4 - Toast (BS토스트) - 순간말풍선 (= 팝업상자 = 짧은경고창 = 스낵바)
basic BS4 - Scrollspy (BS스크롤스파이) - 원페이지메뉴링크 (= 내부링크)
basic BS4 - Utilities (BS유틸클래스 + BS4추가클래스) ★★★★★
basic BS4 - Flex (BS플렉스박스) ★★★★★
basic BS4 - Icon (BS아이콘)
basic BS4 - Media Object (BS미디어객체) - 썸네일형, 요약형
basic BS4 - Filter (필터링) ★ - 테이블필터링 + 리스트필터링 + 드롭다운필터링 + div안 텍스트필…
grid BS4 - Grid (BS그리드) - 반응형 레이아웃 ★★★
grid BS4 - Grid Stacked-to-horizontal (BS그리드 수직정렬 → 수평정렬)
grid BS4 - Grid Extra Small (BS그리드 초소형기기) - .col-숫자, .col 클래스
grid BS4 - Grid Small (BS그리드 소형기기) - .col-sm-숫자, .col-sm 클래스
grid BS4 - Grid Medium (BS그리드 중형기기) - .col-md-숫자, .col-md 클래스
grid BS4 - Grid Large (BS그리드 대형기기) - .col-lg-숫자, .col-lg 클래스
grid BS4 - Grid Extra Large (BS그리드 초대형기기) - .col-xl-숫자, .col-xl 클…
grid BS4 - Grid Example (BS그리드 예제) ★
theme BS4 - Template (BS템플릿)
BS_bookmark BS4 - BS메가메뉴
BS_bookmark BS4 - Masonry (메이슨리) 갤러리
목록
오늘: 1,916 | 어제: 21,752 | 최대: 21,752 | 전체: 7,310,805
  • 채팅방
  • 필독
1. 채팅창 헤드에서 접속자 확인 2. 닉네임 클릭해 1:1 채팅 가능 3. 닉네임 클릭해 귓속말 가능 4. 닉네임 클릭해 호출하기 가능 5. 우하단 클릭해 환경 설정 가능 6. 의뢰글 작성 후 의뢰 상담 가능 7. 질문글 작성 후 질문 상담 가능 8. 채팅방에 개인정보 입력 금지 9. 채팅방에 광고 욕설 비방 금지
  • (견적/의뢰/질문/등업) 상담은 게시판 이용해 주세요.
  • 인터넷 임시파일 제거 시 속도 ↑ (Ctrl + Shift + Del)

공지사항

최신글

최신댓글

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