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

[basic] BS3 - Tabs/Pills - (BS탭메뉴) - 일반탭메뉴/알약탭메뉴

홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1,985  

Tabs & Pills 클래스 

 

.nav nav-tabs (탭 모양 네이게이션 생성)

.nav nav-pills (알약 모양 가로 네이게이션 생성)

.nav nav-pills nav-stacked (알약 모양 세로 네이게이션 생성)

.nav-justified (너비 양쪽 균등 배분 탭/알약 모양 네이게이션 생성)

.disabled (사용 불가한 탭/알약 모양 네이게이션 항목 생성)

.tab-content (Tab/Pill 내용박스)

.tab-pane (개별 Tab/Pill) - .tab-content 안에 위치

 

※ tab-content, .tab-pane , data-toggle="tab"(data-toggle="pill") 등은 Toggle Tab (Pill) 만들 때 사용.


 

Menu

 

<ul> 세로메뉴

 

<ul> 

   <li><a href="#">홈짱닷컴</a></li>

   <li><a href="#">HTML</a></li>

   <li><a href="#">CSS</a></li>

   <li><a href="#">JS</a></li>

</ul>



<ul> 가로메뉴

 

<ul class="list-inline"> 

   <li><a href="#">홈짱닷컴</a></li>

   <li><a href="#">HTML</a></li>

   <li><a href="#">CSS</a></li>

   <li><a href="#">JS</a></li>

</ul>


결과보기

※ <ul> 태그에 list-inline 클래스 추가. list-inline 클래스 대신, nav nav-tabs 클래스 추가시 탭메뉴 됨.

 

※ Tab과 Pill은 일부 클래스만 다를 뿐 거의 같음. 

 

Tabs

 

Tabs (일반탭)

 

<ul class="nav nav-tabs">

    <li class="active"><a href="#">홈짱닷컴</a></li>

    <li><a href="#">HTML</a></li>

    <li><a href="#">CSS</a></li>

    <li><a href="#">JS</a></li>

</ul>


결과보기

 

Tabs + Dropdown (일반탭 + 드롭다운)

 

<ul class="nav nav-tabs">

    <li class="active"><a href="#">Home</a></li>

    <li class="dropdown">

        <a class="dropdown-toggle" data-toggle="dropdown" href="#">손님

        <span class="caret"></span></a>

        <ul class="dropdown-menu">

            <li><a href="#">HTML</a></li>

            <li><a href="#">CSS</a></li>

            <li><a href="#">JS</a></li>

        </ul>

    </li>

    <li><a href="#">회원</a></li>

    <li><a href="#">패밀리</a></li>

</ul>

 

결과보기

 

Centered Tabs 전체너비배분

.nav-justified { width: 100%;}  ※ 768px 미만 수직가운데정렬, 768px 이상 전체너비배분

 

<!-- Tab -->

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

    <li class="active"><a href="#">홈짱닷컴</a></li>

    <li><a href="#">HTML</a></li>

    <li><a href="#">CSS</a></li>

    <li><a href="#">JS</a></li>

</ul>

 

결과보기

 

Toggleable / Dynamic Tabs 토글 일반탭 ★

 

<ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#hz">홈짱닷컴</a></li>

    <li><a data-toggle="tab" href="#html">HTML</a></li>

    <li><a data-toggle="tab" href="#css">CSS</a></li>

</ul>


<div class="tab-content">

    <div id="hz" class="tab-pane fade in active">

        <h3>홈짱닷컴</h3>

        <p>Homzzang.com</p>

    </div>

    <div id="html" class="tab-pane fade">

        <h3>HTML</h3>

        <p>뼈대</p>

    </div>

    <div id="css" class="tab-pane fade">

        <h3>CSS</h3>

        <p>디자인</p>

    </div>

</div>

 

결과보기

※ 핑크색 부분만 다를 뿐, Pills와 같음. 

 

Pills

 

Pills (알약탭)

 

<ul class="nav nav-pills">

    <li class="active"><a href="#">홈짱닷컴</a></li>

    <li><a href="#">HTML</a></li>

    <li><a href="#">CSS</a></li>

    <li><a href="#">JS</a></li>

</ul>

 

결과보기

 

Vertical Pills (알약탭 세로형)

 

<ul class="nav nav-pills nav-stacked">

    <li class="active"><a href="#">홈짱닷컴</a></li>

    <li><a href="#">HTML</a></li>

    <li><a href="#">CSS</a></li>

    <li><a href="#">JS</a></li>

