1 : 부트 스트랩 소개
Boostrap은 프론트 엔드 팀의 개발 효율성을 크게 향상시키는 매우 인기있는 프론트 엔드 개발 프레임 워크입니다. Bootstrap은 공통 CSS 레이아웃 구성 요소와 JavaScript 플러그인을 완성하므로 개발자가 쉽게 사용할 수 있습니다. 부트 스트랩을 사용하여 아름답게 반응하는 페이지를 빠르게 만들고 모바일 장치와 호환됩니다.
두 가지 : 부트 스트랩 기능
CSS 플러그인, 풍부한 사전 정의 된 스타일 시트, jQuery 기반 JS 플러그인 테이블 세트를 제공하십시오. 유연한 반응 형 그리드 삭제 시스템. Less and Sass를 기반으로 한 모바일 최초 개발.
셋째 : 부트 스트랩을 사용하십시오
1 단계 1 :
http://www.bootcss.com/에서 최신 부트 스트랩을 다운로드하십시오. 감압 후, CSS, JS 및 글꼴을 각각 배치하는 3 개의 폴더가 있습니다. CSS 및 JavaScript 파일의 압축 버전이 있으며 필요에 따라 버전을 선택할 수 있습니다. 압축되지 않은 버전은 개발 중에 사용되며 압축 버전은 릴리스 중에 사용됩니다.
2. 고정 템플릿 코드 디스플레이
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua compatible"content = "ie edge, chrome = 1"> <!-IE = ater는 최신 엔진을 사용하여 웹 페이지를 렌더링하도록 지시합니다. 이름 = "viewport"content = "width = device-width, 초기 스케일 = 1"> <!-위의 세 가지 메타 태그 *는 미래에 배치해야하며 다른 컨텐츠 *를 따라야합니다! -> <title> 부트 스트랩 템플릿 스타일 </title> <!-부트 스트랩 소개-> <link href = "css/bootstrap.min.css"rel = "Stylesheet"> <!-IE8 및 IE9를 지원하기 위해 html5 프레임 워크 및 응답. IE 8은 미디어 쿼리에 대한 지원을 달성하기 위해 Respons.js의 협력이 필요합니다. respond.js는 파일에서 더 이상 실행할 수 없습니다 : // 경로 파일 : //-> <!-[Lt IE 9가 IE9-> <!-[LT IE 9]> <SCRIPT SRC = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.jscrict. src = "// cdn.bootcss.com/respone.js/1.4.2/respent.min.js"> </script> <! [endif]-> </head> <h1> 안녕하세요, 세계! </h1> <!-부트 스트랩 동적 효과를 달성하기 위해 하단의 jQuery 플러그인을 인용하십시오-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js">/script>/-introfrodureing bootsrp scripts-> src = "js/bootstrap.min.js"> </script> </body> </html>
3. 기본 사용 :
3.1 전체 프레임 워크 -12 그리드 시스템
Bootstrap의 핵심은 12 번의 탑 시스템입니다. 12 그리드 시스템은 웹 페이지의 컨텐츠 영역을 너비에 따라 12 개의 사본으로 나눕니다. 웹 개발자는 부분적으로 자유롭게 결합하여 웹 페이지의 레이아웃을 용이하게하고 레이아웃을 깔끔하고 표준화하게 만듭니다.
BootStarp는 컨테이너라는 스타일 컨테이너를 제공합니다. 컨테이너는 자동 중심의 고도로 적응 형 스타일입니다. .Container를 가장 바깥 쪽 DIV 스타일의 웹 페이지 컨텐츠로 사용하면 12 그리드 웹 페이지 레이아웃을 쉽게 구현할 수 있습니다. 또한이 12 그리드 시스템은 화면 크기에 적응하고 .Container는 화면 크기에 따라 그리드의 총 폭과 평균 너비를 자동으로 조정합니다.
col-lg-n 최대 열 너비 95px> = 1200px 픽셀의 경우 .container12를 부분 당 너비 95px로 균등하게 나눕니다. 나머지 너비는 100%입니다.
col-md-n 최대 너비 78px; .container12를> = 992px 픽셀로 균등하게 나눕니다.
col-sm-n 최대 열 폭 60px> = 768px 픽셀의 경우.
col-xs-n 열 너비는 뷰포트 크기 12와 같습니다. 컨테이너 12 크기의 화면과 동일합니다.
3.2 기본 스타일
(1) Bootstrap의 H1-H6 스타일은 대담하게 취소되었으며 상단 및 하단 여백은 H1-H3 마진 탑 : 20px; 마진-바닥 -10px; H3-H6 마진 탑 : 10px; 마진-바닥 -10px;
(2) 4 가지 정렬 스타일, 즉 .Text-left, .Text-center, .Text-Right, .Text-Justify .Text-Justify 영어 문자의 양쪽 끝을 정의하십시오.
(3) 부트 스트랩은 5 개의 기본 색상 스타일, -프라이팬 키 블루, -서식 성공 Green, -info 정보 청색 경고 오렌지, -위험한 빨간색을 제공합니다.
3.3BTN 구성 요소 +BTN-Group
<button type = "button"class = "btn btn-primary"> 키 버튼 </button> 경고 구성 요소 <div class = "alert"class = "Alert Alert Danger"> 위험 경고 </div>
일반적인 구성 요소에는 초소형 XS, 소형 SM, 일반 및 대형 LG의 네 가지 크기가 있습니다. 이 메소드 사용 메소드는 구성 요소 이름 크기 <버튼 유형 = "button"class = "btn btn-lg"> 초대형 버튼 </button> 동일한 구성 요소의 다른 유형의 버튼을 조합하여 사용할 수 있습니다.
<버튼 유형 = "버튼"클래스 = "BTN BTN-PRIMARY BTN-LG"> 초대형 키 버튼 </button> <!-btn-group-> <div> <버튼> </button> <버튼> 두 번째 페이지 </button> <버튼> 페이지 2 </button> <버튼> 마지막 페이지 </button> <버튼 타입 = "버튼"> 데이터-줄기 = ""제품- 목록 <span> </span> </button> <ul> <li> Lenovo </li> <li> Asus </li> <li> Apple </li> </ul> </div>
3.4table 테이블 스타일 :
테이블 요소에 div 부모 요소를 추가 하고이 div에 class = "테이블 응답"을 추가하여 해당 테이블을 만듭니다. 뷰포트 픽셀이 768px 미만인 경우 수평 스크롤 막대가 나타납니다.
<!-테이블, 테이블 스트리핑 목록 사이에 간격이 있습니다. 적응-> <div> <table> <tr> <td> 1 </td> <td> 1 </td> <td> 1 </td> <td> 1 </td> </tr> <tr> <td> 2 </td> <td> 2 </td> <td> 2 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td> 3 </td> <td> 3 </td> <td> 3 </td> </tr> </table> </div>
3.5Badge 배지
<!-배지 배지-> <br/> <a href = "#"> 특수 간호 <span> 42 </span> </a> <br/>
3.6 내비게이션 바
(1) 캡슐 내비게이션 바
<ul> <li> <a href = "#"> dynamic <span> 42 </span> </a> </a> </a> </a> </li> <li> a href = "#"> 프로파일 </a> </li> <li> <a href = "#"> 개인 메시지 <span> 3 </span> </a> </ul>
(2) 레이블 내비게이션 바
<!-태그 탐색 메뉴-> <ul> <li> <a href = "#news1"data-toggle = "tab"> 회사 뉴스 </a> <li> <a href = "#news2"data-toggle = "탭"> 업계 뉴스 </a> </li> <li> <a href = "#News3" Data-Toggle = "Tab"> 알림 </a> </li> </li> </li> </ul> <div> <div id = "news1"> ul> <li> 회사 뉴스 </li> </ul> </div> <div id = "news2"> <ul> <li> 업계 뉴스 </li> <li> </li> </ul> <div id = "news3"> <li> 공지 </li> <li> 통지 공지 </li> <li> 통지 공지 </li> </ul> </div> </div>
3.7 입력 그룹
<!-입력+버튼 조합-> <div> <입력 유형 = "text"> <span> <button> 검색 </button> </span> </div>
3.8 회전 목마
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catsible"content = "iege = edge, chrome = 1"> <meta name = "viewport"content = "width = device-width, 이니셜 템터, 이니셜-템플릿. 스타일 </title> <link href = "../ css/bootstrap.min.css"rel = "stylesheet"> <sty> body {backgring : #eee} .item {위치 : 상대; 높이 : 400px} .item img {위치 : 상대; 너비 : 100%; 높이 : 400px} .item p {위치 : 절대; 상단 : 40%; 너비 : 100%; 색상 : #fff; } .item h1 {위치 : 절대; 상단 : 20%; 너비 : 100%; 색상 : #fff; Text-Align : Center} @Media (max-width : 768px) {.Slide {width : 100%}} </style> <!-[LT IE 9]> <Script SRC = "../ js/js/html5shiv.min.js"> src = "../ js/respon.min.js"> </script> <! data-ride = "carousel"> <!-슬라이드 탐색-> <ol> <li data-target = "#myCarousel"data-slide-to = "0"> </li> <li data-target = "#myCarousel"data-slide-to = "1"> </li> <li data-target = "#myCarousel"Data-Slide-to = "> </li>/li>/li> data-target = "#mycarousel"data-slide-to = "2"> </li> </ol> <div style = "height : 400px"> <!-첫 번째 슬라이드-> <div style = "height : 400px"> <img data-holder-rendered = "true"src = "../ images/icon1.png"> <h1> 컨텐츠 </p> <!-슬라이드 제목-> <div> title 1 </div> </div> <!-두 번째 슬라이드-> <div> <IMG Data-Holder-Rendered = "true"src = "../ images/icon2.png"> <div> tittit2 </div> </div> <!-3 번째 슬라이드-> </div> <img data-holder-render = "true" src = "../ images/icon3.png"> <div> title3 </div> </div> <!-라이브 오른쪽 탐색-> <a href = "#mycarousel"data-slide = "prev"> <span aria-hidden = "true"> </span> <span> previous </span> <a href = "#myCarousel" "data-slide" aria-hidden = "true"> </span> <span> next </span> </a> </a> </div> </div> <cript> $ (function () {$ ( '#mycarousel'). on ( 'slide.bs.carousel', function () {// alert ( "Callback function");}); </body> </body> </html>3.9 패널 그룹
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> bootstrap 인스턴스- 탭 페이지 (탭) 플러그인 </title> <link rel = "stylesheet"href = "../ css/bootstrap.min.css"> src = "../ js/jquery.min.js"> </script> <script src = "../ js/bootstrap.min.js"> </script> <body> <div id = "div id ="panel-group "> <!-패널 컨텐츠-> <div> <div> <h4> <a data-toggle ="데이터 렌트 = "Panel-Group" "#panporoup"#panparent. href = "#collapseone"> 패널 제목 </a> </a> </h4> </div> <div id = "collapseone"> <div> 패널 컨텐츠 </div> </div> <!-패널 컨텐츠 열기-> <div> <div> <h4> <a data-toggle = "collapse"data-parent = "#panel-group"href = "#panel 제목 </a> </h4> </div> <div id = "collapsetwo"> <div> 패널 컨텐츠 </div> </div> </div> </body>
3.10 미디어 쿼리
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport"content = "maximum-scale = 1.0, 최소 스케일 = 1.0, 사용자-스케일 가능 = 0, width = device-width, 이니셜 스케일 = 1.0. 100%; 높이 : 200px; 배경색; 배경 색 : 빨간색;}/*최대 창백한 너비가 980px 일 때, 구개 가능한 <= 980px 내부 스타일이 적용됩니다*/@media (max-width : 320px) {div-size : 10px; 배경 : 옐로우;}} </head> <Body> <Body> query </div> </body> <cript> wind4 : 주목할만한 것들
1. 컨테이너, col - (래스터)는 별도의 div로 감싸고 다른 내용을 정의해야합니다.
2. 미디어 쿼리에 대해 정의 할 수없는 클래스 또는 ID를 설정하려면 요소에 대해 정의 할 수없고 정의 col- (raster)의 클래스 또는 ID를 div에 쓸 수 없습니다.
Medio는 미디어 쿼리를 정의하기위한 클래스 오류를 작성하는 방법입니다. <div> aa </div>
글을 쓰는 올바른 방법은입니다
<div> <div> aa </div> </div>
3. 컨테이너를 사용하여 높이 적응을 달성하는 경우 요소에 높이를 추가 할 수 없으며 부모 요소에 오버플로 숨겨져 있어야합니다.
4. 요소의 위치 위치 설정을 설정할 때 요소의 너비는 0입니다. 요소를 중앙에 놓으려면 너비를 추가해야합니다 : 100%; 텍스트 정렬 : 센터;
5. 입력 태그를 사용하는 경우, col- (래스터)가 상위 클래스에 대해 정의 된 경우 입력에 폼 제어를 추가하여 입력의 크기를 부모 클래스만큼 큰 설정으로 설정할 수 있습니다.