부트 스트랩이란 무엇입니까?
Bootstrap은 웹 응용 프로그램 및 웹 사이트의 빠른 개발을위한 프론트 엔드 프레임 워크입니다. Bootstrap은 HTML, CSS 및 JavaScript를 기반으로합니다.
역사
Bootstrap은 Twitter의 Mark Otto와 Jacob Thornton에 의해 개발되었습니다. Bootstrap은 2011 년 8 월 Github에서 출시 된 오픈 소스 제품입니다.
최근에 여가 시간이 많습니다. 오늘 저는 프론트 엔드 "스타일"프레임 워크 -Bootstrap을 소개하겠습니다.
1. 부트 스트랩 전체 아키텍처
소개에서 왜 Bootstrap을 프론트 엔드 스타일 프레임 워크로 호출합니까? 어쩌면 그러한 타이틀은 그다지 정확하지는 않지만, 그러한 제목으로 인해 일부 초보자는 부트 스트랩이 무엇인지 이해하고 이해할 수 있다고 생각합니다. 나는 고급 단어를 사용하여 특정 지식에 대한 이해를 심화시키는 것을 좋아하지 않고 대신 이해하기 쉬운 단어를 사용하여 지식 요점을 설명하는 것을 선호합니다. 그러한 설명은 약간 부정확 할 수 있지만, 그 설명은 초보자 가이 지식을 더 빨리 이해할 수 있기 때문에 큰 문제는 아니라고 생각합니다. 지식 포인트를 배우고있을 때 혼란 스러웠 기 때문에 일부 공식 지식 문서는 너무 높았습니다. 사실, 그것을 무뚝뚝하게 말하면, 그것은 과거의 일부 일 뿐이고 개발을보다 쉽고 빠르게 개발하기 위해 캡슐화되었습니다. 그래서 여기서 나는 부트 스트랩 프레임 워크가 동일하다는 것을 공유합니다. 또한 컨텐츠 조직은 초보자가 더 나은 마스터 할 수 있도록 의도되었습니다. 내가 처음 접촉하기 시작했을 때, 나는 또한 초보자였습니다. 이런 조직 방식은 지식을 더 빠르고 더 잘 이해하는 데 도움이 될 수 있다고 생각합니다.
부트 스트랩의 경우 먼저 전체 아키텍처를 소개해야합니다. 정확히 무엇을 구성합니까? 아래 그림을 보면 Bootstrap에서 정확히 무엇을 구성하는지 빠르게 이해할 수 있다고 생각합니다.
위 그림에서 부트 스트랩은 주로 다음 부분으로 구성되어 있음을 분명히 알 수 있습니다.
12 그리드 시스템 - 화면을 12 개의 사본 (열)으로 나누는 것입니다.
행을 사용하여 요소를 구성한 다음 (각 행에 12 열 포함)를 구성한 다음 열에 열에 내용을 놓습니다.
COL-MD- 오프셋-*에 의한 제어 열 오프셋.
기본 레이아웃 구성 요소 - 부트 스트랩은 다양한 기본 레이아웃 구성 요소를 제공합니다. 조판, 코드, 양식, 버튼, 양식 등과 같은 등
jQuery — Bootstrap 모든 JavaScript 플러그인은 jQuery에 의존합니다. 이 JS 플러그인을 사용하려면 jQuery 라이브러리를 참조해야합니다. 또한 부트 스트랩의 JS 파일 및 CSS 파일을 참조하는 것 외에도 jQuery 라이브러리를 참조 해야하는 이유입니다.
CSS 구성 요소 -Bootstrap은 우리를 위해 많은 CSS 구성 요소를 사전에 구축했습니다. 상자, 버튼 그룹, 내비게이션 등을 조립합니다. 즉, 부트 스트랩 컨텐츠는 많은 CSS 스타일을 정의하는 데 도움이되었으며 이전 드롭 다운 상자와 같은 요소에 이러한 스타일을 직접 적용 할 수 있습니다.
JavaScript 플러그인-부트 스트랩은 또한 우리를 위해 일부 JS 플러그인을 구현합니다. 프롬프트 상자 및 모달 창과 같은 효과를 달성하기 위해 JS 코드를 다시 작성하지 않고도 공통 기능을 완료하기 위해 제공 한 플러그인을 사용하여 공통 기능을 완료 할 수 있습니다.
반응 형 디자인 - 이것은 디자인 개념입니다. Responsive는 화면 크기에 따라 페이지를 자동으로 조정하여 프론트 엔드 페이지가 다양한 크기의 화면에서 잘 작동 할 수 있음을 의미합니다.
부트 스트랩은 위의 부분으로 구성됩니다. 위의 내용은 각 구성 요소에 대한 간단한 소개를 제공했으며 다음 내용은 일부 예제를 통해 각 구성 요소에 대한 자세한 소개에 지나지 않습니다.
2. 12 그리드 시스템
부트 스트랩은 더 나은 레이아웃을 위해 12 그리드 시스템을 정의합니다. 가장 먼저 정의해야 할 것은 각 프론트 엔드 프레임 워크의 레이아웃 시스템입니다. 부트 스트랩에서는 행과 열을 사용하여 페이지 레이아웃을 만듭니다. 레이아웃에는 몇 가지 원칙이 있습니다.
행은 .Container (고정 너비) 또는 .Container-Fluid (100% 너비)에 포함되어야합니다.
각 행에는 12 개의 열이 있습니다
각 열에 내용을 배치하십시오
Bootstrap의 래스터 시스템에서 브라우저는 폭에 따라 4 가지 유형으로 나뉩니다. 값은 자동 (100%), 750px, 970px 및 1170px입니다.
해당 스타일은 초소형 (XS), 소형 (SM), 중간 크기 스크린 (MD) 및 큰 (LG)입니다.
원래 미디어 쿼리를 통해 최소 너비를 정의하여 구현됩니다. 따라서 Bootstrap으로 만든 웹 페이지는 큰 페이지와 작은 페이지와 호환됩니다!
부트 스트랩 프레임 워크 내에서 화면 크기의 구분 값이 사전 정의되었으며 구분 값은 미디어 쿼리를 통해 정의됩니다. 그 정의는 다음과 같습니다.
/* 초소형 화면 (모바일, 768px 미만)* //* // 미디어 쿼리와 관련된 코드가 없습니다. 부트 스트랩의 기본값이기 때문에 (부트 스트랩은 모바일 최초입니까?)* //* 작은 화면 (평평한, 768px보다 크거나 768px 이상 또는 동일)*/ @미디어 (... @screen-sm-min)/* 중간 크기 (gooktop)/* 992px) */ @media (min-width : @screen-md-min) {...}/ *큰 화면 (대형 데스크톱 디스플레이, 1200px보다 크거나 동일) */ @media (min-width : @screen-lg-min) {...}실제로, 미디어 쿼리는 Win8 응용 프로그램 개발에서도 반응 형 애플리케이션을 실현하기 위해 사용됩니다. 따라서 미래에 반응 형 시스템을 들으면 매우 심오하다고 생각하지 마십시오. 실제로 프레임 워크는 미디어 쿼리를 정의합니다. 미디어 쿼리에 정의 된 최소 너비가 미디어 쿼리에 정의 된 최소 폭을 초과하는 경우, 이러한 방식으로 다른 화면 사이의 요소 크기를 화면에 적응시킬 수 있습니다. 그러나 Bootstrap이 제안한 개념은 모바일 장치에 선호되므로 Bootstrap이 설계 한 페이지는 작은 것과 크고 작은 것과 호환 될 수 있습니다.
3. 기본 레이아웃 구성 요소
기본 레이아웃 구성 요소는 부트 스트랩 프레임 워크가 일부 기본 레이아웃 레이블에 대한 일부 통합 스타일을 정의한다는 것입니다. 테이블, 버튼, 양식 등과 같은 예를 들어 테이블의 예를 살펴 보겠습니다.
<! 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> <!-부트 스트랩을위한 JS 플러그인이 없기 때문에 jQuery 구성 요소에 대한 참조가 없습니다-> <!-bootstrap-> <link rel = "스타일 시트" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <hody> <h3> 기본 스타일 테이블 </h3> <table> <apaption> 테이블 제목. </caption> <!- 테이블 헤더, t+헤드와 함께 T+헤드를 나타냅니다. 테이블-> <thead> <tr> <th> id </th> <th> 이름 </th> <th> 성 </th> </tr> </thead> <tbody> <tr> <th scope = "row"> 1 </th> <td> tommy </td> <td> li </td> <tr> <th SCOPE = "row"> 2 </th> <td> bob </td> <td> san </td> </tr> <tr> <th scope = "row"> 3 </th> <td> sam </td> <td> wang </td> </tbody> <h3> 테이블이있는 테이블 </h3> </h3> <! T+헤드, t는 테이블의 의미를 나타냅니다-> <thead> <tr> <th> id </th> <th> 이름 </th> <th> 성 </th> </tr> </thead> <tbody> <tr> <th scope = "row"> 1 </th> <td> tommy </td> li </td> </td> </td> scope = "row"> 2 </th> <td> bob </td> <td> san </td> </tr> <tr> <th scope = "row"> 3 </th> <td> sam </td> <td> wang </td> </td> </tbody> <!- 더 많은 테이블 스타일 참조. http://v3.bootcss.com/css/#tables--><! 필요에 따라 -> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
버튼 및 양식의 예제 코드는 여기에 게시되지 않습니다. 아래 링크를 사용하여 실행 효과와 소스 코드를 볼 수 있습니다. 마지막 다운로드 파일을 통해이 주제의 모든 소스 코드를 다운로드 할 수도 있습니다.
IV. CSS 구성 요소
CSS 구성 요소는 기본 레이아웃 구성 요소와 유사합니다. 여기에서 내비게이션 예제를 살펴 보겠습니다. 무뚝뚝하게 말하면,이 것을 너무 많이 사용하면 자연스럽게 익숙해집니다.
<! 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 rel = "stylesheet"href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> 더 나은 모바일 디스플레이를 위해 그룹화-> <div> <버튼 유형 = "버튼"Data-Toggle = "Collapse"data-target = "#bs-example-navbar-collapse-1"aria-expanded = "false"> <span> 토글 탐색 </span> <span> </span> <span> </span> <span> </span> <A href = "#"> home </a> </a> </div> <!-토글링을위한 NAV 링크, 양식 및 기타 콘텐츠를 수집합니다 .-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#"> home <span> (현재) </span> </a> <li> <a <a <a href = "#"> 정보 </a> </a> </li> <ul> <li> <a href = "#"> link </a >> </li> <li> <a href = "#"data-toggle = "dropdown"role = "button"aria-haspopup = "true"aria-expanded = "false"> </<li <</<li </<li <</<li> href = "#"> action 1 </a> </a> </li> <li> <a href = "#"> action 2 </a> </li> <li> <a href = "#"> action 3 </a> </li> <li> <a href = "#"> 분리 된 액션 </a> </li> </li> </div> </.navbarpolatse -> </div> <!-/.container-fluid-> </nav> <!-JQuery (bootstrap의 javaScript 플러그인에 필요)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> 필요에 따라 -> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
다른 구성 요소의 작동 효과는 다음과 같습니다.
5. JavaScript 플러그인
기본적으로 모든 JS 플러그인은 JavaScript 코드를 작성하지 않고 특정 HTML 코드 및 해당 속성을 설정하여 구현할 수 있습니다. 구현의 본질은 부트 스트랩이 이러한 속성에 대한 해당 JavaScript 코드를 구현한다는 것입니다.
모달 창의 예를 살펴 보겠습니다.
<! 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 rel = "stylesheet"href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css "> </head> <h3> modal wind type = "button"data-toggle = "modal"data-target = "#myModal"> 클릭 me </button> <div id = "myModal"> <div> <div> <div> <버튼 유형 = "data-dismiss ="modal "aria-label ="close "> <span aria-hidden ="true "> </button> <h4> modal Title </h4> </div> <div> <p> 테스트 본문… jQuery (부트 스트랩의 JavaScript 플러그인에 필요)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <!-모든 컴파일 된 플러그인 (아래) 포함-> <개별 파일 포함-> < src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
이전 컨텐츠를 모두 읽은 후에는 Bootstrap이 실제로 스타일 프레임 워크라고 즉시 느끼십니까? 이를 통해 웹 페이지를 빠르고 쉽게 빌드 할 수 있습니다. 또한 이전 콘텐츠를 읽은 후에는 공식 부트 스트랩 문서가 다음과 같은 이유가 혼란스럽지 않습니다.
공식 부트 스트랩의 내비게이션 바의 항목은 위의 소개의 주요 구성 요소가 아닌가?
6. 요약
이 시점 에서이 기사의 모든 내용은 종료되었습니다. 이 기사를 통해 초보자들이 부트 스트랩을 빠르게 이해하고 마스터 할 수 있기를 바랍니다. 또한이 기사는 부트 스트랩의 핵심 지점과 동일합니다. 자세한 내용은 Bootstrap의 공식 중국 웹 사이트를 참조하십시오. 그러나 나는 더 이상 그것을 원하지 않는다고 생각합니다. 그 시간이 있다면 직접 연습하는 것이 좋습니다. VS2013 웹 응용 프로그램은 이미 기본적으로 부트 스트랩 프레임 워크를 지원합니다. VS2013을 통해 즉시 웹 애플리케이션을 작성하여 읽기 전에 ASP.NET MVC에서 부트 스트랩의 응용 프로그램을 경험할 수 있습니다.