</ul>

 

결과보기

 

<div class="row">

    <div class="col-md-3">

        <p>홈짱닷컴</p>

    </div>

    <div class="col-md-3"> 

       <p>Homzzang.com</p>

    <div class="col-md-3"> 

       <p>홈페이지 제작관리 강의</p>

    </div>

    <div class="col-md-3">

        <ul class="nav nav-pills nav-stacked">

            <li class="active"><a href="#">홈짱닷컴</a></li>

            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JS</a></li>

       </ul>

    </div>

    <div class="clearfix visible-lg"></div>

</div>

 

결과보기 

 

Pills With Dropdown Menu (알약탭 + 드롭다운)

 

<ul class="nav nav-pills nav-stacked">

    <li class="active"><a href="#">홈짱닷컴</a></li>

    <li class="dropdown">

        <a class="dropdown-toggle" data-toggle="dropdown" href="#">손님

        <span class="caret"></span></a>

        <ul class="dropdown-menu">

            <li><a href="#">HTML</a></li>

            <li><a href="#">CSS</a></li>

            <li><a href="#">JS</a></li>

        </ul>

    </li>

    <li><a href="#">회원</a></li>

    <li><a href="#">패밀리</a></li>

</ul>

 


Centered Pills 전체너비배분

.nav-justified { width: 100%;}  ※ 768px 미만 수직가운데정렬, 768px 이상 전체너비배분

 

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

    <li class="active"><a href="#">홈짱닷컴</a></li>

    <li><a href="#">HTML</a></li>

    <li><a href="#">CSS</a></li>

    <li><a href="#">JS</a></li>

</ul>

 

결과보기

 

Toggleable / Dynamic Pills 토글 알약탭 ★ 

 

<ul class="nav nav-pills">

    <li class="active"><a data-toggle="pill" href="#hz">홈짱닷컴</a></li>

    <li><a data-toggle="pill" href="#html">HTML</a></li>

    <li><a data-toggle="pill" href="#css">CSS</a></li>

</ul>


<div class="tab-content">

    <div id="hz" class="tab-pane fade in active">

        <h3>홈짱닷컴</h3>

        <p>Homzzang.com</p>

    </div>

    <div id="html" class="tab-pane fade">

        <h3>HTML</h3>

        <p>뼈대</p>

    </div>

    <div id="css" class="tab-pane fade">

        <h3>CSS</h3>

        <p>디자인</p>

    </div>

</div>

 

결과보기

※ 핑크색 부분만 다를 뿐, Tabs과 같음.

 

 

JS Tab 

아래는 좀 더 깊이있게 공부하고 싶은 분만 열람 !!

 

Tab 플러그인

 

Tab 사용 위해선 아래 플러그인 파일 중 하나 필요.

개별: tab.js

통합: bootstrap.js (또는, bootstrap.min.js)

 

 

Tab 클래스

 

.nav nav-tabs (탭 모양 네이게이션 생성)

.nav-justified (너비 양쪽 균등 배분 탭/알약 모양 네이게이션 생성)

.tab-content (Tab/Pill 내용박스)

.tab-pane (개별 Tab/Pill) - .tab-content 안에 위치

 

 

tab 예제 - data-* 속성 이용

 

<div class="container">

  <h2>홈짱닷컴</h2>

  <ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

    <li><a data-toggle="tab" href="#menu1">HTML</a></li>

    <li><a data-toggle="tab" href="#menu2">CSS</a></li>

    <li><a data-toggle="tab" href="#menu3">JS</a></li>

  </ul>


  <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

      <h3>HOME</h3>

      <p>대문</p>

    </div>

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

      <h3>HTML</h3>

      <p>뼈대</p>

    </div>

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

      <h3>CSS</h3>

      <p>디자인</p>

    </div>

    <div id="menu3" class="tab-pane fade">

      <h3>JS</h3>

      <p>동작기능</p>

    </div>

  </div>

</div>

 

예제보기

 

Tab 예제 - js 이용

 

<div class="container">

  <h2>홈짱닷컴</h2>

  <ul class="nav nav-tabs">

    <li class="active"><a href="#home">Home</a></li>

    <li><a href="#menu1">HTML</a></li>

    <li><a href="#menu2">CSS</a></li>

    <li><a href="#menu3">JS</a></li>

  </ul>


  <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

      <h3>HOME</h3>

      <p>대문</p>

    </div>

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

      <h3>HTML</h3>

      <p>뼈대</p>

    </div>

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

      <h3>CSS</h3>

      <p>디자인</p>

    </div>

    <div id="menu3" class="tab-pane fade">

      <h3>JS</h3>

      <p>동작기능</p>

    </div>

  </div>

