이 클래스의 이전 섹션에서는 내부 교육 회사의 회사 웹 사이트 인 첫 번째 프로젝트를 설계하기 시작 했으며이 수업은 반응 형 탐색 부분을 배웁니다.
기본 탐색 구성 요소 + 응답 성 :
// 기본 내비게이션 구성 요소 + 응답 <nav> <div> <a href = "#"style = "margin : 0; padding : 0;"> <img src = "img/logo.png"> </a> <버튼 유형 = "버튼"Data-toggle = "CAPLAPSE"DATA-TARGET = "#NAVBAR-COLLAPSE"> SPAN VAVERIGITION </SPAN> <span> </span> </div> <div id = "navbar-collapse"> ul Style = "margin-top : 0;"> <li> <a href = "#"> <span> </span> home </a> </li> <li> <a href = "#"> href = "#"> <span> </span> case </a> </li> <li> <a href = "#"> <span> </span> about </a> </li> </ul> </div> </div> </nav>
다음 섹션에서는 내비게이션 바 아래의 회전 목마 그림을 만들어 최신 중요한 뉴스를 자동으로 재생할 것입니다.
// 반응 형 회전식 다이어그램 <div id = "myCarousel"> <ol> <li data-target = "#myCarousel"data-slide-to = "0"> </li> <li data-target = "#myCarousel"data-slide-to = "1"> </li> <li data-target = "#mycarousel"2 ">"> </li> </li> </li> </li> 스타일 = "배경 :#223240;"> <a href = "#"> <img src = "img/slide1.png"> </a> </div> <div style = "background :#f5e4dc;"> <a href = "#"> <img/slide2.png "> 스타일 = "배경 :#de2a2d;"> <a href = "#"#"> <img src ="img/slide3.png "> </a> </div> </div> <a href ="#mycarousel "data-slide ="prev "> ‹</a> <a href ="#mycarousel "next"> </a> </a> </a>
// 필수 jQuery Control $ ( '#myCarousel'). 회전식 ({// AutoPlay 설정/2 초 간격 : 3000,}); // 회전 목마 화살표 위치 $ ( '. Carousel-Control'). CSS ( 'line-height', $ ( '. carousel-innerimg'). 높이 () + 'px'); $ (wind img '). eq (2). height (); // 필수 CSSA : Focus {ontline;}. Navbar-Brand {Padding : 0;}#myCarousel {margin : 50px 0 0;}. Carousel-Inner .item img {margin : 0 auto;}. Carousel-Control {font-size;}.여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위의 내용은이 기사에 관한 모든 것이며, 모든 사람들이 부트 스트랩 프로그래밍을 배우는 것이 도움이되기를 바랍니다.