많은 회사들이 이제 개발에 부트 스트랩의 프레임 워크를 사용합니다. Bootstrap은 프론트 엔드 개발을 크게 단순화하는 Twitter 팀의 작업입니다. (나중에 덜 사용량을 요약하겠습니다)
API 사용을 배우는 공식 웹 사이트의 API를 직접 보는 것이 좋습니다 : http://www.bootcss.com/
다음은 몇 가지 대상 렌더링입니다.
아래는 작은 데모의 기술과 원리를 요약 할 것입니다.
첫 번째 단계는 http://www.bootcss.com/에서 압축 된 Bootstrap 패키지를 다운로드하고 새 Index.html을 만들고 Sublime 또는 다른 편집기를 사용하여 인덱스 페이지를 열면 감압 후 디렉토리가
2 단계 : 공식 웹 사이트 http://v3.bootcss.com/getting-started/에서 기본 템플릿을 복사하여 후속 개발을 용이하게합니다.
<! docType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catsible"content = "ie get"> <meta name = "viewport"contment = "width = device-width, mete-scale = 1"-위의 3 개의 태그 * 다른 컨텐츠 *를 따라야합니다! -> <title> bootstrap 101 템플릿 </title> <!-bootstrap-> <link href = "css/bootstrap.min.css"rel = "stylesheet"> <!-html5 shim and responce.js는 html5 요소와 IE8 지원을위한 IE8 지원-> <!-respone : // js가 작동하지 않습니다. <!-[LT IE 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "// cdn.bootcss.com/respond.js/1.4.2/r respont.min.js"> <! [endif]-> </head> <hod> <h1> 안녕하세요, 세계! </h1> <!-jQuery (부트 스트랩의 JavaScript 플러그인에 필요)-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <!-모든 컴파일링 된 플러그인 (아래) 포함 또는 필요에 따라 개별 파일을 포함시킵니다. src = "js/bootstrap.min.js"> </script> </body> </html>
1) 참고 : jquery.js에 대한 참조는 bootstrap.min.js 앞에 있어야하며 jquery.js를 수동으로 다운로드하여 <script src = "js/jquery.min.js"> </script>에 배치하는 것이 가장 좋습니다.
나중에 에뮬레이션 할 때 드롭 다운 및 회전식 애니메이션 효과가 사라 졌다는 것을 알았고 기본 템플릿의 jQuery 파일이 다운로드되어 인터넷에 연결되지 않았기 때문에 다운로드하지 않았습니다. 지역을 혼자 인용하는 것이 가장 좋습니다.
2) 참고 : CSS 참조는 페이지 위에 배치되고 JS 참조는 페이지 아래에 배치됩니다. CSS는 렌더링 된 페이지를 먼저로드해야하며 페이지 렌더링이 완료된 후 JS를로드하고 실행해야하기 때문입니다. 모바일 장치에 대한 메타 문은 다음과 같습니다. <meta name = "viewport"content = "width = device-width, 초기 스케일 = 1">
3 단계, 내비게이션 바
1) 센터링 효과 : 컨테이너 플랜트를 컨테이너로 변경해야합니다.
2) 대비 효과로 흰색으로 검은 색으로 변경하십시오
3) 탐색 표시 줄은 상단에 고정되어 있으며 시간 클래스 속성을 추가합니다. Navbar Fixed-Top
<av> <!-더 나은 모바일 디스플레이를 위해 브랜드와 토글을 그룹화합니다-> <div> <버튼 유형 = "버튼"데이터-토글 = "붕괴"data-target = "#bs-example-navbar-collapse-1"aria-expeded = "false"> <span> <span> </span> <span> </span> </span> </span> <a href = "#"> zootopia </a> </div> <!-토글링을위한 NAV 링크, 양식 및 기타 콘텐츠를 수집합니다 .-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#"> homepage <Span> (current) </span> </a> <a href = "<#<#<#<#<#<#<a href = 설명 </a> </li> <li> <a href = "#"> 특징 </a> </li> <li> <a href = "#"> 정보 </a> </li> </div> <!-/.navbar-collapse-> </div> <!-/.container -fluid-> </nav>
4) 내비게이션 바가 몸의 상단을 덮으므로 스타일을 추가하십시오.
<스타일 유형 = "text/css"> body {padding-top : 50px; } </style>5) 소개 된 내비게이션 항목은 드롭 다운 메뉴를 추가합니다
<li> <a href = "#"data-toggle = "dropdown"> 특징 </a> <ul> <li> <a href = "#"> 동물 1 </a> </li> <li> <a href = "#"> 동물 2 </a> </li> <li> <a href = "#"> 동물 3 </li> <li> 4 </a> </li> </li> </li>
하위 메뉴의 내용은 가장 바깥 쪽 Li 태그에 중첩되어 있으며 Li 태그에는 클래스 드롭 다운이 있으며 하위 메뉴는 UL 태그이며 클래스는 드롭 다운 메뉴입니다. 특정 매핑 관계는 위를 참조하십시오.
4 단계 : 회전 효과를 늘리고 부트 스트랩 구성 요소의 회전식 모듈을 복사하고 수정하십시오.
<div id = "carousel-example-generic"data-ride = "carousel"> <!-표시기-> <ol> <li data-target = "#carousel-example-generic"data-slide-to = "0"> </li> <li data-target = "#carousel-example-generic"data-slide to = "1"> <li> Data-target = "#carousel-example-generic"data-slide-to = "2"> </li> </ol> <!-슬라이드 용 래퍼-> <div role = "listbox"> <div> <img src = "image/1.jpg"> <div> <h1> zootopia 1 </h1> <p> 여성 주택을 방문하는 여성 집의 위치를 방문하는 위치를 확장합니다. 나라에서 발생하는 두 숫자를 열어주는 여성 주택 시청 위치의 경험 </p> </div> </div> <div> <img src = "image/2.jpg"> <div> <div> <img src = "image/2.jpg"> <div> <h1> Zootopia 1 <p> Zootopia 1 <p> 여성 주택을 방문하는 여성의 위치를 방문한 Zoosing Patips의 경험이 있습니다. 국가에서 발생하는 두 숫자 </p> </div> </div> <div> <img src = "image/3. jpg"> <div> <h1> zootopia 1 </h1> <p> 국가에서 발생하는 두 숫자를 확대하는 여성 주택 시청 위치를 확장시키는 여성 주택 시청 위치의 방문 </div> <! </div> <!-</div> <! href = "#carousel-example-generic"lole = "button"data-slide = "prev"> <span aria-hidden = "true"> </span> </span> </span> previous page </span> </a> <a href = "#carousel-example-generic"role = "data-slide ="next "> <true"> </span "> </span"> </span "> </a> </div>
1) 그림을 회전 할 때 빈 공간이나 간격이 남지 않으려면 스타일을 추가하십시오.
.carousel {높이 : 500px; 배경색 : #000; } .carousel .item {높이 : 500px; 배경색 : #000; } .carousel img {너비 : 100%; }2) 더 아름답게 만들기 위해 텍스트 스타일을 설정하십시오.
.casousel-caption p {마진-바닥 : 20px; 글꼴 크기 : 20px; 라인 높이 : 1.8; }현재 효과는 다음과 같습니다
계속하자 : (코딩이 업데이트되고 있습니다 ...)
두 번째 부분은 Bootstrap (II)를 기반으로 한 프론트 엔드 개발 케이스의 데모가 업데이트되었습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 멋진 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서