앞에 쓰십시오
이 기사에서는 내가 만든 풍경 웹 페이지를 기반으로 부트 스트랩 사용에 대해 이야기하겠습니다. 웹 페이지 스크린 샷은 다음과 같습니다.
전체 웹 페이지의 효과와 코드는 여기에서 보거나 CodePen에서 볼 수 있습니다. 웹 페이지를 달성 해야하는 주요 효과에는 다음이 포함됩니다.
1. 로그인 및 등록 모달 상자를 클릭 한 후 내비게이션 바의 로그인 및 등록 버튼이 팝업되며 로그인 및 등록 창을 전환 할 수 있습니다. 메뉴 표시 줄은 반응합니다
2. 내비게이션 막대의 조경 옵션을 철수 할 수 있습니다. 드롭 다운에서 Jiuzhaigou Lijiang Water Curtain 동굴을 클릭하여 해당 탭을 찾습니다.
3. 대형 스크린 슬라이드 쇼 카로셀
4. 탭 페이지를 켜려면 클릭하십시오
이제 우리는 부트 스트랩을 받아들이 기 시작합니다.
나는 친구들이 부트 스트랩에 대해 들었거나 그것을 사용했다고 생각합니다. 이 웹 페이지에서는 CDN 부트 스트랩 v3.3.4를 사용합니다. Bootstrap v3.3.5의 최신 버전을 다운로드하려면 여기를 클릭하거나 여기를 클릭하여 공식 웹 사이트에서 다운로드하십시오. 나는 항상 당신에게 어울리는 사람이 있다고 생각합니다 ~~~~~~
이 기사에서는 먼저 내비게이션 바에 대해 이야기 해 봅시다.
내비게이션 바
BS를 사용하기 전에 먼저 CSS 및 JS를 포함한 BS를 참조해야합니다. 참조 메소드는 일반 외부 파일을 참조하는 것과 동일한 매우 간단합니다. CDN 링크를 사용하거나 로컬 참조로 배치 할 수 있습니다. 코드는 다음과 같습니다.
<html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catsible"content = "ie = edge"> <meta name = "viewport"content = "width = device-width, Initial-Scale = 1"> myvin 's landsape rel = ""styleshet " href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-html5 shim and respons.js는 html5 요소 및 미디어 쿼리의 지원에 대한 html5 shim and respons.js를 위해-> <! 9]> <script src = "http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "http://cdn.bootcss.com/resption.js/1.4.2/renpent.min.js" <!! src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
이 풍경 웹 페이지 예제에서는 CDN 링크를 사용합니다.
동시에 BS 플러그인은 JQ를 기반으로하기 때문에 JQ도 소개해야합니다.
먼저 탐색 표시 줄의 전체 코드를 제공하십시오
<av> <div> <!-브랜드와 토글은 더 나은 모바일 디스플레이를 위해 그룹화됩니다-> <div> <button type = "button"data-toggle = "data-toggle ="collapse "data-target ="#bs-example-navbar-collapse-1 "> <span> 토글 navigation </span> <span> </span> </span> <span> </span> <an span> <an. href = "#"> 상표를 정의합니다 </a> </div> <!-왼쪽 상단 코너에서 내비게이션-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#"> homepage <span> (현재) </span> </a> <li> 역할 = "button"aria-expanded = "false"> 풍경 </span> </span> </a> </a> <ul 역할 = "메뉴"> <li> <a href = "#jiuzhaigou"> jiuzhaigou </a> </li> <a href = "#lijiang"> lijiang </a> </li> <li> href = "#shuilianong"> shuijian 동굴 </a> </li> <li> </li> <li> <a href = "#shuilianandong"> shuijian cave </a> <li> </li> <li> <a href = "#"> more .. data-target = "#about"> <a href = "#"> about </a> </li> </ul> <form 역할 = "검색"> <div> <입력 유형 = "text"placeholder = "어트랙션 검색 .."> <버튼 유형 = "button"> go </button> </div> </form> <ul> <li dato-toggle = "modal" "#-Sipal"#-Sipal "#-Sipal". id = "signin-button"> <a href = "#"> 로그인 </a> </li> <li data-toggle = "modal"data-target = "#signin-signup-tab"id = "signup-button"> <a href = "#"> register </a> </li> </div> </div> </nav>
BS의 내비게이션 구성 요소는 모두 동일한 .NAV 클래스에 의존하며 코드는 별도로 설명됩니다. 이 단락을 먼저 살펴 보겠습니다.
<버튼 유형 = "버튼"data-toggle = "붕괴"data-target = "#bs-example-navbar-collapse-1"> <span> 토글 탐색 </span> <span> </span> </span> <span> </span> </button>
이 코드의 목적은 뷰포트를 줄이고 내비게이션 막대의 메뉴 옵션이 붕괴되고 붕괴 아이콘을 클릭하면 탐색 표시 줄의 메뉴 옵션이 수직으로 정렬됩니다. NAV 의 .navbar inverse 클래스는 역 색상입니다. 친구는 .navbar inverse 클래스를 제거하여 효과를 관찰 할 수 있습니다. 나는 검은 색 컨트롤이기 때문에 여기에서 거꾸로 된 색상을 사용합니다. 다른 색상 인 Rich Gold를 사용하려면 친구는 자신의 취향에 따라 일치 할 수 있습니다. .navbar-brand 클래스는 자신의 웹 사이트의 상표를 정의하는 데 사용될 수 있습니다. 여기에서 상표를 정의하기 위해 텍스트를 사용하겠습니다. 관심있는 친구들은 자신의 로고를 추가 할 수 있습니다. .dropdown-toggle 클래스는 풀다운을 구현할 수 있으며 .divider 클래스는 밝고 어두운 분할 선을 구현할 수 있습니다.
이름에서 알 수 있듯이 검색 상자의 .navbar-right 클래스 및 로그인 및 등록은 오른쪽에 있습니다.
데이터 속성
여기서 BS의 데이터 속성에 대해 이야기해야합니다. BS에서 개발자는 데이터 속성을 통해서만 BS의 모든 JS 플러그인을 사용할 수 있습니다. 이것은 BS의 일류 API이며 종종 JS 플러그인을 사용하는 선호하는 방법입니다. 예를 들어, Data-Toggle = "Collapse" 및 Data-Toggle = "Dropdown" 은 BS에서 JS 플러그인을 사용하는 방법입니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 부트 스트랩 내비게이션 바를 배우는 것이 도움이되기를 바랍니다.