이전 기사의 레이아웃을 계속 썼습니다. 이전 기사에서는 내비게이션 바와 광고의 레이아웃을 완료했습니다.
배치 시작 :
나는 최종 렌더링이 다음과 같이 생각합니다. 나는 너무 큰 3 페이지 스크린 샷으로 나뉘 었습니다.
그런 다음 마지막으로 미완성 된 사람은 계속 될 것입니다.
5 단계 : 그리드 시스템을 추가하면 COL-MD-4의 세 열 레이아웃을 선택했습니다. 전체 그리드는 12이고 4는 12의 3 분의 1입니다. 또한 반응 적으로 레이아웃 및 여러 그리드를 설정할 수도 있습니다.
<div id = "tag_container"> <div> <div> <img src = "image/3. jpg"> <h2> 동물성 1 </h2> <p> linka 호텔은 방금 Fenghan이 큰 기념품 기관이 뒤로 전송 된 큰 기념품 기관을 보았다고 말했습니다. src = "image/3.jpg"> <h2> 동물 1 </h2> <p> Linka Hotel은 방금 Fenghan이 큰 기념품 기관을 뒤로 보냈다고 말했습니다. 그 펜건은 나에게 보낸 큰 집 검색 기관을 보았습니다 </p> <p> <a href = "#"> 클릭을 클릭하십시오 </a> </p> </div> </div> </div> </div> </div.
1) 그리드는 컨테이너 또는 컨테이너 유량 DIV에 있어야하므로 적절한 정렬 및 패딩을 자동으로 할당 할 수 있습니다.
2) ID "TAG_CONTAINER"를 만들고 클래스 COL-MD-4의 부품이 중심 및 정렬됩니다.
#TAG_CONTAINER .COL-MD-4 {TEXT-ALIGN : 중심; }6 단계 : 라인 간격을 설정하고 상단 및 하단 부품을 나눕니다.
<HR> </hr>
CSS입니다
HR .divider {마진 : 40px; }7 단계 : 탭 페이지 생성. 다음 그림은 세 탭 페이지의 렌더링입니다.
1) 탭의 원칙 페이지 :
<ul 역할 = "테이블리스트"> <li> <a href = "#an1"#an1 "roble ="tab "data-toggle ="tab "> 동물 1 </a> </li> <li> <a href ="#an2 "roby"data-toggle = "tab"> 동물성 2 </a> </li> <li> <a href = "#an3"#"#" "#" data-toggle = "tab"> 동물 3 </a> </li> </li> </ul> <div> <div id = "an1"> </div> <div id = "an2"> </div> <div id = "an3"> </div> </div>
태그 페이지 구조는 다음과 같습니다. UL 목록은 태그 및 레이블 클래스를 선언합니다.
Li 태그의 링크는 racen으로 표시되어 있습니다 = "탭"data-toggle = "탭"으로 탭 페이지의 페이지를 열 수 있도록 함수가 달성 될 수 있습니다. 각 탭 페이지의 href = "#an1"은 다음 디스플레이 레이아웃에 연결됩니다.
확장 된 레이아웃 구조 : <div>에서 각 탭 페이지에는 패널이 있습니다. 페이지를 열 수 있도록 ID는 위 탭 페이지에 맵핑됩니다. <div id = "an3">
2) 태그 페이지에 레이아웃을 추가하십시오
<ul 역할 = "테이블리스트"> <li> <a href = "#an1"#an1 "roble ="tab "data-toggle ="tab "> 동물 1 </a> </li> <li> <a href ="#an2 "roby"data-toggle = "tab"> 동물성 2 </a> </li> <li> <a href = "#an3"#"#" "#" data-toggle = "tab"> 동물성 3 </a> </li> </li> </li> <div> <div> <div> <div id = "an1"> <div> <div> <h2> Animal1 <Span> Zootopia </span> </h2> <p> AJDKGJFD는 Time Technology Aircraft에서 개발 한 시간 기술 항공기의 가격을 봅니다. 대사관 시게 오 경찰의 날이 비용이 드는 경우, KA 노래 인공 애도의 가격은 Irjeigrugitajdokgjrgi </p> </div> <div> <img src = "image/1.jpg"> </div> </div> </div> <div> <h2> <p> ajdkgjfd는 Time Technology Aircraft에서 개발 한 시간 기술 항공기를보고 있습니다. 대사관 시게 오 경찰의 날이 비용이 드는 경우, KA 노래 인공 애도의 가격은 Irjeigrugitajdokgjrgi </p> </div> <div> <img src = "image/2.jpg"> </div> </div> <div> <div> <h2> Anyamed3 <span> zootopia </span> </h2> <p> ajdkgjfd는 시간 기술 항공기의 가격을 봅니다. 대사관 시게오 경찰의 날이 발생하면 KA 노래 인공 애도의 가격이 Irjeigrugitajdokgjrgi </p> </div> <div> <img src = "image/3.jpg"> </div> </div> </div> </div>
1) 탭 페이지의 상단 여백을 설정하십시오
.feature {패딩 : 30px 0}2) 탭 페이지의 제목 글꼴 등을 설정하십시오.
.feature-heading {font-size : 50px; 색상 :#2A6496; 마진-탑 : 120px; }3) 탭 페이지의 자막 형식을 설정합니다.
.feature-heading .text-muted {font-size : 28px; 색상 : #999; }8 단계 : 하단 저작권 통지를 추가하면 렌더링은 다음과 같습니다.
<FUTER> <P> <A HREF = "#TOP"> 상단으로 돌아 가기 </a> </p> <p> 2016 Rongyu System </p> </풋러>
참고 : class = "Pull-Right"는 요소를 오른쪽으로 당길 수 있으며, 이는 Bootstrap의 CSS의 기능입니다.
9 단계 : 팝업 버튼 추가 :
<div id = "about"> <div> <div> <div> <버튼 유형 = "버튼"데이터-디스 아스 = "Modal"aria-label = "close"> <span aria-hidden = "true"> </span> </button> <h4> 정보 </h4> </div> <div> <p> zootopia "는 디스니 사진에 의해 제작되었습니다. Ginnifer Goodwin, Jason Bateman, Shakira, Allen Tuddick, Idris Elba, J.K. /.modal-content-> < /div> <!-/.modal-dialog-> < /div> <!-/.modal-dialog-> < /div> <!-/.modal->
1) 정적 팝업 창은 제목, 양식 및 버튼의 세 부분으로 나뉩니다. 그 중 하나는 하나의 버튼 만 있으면되고 다른 버튼은 댓글이 필요했습니다. 아래의 위치를 용이하게하려면 id = 추가하십시오.
2) 내비게이션 바의 메뉴 표시 줄에서 토글 링크, Data-Toggle = "Modal"을 추가하고 ID는 Data-Target = "#about"에 해당합니다.
<li> <a href = "#"data-toggle = "modal"data-target = "#about"> 정보 </a> </li>
단계 10, 메뉴 위치
탐색 표시 줄의 기능 열을 클릭하면 해당 탭 페이지가 열립니다. 이를 구현하려면 JS 코드가 필요합니다.
<script> $ (document) .ready (function () { "#demo-navbar .dropdown-menu a"). click (function () {var href = $ (this) .attr ( 'href'); // alert (href); "#탭 목록 A [href = '" + href + ");}); </스크립트>1) $ ( "#demo-navbar .dropdown-menu a")를 탐색하고 클릭 이벤트를 설정하십시오.
2) 탭 ( " 'show") $ ( "#tab-list a [href =' + href +" '] ")의 탭 페이지를 엽니 다.
이런 식으로 부트 스트랩 학습이 시작되었습니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 멋진 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.