풀다운 메뉴
특별한 진술 : Bootstrap 구성 요소의 상호 작용 효과는 모두 jQuery 라이브러리에서 작성한 플러그인을 기반으로하기 때문에 먼저 bootstrap.min.js를 사용하여 효과를 생성하기 전에 jquery.min.js를로드해야합니다.
<div> <버튼 유형 = "버튼"ID = "DropDownMenu1"Data-Toggle = "Dropdown"> 드롭 다운 메뉴 <Span> </span> </button> <ul Role = "Menu"Aria-LabelledBy = "DropDownMenu1"> <li 역할 = "프리젠 테이션"> role = "menuitem"tabindex = "-1"href = "href ="href = "href =. 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </a> <li role = "presentation"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> drop down </a> <li 역할 = "presentation"> rel = "" "" "juit" " href = "#"> 드롭 다운 메뉴 항목 </a> </li> </li> </ul> </div> <!-jQuery는 부트 스트랩 전에 가져와야합니다. 후자는 이전-> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"를 기반으로 구현됩니다. src = "// maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
생식 사진 :
구현 원칙 :
처음에는 디스플레이가있었습니다 : 수업에는 없음; 아래의 CSS를 살펴보십시오
.Dropdown-menu {위치 : 절대;/*부모 요소 Div.dropdown*/top에 대한 절대 위치 설정 설정 부모 메뉴 항목의 하단에 드롭 다운 메뉴 항목을 보자. 상위 요소가 상대 위치를 설정하지 않으면 요소는 신체 요소*/왼쪽 : 0; Z-index : 1000;/*다른 요소로 덮지 않음*/디스플레이를 덮지 않습니다*/디스플레이*/*기본값으로 드롭 다운 메뉴 항목을 숨기십시오*/float : 왼쪽; min-width : 160px; 패딩 : 5px 0; font-size : font-size : font-size : font-size : font-size : font-size : 2px 0; 없음; 배경 색상 : #fff; 배경 클립 : 패딩-박스; 테두리 : 1px solid #ccc; 경계 : 1px solid rgba (0, 0, 0, .15); border-radius : 4px; -webkit-box-shadow : 0 6px 12px rgba (0, 0, 0, .175); Box-Shadow : 0 6px 12 rgba (0, 0, 0, 0, 0, .175);}그런 다음 클릭 이벤트를 사용하여 태그 클래스의 제거 및 추가를 제어하여 디스플레이 및 숨기기를 달성하십시오.
JS 기술을 통해 클래스 이름 "Open"을 부모 컨테이너 "Div.Dropdown"에 추가 또는 제거하여 드롭 다운 메뉴의 디스플레이 또는 숨겨지기 위해. 즉, 기본적으로
"Div.Dropdown"에는 클래스 이름이 "Open"이 없습니다. 사용자가 처음으로 클릭하면 클래스 이름 "Open"이 클래스 이름 "Open"에 추가됩니다. 사용자가 다시 클릭하면 "div.dropdown"컨테이너의 클래스 이름 "Open"이 다시 제거됩니다. 브라우저의 Firebug를 통해 전체 프로세스를 볼 수 있습니다.
기본:
사용자는 처음으로 클릭합니다.
사용자가 다시 클릭합니다.
CSS를 엽니 다
.open> .Dropdown-menu {display : block;}메뉴 분할 라인을 아래로 당기십시오
위의 예를 살펴본 다음 코드를 붙여 넣으십시오! 효과를보십시오. 여전히 JS 파일을 소개해야합니다! 나중에는 많은 것이 없습니다!
<div> <버튼 유형 = "버튼"ID = "DropDownMenu1"Data-Toggle = "Dropdown"> 드롭 다운 메뉴 <Span> </span> </button> <ul Role = "Menu"Aria-LabelledBy = "DropDownMenu1"> <li 역할 = "프리젠 테이션"> role = "menuitem"tabindex = "-1"href = "href ="href = "href =. 역할 = "프리젠 테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </a> <li role = "presentation"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> drop down </a> <li roal = "presentation"> <li roby> <a roby "> 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </a> </li> </ul> </div>
생식 사진 :
실제로 코드 라인이 하나 더 있습니다
<li 역할 = "프레젠테이션"> </li>
드롭 다운 메뉴 제목
코드를 직접 업로드하십시오
<div> <버튼 유형 = "button"id = "dropdownmenu1"data-toggle = "dropdown"> dropdown 메뉴 <Span> </span> </button> <ul 역할 = "menu"aria-labelledby = "dropdownmenu1"> <li 역할 = "프리젠 테이션"> presentation "> relip ="a meneg ""tabind ""tabindex ". href = "#"> 드롭 다운 메뉴 항목 </a> </li> <li 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </a> </li> <li role = "presentation"> <a role = "menuitem"탭 역할 = "프레젠테이션"> </li> <li 역할 = "프레젠테이션"> 2 부 메뉴 헤더 </li> <li 역할 = "프레젠테이션"> <A 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </a> </li> <li role = "presentation"> robold "tabindex ="-1 "href ="href = "href ="href = "href ="href = "href. 항목 </a> </li> <li role = "presentation"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </a> </li> </ul> </div>
생식 사진 :
실제로 하나의 코드 만 추가되었습니다.
<li 역할 = "프레젠테이션"> 2 부 메뉴 헤더 </li>
풀다운 메뉴 정렬
<H4> 풀 오른쪽 클래스를 사용하여 드롭 다운 메뉴를 모 컨테이너의 오른쪽에 맞 춥니 다.
풀다운 메뉴
<span> </span> </button> <ul 역할 = "menu"aria-labelledby = "dropdownmenu1"> <li 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 </a> </li> <li robol = "prespord"> relip ""href ""href = "#"#"#"#" 항목 </a> </li> <li role = "presentation"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </a> </li> <li robol = "프리젠 테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </li>> <li recon = ""> <li recon = "menuitem" 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </a> </li> </li> </li> </li> </li> </li> </ul> </div> <br/> <br/> <h4> 드롭 다운 메뉴 클래스를 사용하여 드롭 다운 메뉴를 상위 컨테이너의 오른쪽과 정렬합니다. id = "dropdownmenu1"data-toggle = "dropdown">
풀다운 메뉴
<span> </span> </button> <ul 역할 = "menu"aria-labelledby = "dropdownmenu1"> <li 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 </a> </li> <li robol = "prespord"> relip ""href ""href = "#"#"#"#" 항목 </a> </li> <li role = "presentation"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </a> </li> <li robol = "프리젠 테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </li>> <li recon = ""> <li recon = "menuitem" 역할 = "프리젠 테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </a> </li> </li> </li> </li> </li> </li> </li> </li> </div> <br/> <br/> <h4> 드롭 다운 메뉴는 모 컨테이너의 왼쪽면과 연계되어 있습니다. data-toggle = "dropdown">
풀다운 메뉴
<span> </span> </button> <ul 역할 = "menu"aria-labelledby = "dropdownmenu1"> <li 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 </a> </li> <li robol = "prespord"> relip ""href ""href = "#"#"#"#" 항목 </a> </li> <li role = "presentation"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </a> </li> <li robol = "프리젠 테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </li>> <li recon = ""> <li recon = "menuitem" 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </a> </li> </ul> </div>
실제로 CSS의 스타일 코드가있는 "Dropdown-Menu"에 "풀 레이 긴"또는 "Dropdown-Menu-Right"클래스 이름을 추가하십시오.
.dropdown-menu.pull-right {오른쪽 : 0; 왼쪽 : auto;}. Dropdown-Menu-Right {오른쪽 : 0; 왼쪽 : auto;}풀다운 메뉴 (메뉴 항목 상태)
드롭 다운 메뉴 항목의 기본 상태 (설정 없음)는 일시 중단 상태 (: 호버)와 초점 상태 (: Focus)
위의 두 상태 외에도 드롭 다운 메뉴 항목에는 현재 상태 (.Active) 및 장애인 상태 (.Disabled)도 있습니다.
<div> <버튼 유형 = "버튼"ID = "DropDownMenu1"Data-Toggle = "Dropdown"> 드롭 다운 메뉴 <Span> </span> </button> <ul Role = "Menu"Aria-LabelledBy = "DropDownMenu1"> <li 역할 = "프리젠 테이션"> role = "menuitem"tabindex = "-1"href = "href ="href = "href =. 역할 = "프리젠 테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </a> <li role = "presentation"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> drop down </a> <li roal = "presentation"> <li roby> <a roby "> 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </a> </li> </ul> </div>
마우스에 마우스를 넣으면 장애인에 금지 된 표시가 표시됩니다. 스크린 샷을 삽입 할 수 없습니다!
버튼 (버튼 그룹)
웹 페이지에서 단일 버튼을 사용하는 것은 때때로 우리의 비즈니스 요구를 충족시키지 못합니다. 우리는 종종 리치 텍스트 편집기의 작은 아이콘 버튼 세트와 같이 여러 버튼이 결합되는 것을 보게됩니다.
<div> <버튼 유형 = "버튼"> <span> </span> </button> <버튼 유형 = "button"> <span> </span> </button> <버튼 유형 = "버튼"> <span> </span> </button> <버튼 "> <span> </span> </button> <button type"> </span> </span> <버튼 유형 = "버튼"> <pan> </span> </button> <버튼> <버튼 타입 = "버튼"> <span> </span> </button> <버튼> <버튼 유형 = "버튼"> <span> </span> </button> <버튼 = "버튼"> <span> </span> </button> <button> <버튼 "> <span> </<버튼> <버튼> <버튼> <버튼> < 입력 = "버튼"> <pan> </span> </button> <버튼 타입 = "버튼"> <pan> </span> </button> </div>
생식 사진 :
여기에서 다른 아이콘에 따라 다른 아이콘 버튼을 생성 할 수 있습니다! 이 웹 사이트에서 http://getbootstrap.com/components/#glyphicons에서 볼 수 있습니다
버튼 (버튼 도구 모음)
풍부한 텍스트 편집기에서 그룹 버튼 그룹은 복사, 자르고 붙여 넣기 및 붙여 넣습니다. 아래 그림과 같이 좌파, 중간 정렬, 오른쪽 정렬 및 최종 정렬 그룹 :
그런 다음 부트 스트랩 프레임 버튼 도구 모음도 이러한 제작 방법을 제공합니다. 아래와 같이 버튼 그룹 "BTN-Group"을 큰 컨테이너 "btn-toolbar"에 그룹에 넣어야합니다.
<div> <div> <버튼 유형 = "button"> <span> </span> </button> <button type = "button"> <span> </span> </button> <버튼 타입 = "button"> <span> </span> </div> <div> <버튼 유형 = "button"> <span> </span> </div> <div> <버튼 유형 = "버튼"> <span> </span> </button> </div> <div> <버튼 타입 = "버튼"> <pan> </span> </button> </div> <div> <버튼 유형 = "button"> </span> </button> <버튼> </button> <버튼> </button> </div> <div> <button> < 입력 = "버튼"> <pan> </span> </button> <버튼> </button> <버튼> <버튼 유형 = "버튼"> <span> </span> </button> <버튼 유형 = "button"> <span> </span> </button> </div> <div> <버튼 유형 = "button"> <span> </span> </div>
생식 사진 :
그림의 두 번째 아이콘 세트는 클래스와 함께 추가됩니다.
BTN-Group-LG : 큰 버튼 그룹
BTN-Group-SM : 작은 버튼 그룹
BTN-Group-XS : 초소형 버튼 그룹
해당 클래스 이름을 ".btn-group"클래스 이름에 추가하여 크기가 다른 버튼 그룹을 얻으십시오.
버튼 (중첩 그룹)
여러 번, 우리는 종종 탐색 메뉴와 평범한 버튼 그룹을 배열하여 탐색 메뉴와 유사한 효과를 달성합니다.
그것을 사용할 때는 원래 드롭 다운 메뉴를 "BTN-Group"으로 만든 "드롭 다운"을 만든 컨테이너 만 교체하고 일반 버튼과 동일한 레벨에 배치하면됩니다.
<div> <버튼 유형 = "버튼"> 홈 </button> <버튼 유형 = "버튼"> 제품 디스플레이 </button> <버튼 유형 = "버튼"> 케이스 분석 </button> <버튼 유형 = "버튼"> 연락처 </button> <div> <버튼 데이터-토글 = "dropdown"type = "button"> href = "a href ="##" 프로파일 </a> </li> <li> <a href = "##"> 기업 문화 </a> </li> <li> <a href = "##"> 조직 구조 </a> </li> <li> <a href = "##"> 고객 서비스 </a> </li> </ul> </div>
생식 사진 :
버튼 (수직 그룹화)
앞에서 볼 수있는 예에서 버튼 그룹은 수평으로 표시됩니다. 그러나 실제로 사용하면 수직 디스플레이 효과가 항상 발생합니다. 이 스타일은 부트 스트랩 프레임 워크에도 제공됩니다. 수평 그룹화의 "BTN-Group"클래스 이름을 "BTN-Group-Vertical"으로 변경하면됩니다.
<div> <버튼 유형 = "버튼"> 홈 </button> <버튼 유형 = "버튼"> 제품 디스플레이 </button> <버튼 유형 = "버튼"> 케이스 분석 </button> <버튼 유형 = "버튼"> 연락처 </button> <div> <버튼 데이터-토글 = "dropdown"type = "button"> href = "a href ="##" 프로파일 </a> </li> <li> <a href = "##"> 기업 문화 </a> </li> <li> <a href = "##"> 조직 구조 </a> </li> <li> <a href = "##"> 고객 서비스 </a> </li> </ul> </div>
생식 사진 :
버튼 (동일 버튼)
동일 세그먼트 버튼의 효과는 모바일 단자에서 특히 실용적입니다. 전체 버튼 그룹 너비는 컨테이너의 100%이고 버튼 그룹의 각 버튼은 전체 컨테이너 너비를 나눕니다. 예를 들어, 버튼 그룹에 5 개의 버튼이있는 경우 각 버튼의 너비가 20%이고 버튼이 4 개있는 경우 각 버튼은 폭 25%입니다.
이퀄라이제이션 버튼을 종종 적응 형 그룹화 버튼이라고도합니다. 구현 방법도 매우 간단합니다. 아래와 같이 "BTN-Group-Justified"클래스 이름을 버튼 그룹 "BTN-Group"에만 추가하면됩니다.
<div> <div> <a href = "#"> home </a> <a href = "#"> 제품 디스플레이 </a> <a href = "#"> 사례 분석 </a> <a href = "#"> 연락 </a> </div> </div>
화면 너비를 변경하십시오
특별 명세서 : Aliquot Button Group을 만들 때 <a> 태그 요소를 사용하여 버튼을 만듭니다. <button> 태그 요소를 사용할 때 디스플레이를 사용하여 : 테이블은 일부 브라우저에서이를 지원하는 데 친숙하지 않기 때문입니다.
버튼의 아래쪽 위쪽 삼각형
버튼의 아래쪽 삼각형, 우리는 ""레이블 요소를 레이블에 추가하고 "Caret"이라고 명명합니다.
때로는 드롭 다운 메뉴가 나타납니다 (다음 섹션에서는 소개합니다). 현재 삼각형 방향을 위쪽으로 표시해야합니다. 구현 방법 : "dropup"클래스 이름을 ".BTN-Group"클래스에 추가해야합니다 (위쪽 팝업 드롭 다운 메뉴에 사용할 클래스 이름이기도합니다).
<div> <버튼 데이터-토글 = "드롭 다운"유형 = "버튼"> 버튼 드롭 다운 메뉴 <span> </span> </button> <ul> <li> <a href = "##"> 버튼 드롭 다운 메뉴 항목 </a> </li> <li> <a href = "##"> 버튼 드롭 다운 메뉴 </li> <li> <a href = "##" 항목 </a> </li> </ul> </div>
생식 사진 :
내비게이션 (기본 스타일)
내비게이션은 프론트 엔드 사람에게는 익숙하지 않습니다. 내비게이션은 웹 사이트의 중요한 요소 중 하나이며, 사용자가 웹 사이트에서 제공하는 다양한 기능 서비스를 찾을 수 있습니다. 내비게이션 방법은 매우 다양하고 다양합니다.
내비게이션 바는 주로 ".NAV"스타일을 통해 부트 스트랩 프레임 워크에서 만들어집니다. 기본 ".NAV"스타일은 기본 탐색 스타일을 제공하지 않습니다. "Nav-Tabs", "Nav-Pills"등과 같이 다른 스타일이 효과적이어야합니다. 예를 들어, 오른쪽의 코드 편집기에 탭 내비게이션 표시 줄의 예가 있습니다. 그의 구현 방법은 UL Tag.nav 및 Nav-TAB에 두 가지 클래스 스타일을 추가하는 것입니다.
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jquery </a> </li> <li> href = "##"> Responsive </a> </li> </ul>
내비게이션 (태그 모양의 탭 탐색)
탭 탐색이라고도하는 태그 모양의 탐색. 특히 많은 내용이 청크로 표시되면이 탭을 사용하여 그룹화하는 것이 매우 적합합니다.
태그 모양의 탐색은 "Nav-TABS"스타일을 통해 구현됩니다. 태그 모양의 탐색을 만들 때 원래 탐색 "Nav"에이 유형의 이름을 추가해야합니다.
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jquery </a> </li> <li> href = "##"> Responsive </a> </li> </ul>
실제로, 위의 예의 효과는 우리가 일반적으로 보는 탭 효과와 일치하지 않습니다. 일반적으로 탭은 현재 선택을 가르칩니다. 실제로, 부트 스트랩 프레임 워크도 그에 따라 제공됩니다. "홈"항목이 현재 선택된 항목이되기를 원한다고 가정 해보십시오. 클래스 이름 "class ="active ""를 태그에 추가하십시오.
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jquery </a> </li> <li> href = "##"> Responsive </a> </li> </ul>
생식 사진 :
현재 항목 외에도 일부 탭에는 장애인 상태도 있습니다. 이 효과를 달성하려면 태그 항목에 "class ="disabled ""를 추가하면됩니다.
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jquery </a> </li> <li> href = "##"> Responsive </a> </li> </ul>
생식 사진 :
내비게이션 (알약) 내비게이션)
캡슐 모양 (알약) 내비게이션은 캡슐 모양처럼 보이기 때문에 약간 어색한 소리입니다. 그러나 그것은 우리가 일반적으로 보는 대량 탐색과 비슷합니다. 현재 항목은 둥근 코너 효과로 강조 표시됩니다. 구현 방법은 "NAV-TABS"와 유사합니다. 동일한 구조를 사용하면 클래스 이름 "Nav-Tabs"를 "Nav-Pills"로 바꾸면됩니다.
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jquery </a> </li> <li> href = "##"> Responsive </a> </li> </ul>
생식 사진 :
위에서 언급 한 것과 동일합니다!
내비게이션 (수직 스택 내비게이션)
실제로 사용하면 수평 내비게이션 외에도 이전에 소개 된 수직 배열 버튼과 마찬가지로 수직 내비게이션도 있습니다. 수직 스택 내비게이션을 만드는 데만 "Nav-Pills"를 기준으로 "NAV 스택"클래스 이름을 추가하면됩니다.
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jquery </a> </li> <li> href = "##"> Responsive </a> </li> </ul>
생식 사진 :
드롭 다운 메뉴 섹션에는 드롭 다운 메뉴 그룹과 그룹 사이에 분배기가 있습니다. 실제로, 수직 스택 내비게이션 도이 효과가 있으므로 추가하면됩니다. "
" 단지:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"jquery </a> <li> <li> <li> <li> <li> <li> href = "##"> Responsive </a> </li> </ul>
생식 사진 :
적응 형 내비게이션 (중고)
적응 형 내비게이션은 컨테이너의 전체 너비를 차지하는 내비게이션을 말하며 메뉴 항목은 테이블 셀과 같은 너비에 적응할 수 있습니다. 적응 형 내비게이션은 "BTN-Group-Justified"를 사용하여 만든 적응 버튼 그룹과 동일합니다. 다른 클래스 이름 인 "Nav-JUSTIFIED"라는 적응 형 항법을 만들 때 단지 그다. 물론 그는 "Nav-Tabs"또는 "Nav-Pills"와 함께 사용해야합니다. 좋다:
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jquery </a> </li> <li> href = "##"> Responsive </a> </li> </ul>
생식 사진 :
이것은 다른 화면입니다
내비게이션 플러스 풀다운 메뉴 (보조 탐색)
이전 예제는 부트 스트랩 프레임 워크를 사용하여 1 단계 탐색을 생성하는 것입니다. 그러나 대부분의 경우 2 단계 탐색의 효과는 웹 페이지에서 분리 할 수 없습니다. 그런 다음 부트 스트랩 프레임 워크에서 보조 탐색을보다 쉽게 만듭니다. Li를 모 컨테이너로 취급하고 클래스 이름 "Dropdown"을 사용하고 Li의 다른 목록 UL을 둥지하고 이전 드롭 다운 메뉴에 소개 된 메소드를 사용하십시오.
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"data-toggle = "dropdown"> 튜토리얼 <span> </span> </a> <ul> <li> <a href = "##"> css3 </a> <li> <a href = "##"> sass </a> </a> </li> <li> <a href = "##"> jQuery </a> </li> <li> <a href = "##"> Responsive </a> </li> <li> <a href = "##"> as Us </a> </li> </ul>
생식 사진 :
브라우저 디버깅 도구를 통해 보조 탐색으로 메뉴 항목을 클릭하면 "오픈"클래스 이름이 자동으로 추가됩니다. 다시 클릭하면 추가 된 "Open"클래스 이름이 삭제되며 드롭 다운 메뉴의 구현 원리는 동일합니다!
그런 다음 보조 내비게이션에서 구분 라인을 사용할 때 "<li class ="nav-divider "> </li>"와 같은 빈 태그 만 추가하면됩니다.
Breadcrumb Navigation
빵 부스러기는 일반적으로 내비게이션에 사용되며 주요 기능은 사용자에게 페이지의 현재 위치 (현재 위치)를 알려주는 것입니다.
<ol> <li> <a href = "#"> home </a> </a> </li> <li> <a href = "#"> 내 책 </a> </li> <li> "그림 CSS3"</li> </ol>
생식 사진 :