이 기사는 주로 Bootstrap의 메뉴 및 탐색을 소개합니다.
이 기사에서 시작하여 다음과 같이 JavaScript 관련 파일을 소개합니다.
<!-신체 태그 끝에 놓아 페이지를 더 빨리로드하도록합니다.
<!-부트 스트랩의 JS 플러그인을 사용하려면 먼저 jQuery를 호출해야합니다->
<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script>
<!-필요에 따라 사용할 수있는 모든 부트 스트랩 JS 플러그인 또는 JS 플러그인이 포함되어 있습니다.
<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
부트 스트랩에서 드롭 다운 메뉴 구성 요소는 독립형 구성 요소입니다. Bootstrap 구성 요소의 상호 작용 효과는 모두 jQuery 라이브러리에서 작성한 플러그인을 기반으로하므로 bootstrap.min.js를 사용하기 전에 먼저 jQuery.min.js를로드하여 적용해야합니다.
1. 풀다운 메뉴 기본 사용
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 드롭 다운 메뉴의 기본 사용 </title> <link rel = "stylesheet"href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1.1.1.1.csss/bootstrap.min. <tyle> body {margin : 50px; 패딩 : 50px;} </style> </head> <body> <div> <버튼 유형 = "버튼"id = "dropdownMenu1"drow-toggle = "dropdown"> 드롭 다운 메뉴 <span> </span> </button> <ul 역할 = "menu"arriabelledby = "dropdownmenu1"> 역할 = "menuitem"tabindex = "-1"href = "#"> menu1 </a> </li> <li 역할 = "프레젠테이션"> <A 역할 = "menuitem"tabindex = "-1"href = "#"> menu2 </a> </li> <!-메뉴 상태를 현재 상태로 설정합니다 (<li 역할 = "> rehen =" "> recone =" " tabindex = "-1"href = "#"> menu3 </a> </li> <!-메뉴 항목 상태를 비활성화 (.Disabled)로 설정합니다 (.Disabled)-> <li 역할 = "프리젠 테이션"> <A 역할 = "menuitem"tabindex = "-1"href = "#"> 메뉴 4 </a> <!-풀다 다운 디바이더-<li role = "" "" "" "" "" "" "" "" ". tabindex = "-1"href = "#"> 메뉴 4 </a> </li> <li 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> menu 4 </a> <li role = "presentation"> <a menuitem "tabindex ="-1 "href ="#"> 메뉴. 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 메뉴 6 </a> </li> </li> </li> </ul> </div> <!-문서 끝에 페이지를 더 빨리로드하려면 페이지를 더 빨리 사용하려면 jquery를 사용하려면 jquery-> < src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-부트 스트랩의 모든 JS 플러그인 또는 필요에 따라 사용할 수있는 JS 플러그인을 포함하여-> <Script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>참고 : 때로는 위쪽으로 바운스해야 할 필요가 있으므로 "드롭 다운"클래스 이름을 "드롭 다운"클래스 이름에만 추가하면됩니다.
렌더링은 다음과 같습니다.
2. 풀다운 메뉴 정렬
부트 스트랩의 드롭 다운 메뉴는 기본적으로 좌회전됩니다. 드롭 다운 메뉴를 모 컨테이너에 비해 오른쪽 정렬하려면 아래와 같이 "풀다운"또는 "Dropdown-Menu-Right"클래스 이름을 "Dropdown-Menu"에 추가 할 수 있습니다.
<!-코드와 같은 생략 된 부분 1-> ... <div> <버튼 유형 = "id ="dropdownmenu1 "data-toggle ="dropdown "> 드롭 다운 메뉴 <span> </span> </button> <ul 역할 ="menu "aria-labelledby ="dropdownMenu1 "> <li 역할 ="프리젠 테이션 "> reliUdem ="href ". 메뉴 항목 </a> </li> <li 역할 = "프레젠테이션"> <a 역할 = "menuitem"tabindex = "-1"href = "#"> 드롭 다운 메뉴 항목 </a> </li> </ul> </div> ...
렌더링은 다음과 같습니다.
3. 버튼 버튼 그룹
버튼 그룹은 또한 독립적 인 구성 요소입니다. 정상적으로 실행하려면 button.js 플러그인에 의존해야합니다. 그리고 bootstrap.js는 button.js 플러그인 함수를 통합했습니다.
사용법 : "BTN-Group"컨테이너를 사용하고 여러 버튼을이 컨테이너에 배치하십시오. 아래 그림과 같이 :
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 버튼 그룹 </title> <link rel = "stylesheet"href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1.1.1/css/boottrap.min.css"> <! 바디 {마진 : 30px; 패딩 : 30px; } </style> </head> <body> <div> <버튼 타입 = "버튼"> <span> </span> </button> <버튼 유형 = "버튼"> <span> </span> </button type = "button"> <span> </span> </span> </buttong> <버튼 <버튼 "> <span> </span 버튼> <버튼> <버튼> <버튼> < 유형 = "버튼"> <pan> </span> </button> <버튼 타입 = "버튼"> <span> </span> </button> <버튼 유형 = "버튼"> </span> </button> <button type = "button"> <span> </span> </buttong> <버튼> <버튼> <버튼> <버튼> <버튼> <버튼> 유형 = "버튼"> <pan> </span> </button> <버튼 타입 = "버튼"> <span> </span> </button> <버튼 유형 = "버튼"> </span> </button> <button type = "button"> <span> </span> </buttong> <버튼> <버튼> <버튼> <버튼> <버튼> <버튼> type = "button"> <span> </span> </button> </div> <!-문서 끝에 페이지를 더 빨리로드하려면-> <!-BootStrap의 JS 플러그인을 사용하려면 먼저 jQuery를 호출해야합니다-> <Script. src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-모든 부트 스트랩 JS 플러그인 또는 JS 플러그인을 포함하여-> <Script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>렌더링은 다음과 같습니다.
4. 버튼 - 중첩 그룹화
여러 번, 우리는 종종 탐색 메뉴와 평범한 버튼 그룹을 배열하여 탐색 메뉴와 유사한 효과를 달성합니다. 부트 스트랩 버튼의 중첩 그룹화를 사용하는 경우 드롭 다운 메뉴를 "BTN-Group"으로 만든 컨테이너 "드롭 다운"만 교체하고 일반 버튼과 동일한 레벨에 배치하면됩니다. 아래 그림과 같이 :
<!-3-> ... <div> <버튼 유형 = "버튼"> home "> home"> home "> home"> home "> home"> home "> home"> home </button> <div> <버튼 데이터-토글 = "dropdown"type = "button"> 모바일 개발 <span> </span> </button> <ul> <li> <a href = "##"> android </a> </li> <li> <a href = "#</a>"> </o </> </> </div> <버튼 유형 = "버튼"> Java 웹 개발 </button> <버튼 유형 = "button"> php 개발 </button> <버튼 유형 = "버튼"> 빅 데이터 </button> </div> ...
렌더링은 다음과 같습니다.
실제로 사용하면 수직 디스플레이 효과가 항상 발생합니다. 이 스타일은 부트 스트랩에서도 제공됩니다. 수평 그룹화의 "BTN-Group"클래스 이름을 "BTN-Group-Overtical"으로 변경하여 버튼의 수직 그룹화를 실현하면됩니다.
5. 버튼과 동등한 버튼
이퀄라이제이션 버튼 구현 방법 (적응 형 그룹화 버튼)도 매우 간단합니다. 아래와 같이 "BTN-Group-Justified"클래스 이름을 버튼 그룹 "BTN-Group"에만 추가하면됩니다.
<div> <a href = "#"> 1 세 번째 </a> <a href = "#"> 1 세 번째 </a> <a href = "#"> 1 세 번째 </a> <a href = "#"> 1 세 번째 </a> </div>
렌더링은 다음과 같습니다.
6. 내비게이션 - 기본 사용
내비게이션 막대는 주로 ".nav"스타일을 통해 부트 스트랩으로 만들어집니다. .nav ""Nav-Tabs ","Nav-Pills "등과 같은 효과적인 스타일로 다른 스타일이 부착되어야합니다.
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 내비게이션 -Basic 사용법 </title> <link rel = "stylesheet"href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1.1.1.1.csss/bootstrap.min.csssssssssssssssssssssss ssss. <style> body {margin : 30px; 패딩 : 30px;} </style> </head> <hody> <ul> <li> <## "> home </a> </a> </li> <li> <a href ="## "> News </a> </li> <li> <aviat </li> </li>> </li> <li> <a href = "##"> 포럼 </a> </a> </a> </li> <!-장애인 상태-> <li> <a href = "##"> 피드백 </a> </li> </ul> <!-문서 끝에 페이지를 더 빨리로드하려면-> <! src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-부트 스트랩을위한 모든 JS 플러그인 또는 필요에 따라 호출 할 수있는 JS 플러그인을 포함하여-> <Script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>렌더링은 다음과 같습니다.
7. 내비게이션 캡슐 (알약) 내비게이션
캡슐 (알약) 내비게이션, 현재 항목이 강조되며 둥근 코너 효과가 있습니다. 클래스 이름 "Nav-Tabs"를 "Nav-Pills"로 바꾸십시오.
<ul> <!-현재 상태-> <li> <a href = "##"> home </a> </li> <!-정지 상태-> <li> <a href = "##"> News </a> </a> </li> <li> <a href = "##"datoggle = "dropdown"> blog </span> </a> <! <ul> <ul> <! href = "##"> 프론트 엔드 블로그 </a> </li> <li> <a href = "##"> java blog </a> </li> </li> </li> <li> <a href = "##"> 포럼 </a> </li> <! <li> <a href = "#</li>">
렌더링은 다음과 같습니다.
8. 내비게이션 - 수직 스택 내비게이션
수직 스택 내비게이션을 만들려면 "Nav-Pills"를 기반으로 "NAV 스택"클래스 이름 만 추가하면됩니다.
<ul> <li> <a href = "##"> home </a> </a> </li> <li> <a href = "##"> News </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "##"> 포럼 </a> </li> <! href = "##"> 피드백 </a> </li> </ul>
렌더링은 다음과 같습니다.
9. 내비게이션 - 적응 형 내비게이션
적응 형 내비게이션 "Nav-Justified"(bootstrap.css 파일을 참조하십시오. 좋다:
<ul> <li> <a href = "##"> home </a> </a> </li> <li> <a href = "##"> News </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "##"> 포럼 </a> </li> <! href = "##"> 피드백 </a> </li> </ul>
렌더링은 다음과 같습니다.
10. 내비게이션 브레드크 럼프
Breadcrumb은 또한 일반적으로 탐색에 사용되는 독립 모듈 구성 요소이며, 주요 기능은 사용자에게 페이지의 현재 위치 (현재 위치)를 알려주는 것입니다. 사용법은 매우 간단합니다. Breadcrumb 클래스를 OL에 추가하십시오.
<ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> China </a> </li> <li> Beijing </li> </ol>
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.