</div>


<script>

$(document).ready(function(){

  $(".nav-tabs a").click(function(){

    $(this).tab('show');

  });

});

</script>

 

예제보기


Tab Option (옵션)

 

none

 

 

Tab Method (메서드)

 

.tab("show")

탭 보이기.

 

 

Tab Event (이벤트)

 

show.bs.tab

탭이 표시 될 때 발생.

 

shown.bs.tab

탭이 완전히 표시되면 (CSS 전환 완료 후) 발생.

 

hide.bs.tab

탭을 숨기려고 할 때 발생.

 

hidden.bs.tab

탭이 완전히 숨겨지면 (CSS 전환 완료 후) 발생.

 

 

Tab 예제 - 이벤트

 

<div class="container">

  <h2>홈짱닷컴</h2>

  <ul class="nav nav-tabs">

    <li class="active"><a href="#home">Home</a></li>

    <li><a href="#menu1">HTML</a></li>

    <li><a href="#menu2">CSS</a></li>

    <li><a href="#menu3">JS</a></li>

  </ul>


  <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

      <h3>HOME</h3>

      <p>대문</p>

    </div>

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

      <h3>HTML</h3>

      <p>뼈대</p>

    </div>

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

      <h3>CSS</h3>

      <p>디자인</p>

    </div>

    <div id="menu3" class="tab-pane fade">

      <h3>JS</h3>

      <p>동작기능</p>

    </div>

  </div>

  <hr>

  <p class="act"><b>현재 Tab</b>: <span></span></p>

  <p class="prev"><b>이전 Tab</b>: <span></span></p>

</div> 

 

<script>

$(document).ready(function(){

  $(".nav-tabs a").click(function(){

    $(this).tab('show');

  });

  $('.nav-tabs a').on('shown.bs.tab', function(event){

    var x = $(event.target).text();         // 현재 tab

    var y = $(event.relatedTarget).text();  // 이전 tab

    $(".act span").text(x);

    $(".prev span").text(y);

  });

});

</script>

 

결과보기 
방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

Bootstrap 3 관련글

Bootstrap 4 관련글

Bootstrap 5 관련글

코딩동강 관련글

HTML 관련글

CSS 관련글

JavaScript 관련글

JQuery 관련글

PHP 관련글

