bootstrap tab 예제

수직 배치 시각적으로 알 약 변형에 가장 잘 작동 합니다. 기본 탭 변형을 사용하는 경우 Bootstrap v4 CSS가 탭 컨트롤이 항상 탭 콘텐츠 의 맨 위에 배치된다고 가정하므로 사용자 지정 스타일 지정 클래스를 제공할 수 있습니다. 또는 부트스트랩탭과 알약으로 위의 메뉴를 표시할 수 있습니다(아래 참조). 기본 .nav 구성 요소에는 .active 상태가 포함되지 않습니다. 다음 예제에서는 이 특정 클래스가 특별한 스타일을 트리거하지 않음을 보여 주는 클래스를 포함합니다. 부트스트랩에서 사용할 수 있는 탐색은 기본 .nav 클래스에서 활성 및 비활성화 상태까지 일반 태그 및 스타일을 공유합니다. 수정자 클래스를 교체하여 각 스타일 간에 전환할 수 있습니다. 당신은 어떤 자바 스크립트를 작성하지 않고 탭 구성 요소를 활성화 할 수 있습니다 – 단순히 각 탭에 데이터 토글 = “탭”을 지정, 뿐만 아니라 모든 탭에 대한 고유 ID와 .tab-창을 만들고 .tab-content에 래핑. 다음 예제에서는 Bootstrap의 데이터 특성을 통해 기본 탭 가능한 탭을 만드는 방법을 보여 줍니다. 코드펜 예제 : http://codepen.io/anon/pen/utGaK 부트스트랩 탭은 동일한 래퍼에 있지만 별도의 창에 배치된 콘텐츠를 분리하는 구성 요소입니다. 한 번에 하나의 창만 표시할 수 있습니다.

탭 선택기는 부트스트랩 v4의 탐색 마크업(즉, ul.nav> li.nav-item > a.nav-link)을 기반으로 합니다. 경우에 따라

  • (탐색 항목) 및/또는 (탐색 링크)에 클래스를 탭별로 추가할 수 있습니다. 이렇게 하려면 클래스 이름을 제목 항목 클래스 prop(
  • 요소) 또는 제목 링크 클래스 prop( 요소)에 제공하기만 하면 됩니다. 값은 문자열 또는 문자열의 배열로 전달될 수 있습니다. 탭은 부트스트랩 카드와 통합을 지원합니다. 카드 속성을 추가하고 구성 요소 안에 배치하기만 하면 됩니다. 카드 헤더를 올바르게 꾸미고 카드 본체에서 도입한 추가 패딩을 제거하려면 구성 요소에 본체 소품을 추가해야 합니다. 탭에 대 한 자습서에 대 한, 우리의 부트 스트랩 탭/알 약 자습서를 읽으십시오.

    다음 예제는 마지막 열 안에 수직 알 약 메뉴를 배치합니다. 따라서 큰 화면에서 메뉴가 오른쪽에 표시됩니다. 그러나 작은 화면에서 콘텐츠는 자동으로 단일 열 레이아웃으로 조정됩니다: 탐색 모음은 .nav-tabs 클래스가 있는 탭으로 시각적으로 스타일을 지정하더라도 역할=”tablist”, role=”tablist” 또는 role=”tabpanel” 특성을 부여해서는 안 됩니다. WAI ARIA 저작 사례에 설명된 대로 동적 탭 인터페이스에만 적합합니다. 이 섹션의 동적 탭 인터페이스는 예를 들어 JavaScript 동작을 참조하십시오. 탭 기반 탐색은 각 창을 한 번에 하나씩 볼 수 있는 다른 창으로 콘텐츠를 분리하여 작은 영역 내에서 엄청난 양의 콘텐츠를 처리할 수 있는 쉽고 강력한 메커니즘을 제공합니다. 사용자는 페이지를 떠나지 않고 창 간을 전환하여 콘텐츠에 빠르게 액세스할 수 있습니다. 다음 예제에서는 부트스트랩 탭 구성 요소를 사용하여 기본 탭을 만드는 방법을 보여 줍니다.

    탭 플러그인은 또한 알 약 탐색함께 작동. 알약 탐색을 만들려면 다음 예제와 같이 탭 태그에서 .nav-pills 클래스 .nav-알약을 대체합니다. 필요에 맞게, 이것은

      기반 태그와 함께 작동, 위에 표시된 대로, 또는 임의의 “자신의 롤” 태그와 함께.