부트 스트랩의 공식 웹 사이트에서 내비게이션 바 구성 요소가 제공됩니다.
사이트 폴더에 JQ와 Bootstrap을 넣고 다음 코드를 입력하기 만하면됩니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/<title> navbar </title> <meta name = "Viewport" content = "width = device-width, 초기 스케일 = 1.0, user-scalable = no"> <link href = "css/bootstrap.css"rel = "stylesheet"media = "screen"> <script type = "text/javaScript"src = "js/jquery-1.11.js"> src = "js/bootstrap.js"> </script> </head> <body> <div> <nav roble = "navigation"> <div> <div> <버튼 유형 = "button"data-toggle = "collapse"data-target = "#bs-example-navbar-collapse-1"> </span> </span> </span> </span> </span> <span> </span> </span> </button> <a href = "#"> brand </a> </a> </a> </a> </a> </a> </a> </div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#"> link </a> </li> <li> <a href = "#"> </li> </li>> </li> </li> </li> <<a <<a <<<a <<a </li> <a href = "#" data-toggle = "dropdown"> dropdown <span> </span> </a> <ul> <a href = "#"#"dato-toggle ="dropdown "> dropdown <span> </span> </a> <ul 역할 ="메뉴 "> <li> <a href ="#"> action </a> <li> <a href ="#"> 다른 행동 </a"> href = "#"> 여기에 다른 것들 </a> </li> <li> </li> <li> </li> <li> <a href = "#"> 분리 된 링크 </a> </li> <li> </li> <li> <a href = "#"> 분리 된 링크 </a> </li> <li> <li> <a href = "#"#"> </ul> </양식 역할 = "검색"> <div> <입력 유형 = "텍스트"자리 표시기 = "검색"> </div> <버튼 유형 = "제출"> 제출 </button> </form> <ul> <li> <a href = "#"> link </a> </li> <li> <a href = "#> </ul dropdown"> dropdown "> 역할 = "menu"> <a href = "#"> Action </a> </li> <li> <a href = "#"> 또 다른 행동 </a> </li> <li> <a href = "#"> 여기에 다른 것들 </a> </li> <li> </li> <li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </ul> </div> </div> </nav> Asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
창 크기에 따라 다를 수있는 탐색 표시 줄을 얻을 수 있습니다.
<nav robe = "navigation"> to <nav role = "navigation">에서 클래스 값을 변경할 수 있으며 웹 페이지 상단에 네비게이션 바가 매달려 있습니다. 창이 어떻게 드래그하든 클래스 값을 <nav role = "navigation"으로 변경하면 검은 색 탐색 막대를 얻을 수 있습니다.
매우 유용 해 보이지만 단점은 매우 치명적입니다. 이 내비게이션 막대에서 제공하는 색상에 관계없이 흰색과 검은 색, 두 가지 색상입니다. 가장 끔찍한 것은 내비게이션 바가 IE8의 전화기에 직접 표시되지만 화면 해상도 1440x900보다 낮다는 것입니다. IE8이 IE6이 아니라 Win7 시스템의 기본 브라우저라는 것을 알아야합니다.
이로 인해 사용자는 탐색 표시 줄에서 항목을 선택하여 오른쪽의 버튼을 클릭 한 다음 드롭 다운 메뉴가 다음과 같습니다.
웹 페이지 컨텐츠를 전체 조각으로 직접 끌어 내도록하십시오. IE8이 Win7의 기본 브라우저라는 점은 주목할 가치가 있습니다. 중국에서 IE6의 절대 핵심 위치에 관계없이, 점점 더 많은 사용자가 Win7을 선택하는 맥락에서도 IE8의 호환성은 여전히 고려해야 할 질문입니다.
따라서 웹 사이트 탐색으로 이러한 종류의 탐색 표시 줄 만 선택할 수 있다면 두 가지 유형의 부트 스트랩이 있으며, 이는 다른 스타일과 함께 대체물로 사용할 수있는 두 가지 유형의 부트 스트랩이 있습니다. 하나는 탭 페이지이고 다른 하나는 버튼 그룹입니다. 소위 Breadcrumb Navigation Bar는 좋은 솔루션이 아닙니다. 드롭 다운 메뉴는 부트 스트랩에 버튼으로 제공되어야하기 때문입니다. 텍스트로 기록되면 IE8에서도 감사합니다. 물론, 당신은 완전히 부트 스트랩을 제쳐두도록 선택할 수 있으며, 마스터스의 CS는 스스로 필기하고 프레임을 내려다 본다.
1. 태그 페이지
태그의 기본 스타일은 다음과 같습니다. bootstrap.js, bootstrap.css 및 jq의 지원이 필요한 드롭 다운 메뉴가 있습니다.
태그 페이지는 브라우저 크기로 변경되지 않습니다
한 웹 페이지 내에서 전환하거나 다른 페이지로 이동할 수 있습니다. 탐색하는 것이 좋습니다. 탭 페이지의 링크는이 페이지와 동일한 레이아웃이있는 다른 웹 페이지로 이동합니다. 즉,이 탭 페이지도 존재하며 동일한 위치가 있습니다.
코드는 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> togglabletabs </title> <meta name = "viewport" content = "width = device-width, 초기 스케일 = 1.0, user-scalable = no"> <link href = "css/bootstrap.css"rel = "stylesheet"media = "screen"> <script type = "text/javaScript"src = "js/jquery-1.11.js"> src = "js/bootstrap.js"> </script> </head> <body> <div> <ul 역할 = "TACKIST"> <!-하나의 태그 만 태그에서 활성 상태를 가질 수 있습니다-> <li role = "presentation"> <!-이 페이지의 홈 레이어를 건너 뛰는 것이 권장되지 않았다고 생각했습니다. 역할 = "tab"data-toggle = "tab"> home </a> </a> </a> </li> <li role = "presentation"> <a href = "#profile"robel = "탭"data-toggle = "tab"> profile </a> </li> <li 역할 = "프리젠 테이션"> <a href = "#profile"ab "탭"탭 "</<li role ="> </>>>>>>>>>>>>>>>>>>>>>>>>>>>>> <li rec = "tab"ab. href = "#message"robol = "tab"data-toggle = "tab"> 메시지 </a> </li> <li 역할 = "프레젠테이션"> <a href = "#href ="#setings "robiel ="tab "data-toggle ="tab "> 설정 </a>-드롭 다운 메뉴를 작성하는 방법을 포함하여 </li> <! <!-드롭 다운 메뉴의 작은 삼각형-> 드롭 다운> </span> </span> </a> <ul 역할 = "메뉴"> <li 역할 = "프레젠테이션"> <a href = "#home"robol = "tab"data-toggle = "tab"> home </a> </li> <li 역할 = "프레젠테이션"> href = "tab" "tab" "tab" "a hepggle =" " </li> <li 역할 = "프레젠테이션"> <a href = "#href ="#message "robile ="tab "data-toggle ="tab "> 메시지 </a> <li robol ="presentation "> <a href ="#설정 "aby"ab "data-toggle ="tab "> setingss </a> </ul> <!- 다른 페이지에 똑같이 느껴집니다. 점프가 없습니다. 이런 식으로 웹 페이지의 코드가 한 페이지에 집중되지 않도록 코드를 분리하십시오-> <li role = "presentation"> <a href = "back.html"roble = "tab"> 다른 페이지 </a> </li> </li> </ul> <!-탭 페이지 가이 페이지의 레이어로 점프하면 여기에 레이어의 내용을 작성하십시오. -> <div> <div robel = "tabpanel"id = "home"> home </div> <div robel = "tabpanel"id = "profile"> profile </div> <div role = "tabpanel"id = "messages"> 메시지 </div> <div 역할 = "tabpanel"id = "setting"> setingss </div> </html> </html> </html>
2. 버튼 그룹을 선택하십시오
이 단락은 주로이 구성 요소에 대한 나의 이해가 충분히 철저하지 않기 때문에 반복해서 변경되었습니다.
페이지를 다루는 선택 버튼 그룹의 기본 스타일은 다음과 같습니다.
브라우저의 크기에 따라 변경됩니다. 물론, 극단으로 압축 될 때, 부트 스트랩과 함께 제공되는 탐색 막대 나버라처럼 닫히지 않고 버튼에 조용히 누워 있습니다.
이 선택 버튼 그룹은 의심 할 여지없이 IE8과 호환되지만 드롭 다운 메뉴가없는 버튼 그룹은 실제로 <button> 태그 대신 <a> 태그를 사용하는 하이퍼 링크이지만 일반 <a> 태그와 비교 하여이 <a> 태그의 클래스의 버튼 코드를 참조하십시오. 세부 사항은 코드를 참조하십시오. 이 버튼 그룹의 코드는 정말 특별합니다.
특정 코드는 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/<title> 버튼 그룹 버튼 그룹 </title> <meta name = "viewport" content = "width = device-width, 초기 스케일 = 1.0, user-scalable = no"> <link href = "css/bootstrap.css"rel = "stylesheet"media = "screen"> <script type = "text/javaScript"src = "js/jquery-1.11.js"> src = "js/bootstrap.js"> </script> </head> <body> <!-전체 페이지를 채우려면 버튼 그룹이 필요합니다-> <div> <div> <!-이 방법을 작성하기 위해 드롭 다운 메뉴가없는 버튼을 쓰십시오. </div> <div> <button "> 오른쪽 </div> </div> <!-드롭 다운 메뉴와 함께이 버튼을 쓰십시오-> <div> <버튼 유형 ="버튼 "Data-toggle ="dropdown "> dropdown"> dropdown "> dropdown </span> </button> <ul Role ="menu "> <li> <a href ="#"> dropdown link </a> <<a href ="<a href = "<a href <a href <a href". 링크 </a> </li> </ul> </div> </div> </body> </html>
3. 패널에 테이블을 추가하고 일반 하이퍼 링크 텍스트로 내장
가장 일반적이고 가장 간단한 것은 종종 가장 실용적인 것들이지만 테이블은 페이지를 12 피스 그리드 시스템으로 나누는 대신 레이아웃에 사용됩니다. 12 개의 사본이 발생했기 때문에 5 개의 사본과 같은 일부 열은 균등하게 배포하기가 쉽지 않았습니다.
이 패널은 Bootstrap에서 제공하는 패널 요소를 사용하며 창 크기에 따라 자동으로 조정할 수도 있습니다.
이 코드는 위의 두 솔루션보다 훨씬 간단하지만 동시에 눈부신 것은 아닙니다. 그러나 정말 간단하고 실용적입니다.
<!-이 노드는 무시할 수 있습니다. 스크린 샷을 위해 컨테이너 컨테이너에 배치되며 전체 창을 채우지 않습니다-> <div> <!-바디의 패널은 스타일을 바꾸면 테두리 색상 만 변경됩니다.> <div> <div 스타일 = "Text-Align : Center"> <table> <tr> <!-6 개 항목이라면 Bootstrap 래스터 시스템을 사용할 수 있습니다. 7 개 항목 인 경우 셀은 크기의 100/7 = 14%를 차지합니다. -> <td> <a href = "#"> project 1 </a> </td> <td> <a href = "#"> project 2 </a> </td> <td> <a href = "#"> project 3 </a> </td> <td> <a href = "#"> project 4 </a> <a <a <a href = "> 5 </a> </td> </table> </div> </div> </div>
위의 세 가지 솔루션은 IE8의 부트 스트랩 내비게이션 바 Navbar의 결함을 해결하기위한 솔루션입니다. 나는 개인적으로 첫 번째 유형이 약간 희귀하고 대안이라고 생각합니다. 두 번째 유형은 저자의 가장 권장되는 것이며 세 번째 유형은 양식에서 사용해야합니다. 당신이 그것을 피할 수 있다면, 그것을 피하십시오. 선택 버튼 그룹을 패널에 배치하여 세 번째 유형의 텍스트 및 테이블 내용을 교체 할 수 있습니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.