SQL 관련글
분류 제목
basic BS3 - HOME (소개) - BS3 vs BS4 차이 (= BS차이)
basic BS3 - Start (시작) ★ - BS다운 / BSCDN / BS구문
basic BS3 - Grid (그리드) ★★★ - (BS3그리드 vs BS4그리드)
basic BS3 - Text/Typography(BS글자 = BS텍스트) (= BS4글자 vs BS3글자) BS글자색
basic BS3 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS3 - Image (BS이미지) - 반응형이미지 + 반응형동영상 + 이미지정렬
basic BS3 - Jumbotron/page-header (BS점보트론 / BS페이지헤더) - 큰글씨, 글자키우기
basic BS3 - Well (BS웰 = BS회색상자) ★ - BS회색배경상자 (= BS회색박스 = BS웰클래스)
basic BS3 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS3 - Button (BS버튼) ★ - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS3 - Button Group (BS버튼그룹) ★
basic BS3 - Icon (아이콘) - Glyphicon/Font Awesome/Google Material De…
basic BS3 - Progress Bar (BS진행바 = BS진행상태표시 = BS진도바 = BS프로그레스바) - I…
basic BS3 - Pagination (BS페이징 = BS페이지번호 = BS페이징 = BS패지네이션) + Bread…
basic BS3 - Pager (BS페이저) - 이전페이지/다음페이지 (= 앞으로가기/뒤로가기)
basic BS3 - List Group (BS리스트그룹) - 리스트생성
basic BS3 - Panel (BS글상자 = BS패널)
basic BS3 - Dropdown (BS드롭다운메뉴) ★ + Dropup (BS드롭업메뉴)
basic BS3 - Collapse (BS접기 = BS컬랩스 = BS토글=BS접는패널) + BS아코디언
basic BS3 - Tabs/Pills - (BS탭메뉴) - 일반탭메뉴/알약탭메뉴
basic BS3 - Navbar (BS메뉴바 = BS네브바) ★ - 네비게이션 메뉴바
basic BS3 - Form (BS폼양식) ★★★
basic BS3 - Input (BS입력창 = BS인풋) + Textarea (텍스트영역) + Checkbox(체크박…
basic BS3 - Input2 (BS입력창2 = BS인풋2) 일반텍스트 + Input Group(BS인풋그룹) + …
basic BS3 - Input Sizing (BS입력창크기 = BS인풋크기)
basic BS3 - Media Object (BS미디어객체) - 썸네일위치
basic BS3 - Carousel (BS캐러셀 = BS슬라이드)
basic BS3 - Modal (BS모달) ★ - 새창팝업
basic BS3 - Tooltip (BS툴팁) - 허버형말풍선 (= 도움말풍선)
basic BS3 - Popover (BS팝오버) ★ - 클릭형말풍선
basic BS3 - Scrollspy (스크롤스파이) - 원페이지메뉴링크 (= 내부링크) ※매뉴얼제작
basic BS3 - Affix (BS어픽스) - 스크롤고정 (= 스크롤상단고정 + 스크롤사이드고정) + Scrolls…
grid BS3 - Grid (그리드) - 반응형 레이아웃 ★★★
grid BS3 - Grid (.container / .container-fluid) - 그리드 (박스형/와이드형)
grid BS3 - Grid - Small (BS그리드 소형기기 이상) - col-sm-숫자
grid BS3 - Grid - Medium (BS그리드 중형기기 이상) - col-md-숫자
grid BS3 - Grid - Large (BS그리드 대형기기 이상) - col-lg-숫자
grid BS3 - Grid Examples (그리드 예제) ★★★★★
theme BS3 - Templates (BS템플릿종류 = BS테마종류) - BS레이아웃종류 ★★★
theme BS3 - Theme "Simply Me" (BS테마 - 심플미테마 = 프로필테마 = 자기소개테마 = 원페이…
theme BS3 - Theme "Company" (BS테마 - 회사테마 = 컴퍼니테마) - 회사소개테마 (슝슝) + …
theme BS3 - Theme "The Band" (BS테마 - 밴드테마) - 스크롤스파이 원페이지 테마
quiz BS3 - Quiz (BS퀴즈 = BS테스트 = BS시험)
basic BS3 - Background CSS (= BS배경색CSS)
basic BS3 - Float CSS (= BS정렬CSS = BS배치CSS)
basic BS3 - Display CSS (= BS노출CSS = BS표시CSS = BS보임 + BS숨김 = BS보이기…
grid BS3 - grid CSS (BS그리드CSS = BS반응형CSS = BS노출CSS) + BS프린트클래스 ★★…
basic BS3 - Filter (BS필터 - 테이블검색필터/리스트검색필터/드롭다운검색필터/텍스트검색필터)
basic BS3 - Spinner (BS스피너 = BS회전 = BS로더) - BS3 지원X (대신, Glyphicon…
basic BS3 - Toast (토스트) - 순간말풍선 (=짧은경고창 = 스낵바) ※ BS3 지원X
basic BS3 - Card (BS카드) - 지원 X
basic BS3 - Utilities (BS유틸클래스) - BS글자색, BS배경색, BS닫기, BS카렛, BS정렬, …
basic BS3 - flex (BS플렉스) - 지원 X
basic BS3 - Badge/Label (BS배지/BS레이블=BS라벨) ※ BS속도저하해결
basic BS3 - Transition (BS트랜지션 = BS전환효과)
basic BS3 - 요소 높이 균등 설정 (BootStrap3 / 부트스트랩3 경우) ※ 각 그리드 높이 (동일하게/…
목록
오늘: 3,717 | 어제: 4,290 | 최대: 11,609 | 전체: 6,511,835
  • 채팅방
  • 필독
1. 채팅창 헤드에서 접속자 확인 2. 닉네임 클릭해 1:1 채팅 가능 3. 닉네임 클릭해 귓속말 가능 4. 닉네임 클릭해 호출하기 가능 5. 우하단 클릭해 환경 설정 가능 6. 의뢰글 작성 후 의뢰 상담 가능 7. 질문글 작성 후 질문 상담 가능 8. 채팅방에 개인정보 입력 금지 9. 채팅방에 광고 욕설 비방 금지
  • (견적/의뢰/질문/등업) 상담은 게시판 이용해 주세요.
  • 인터넷 임시파일 제거 시 속도 ↑ (Ctrl + Shift + Del)

공지사항

최신글

최신댓글

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