나는 오늘 부츠를 배웠고 많이 얻었습니다. 나는 여기서 작은 사례를 공유합니다. 구체적인 설명은 모두 코드에 있으며, 이는 더 직관적입니다.
먼저 전설을보십시오
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport"content = "width = device-width, 초기-스케일 = 1.0"> <title> bootstrap tab </title> <!-<inlink rel = ""type "" "" href = "css/bootstrap.min.css"> <link rel = "stylesheet"type = "text/css"href = "css/bootstrap-responsive.min.css"> <link rel = "stylesheet"type = "text/css"href = "css/base <! Div ~ 940px의 중앙에 표시-> <div> <!-Hero-Unit Focus view 단위를 설정합니다-> <div> <h1> Lenovo Holdings </h1> <p> <img src = "img/bg2.png"> </p> <p> <a href = "#"</a> </p> </p> </p> </p> </p> </p> </p> </p>. 그리드 및 각 하위 디브는 4 개의 그리드, 즉 228px-> <div> <div> <h2> 회사 주제 </h2> <p> 2012 년 12 월 2 일에 Changzhou에서 개최되었으며 Liu Chuanzhi는 "최고의 선두 주자"에 대한 Entreation의 성장과 공유했습니다. 기업가 팀 ". </p> <!-BTN 버튼 스타일-> <p> <a href = "#"> 자세히 알아보십시오»</a> </p> </div> <h1> 특별한주의 </h1> <p> "컴퓨터 판매"로 시작하여 IT의 5 가지 핵심 자산, 부동산, 소비 및 현대 서비스, 새로운 화학 재료 및 현대 화학 재료 및 현대 농업 및 2014 년에 Sprining은 Sprinting이 있습니다. </p> <p> <a href = "#"> more»</a> </p> </div> <div> <h1> 우리의 역사 </h1> <p> <img/bg1.png "> </p> <p> <a href ="#"> more»</a> </p> </div> </d div> 2013 </p> </roomer> </div> <!-bootstrap의 js 파일 소개-> <script type = "text/javaScript"src = "js/jquery.min.js"> </script> <script type = "text/javascript"src = "js/bootstrap.min.js"</script> src = "js/bootstrap-tab.js"> </script> </body> </html> <!-base.css 소개->/*포커스 스타일 다이어그램*/div.hero-unit {/*배경 스타일, 기본값*/background : url (../ img/bg.png) no-repeat; 너비 : 980px; 높이 : 443px; 위치 : 상대; /*기본값은 60px*/ Padding : 0; /*기본값은 30px*/ margin : 0; Border-Color : Grey;} Div.Hero-Unit H1 {/*HIDE TITLE*/DISPLAY : NONE;}/*광고는 왼쪽 하단에 표시됩니다*/div.hero-Unit .Banner {위치 : 절대; 하단 : 0; 왼쪽 : 10px;}/*버튼은 오른쪽 하단에 표시됩니다*/div.hero-unit .btn {위치 : 절대; 하단 : 14px; 오른쪽 : 20px;}위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.