최근에 나는 현재 모바일 장치를 우선시하고 다른 장치에 신속하게 적응할 수있는 가장 인기있는 반응 형 CSS 프레임 워크 인 Bootstrap이라는 좋은 것을 발견했습니다. 이를 사용하여 반응 형 페이지를 빠르고 편리하게 작성하고 브라우저 차이를 차단합니다. 부트 스트랩을 사용하면 더 이상 과거 CSS로 웹 페이지를 작성하는 비극적 인 삶을 상상할 수 없습니다.
학습 후, 나는 또한 몇 분 안에 고급 페이지를 개발할 수있는 능력이 있음을 발견했습니다. 이 기사에서는 부트 스트랩을 소개하고 반응 형 페이지를 함께 구현하게됩니다.
그림 1. 다른 장치에 적합한 모바일 우선 순위
1. 설치
가장 쉬운 방법은 웹 페이지의 CDN (Content Distribution Network)에서 제공하는 부트 스트랩을 직접 참조하는 것입니다. 사용자가 웹 페이지에 액세스하면 인근 서버에서 리소스를 얻습니다.
목록 1. 컨텐츠 배포 네트워크에서 부트 스트랩을 얻습니다
<!-최신 컴파일 및 조정 된 CSS-> <link rel = "스타일 시트"href = "bootstrap/3.3.4/css/bootstrap.min.css"> <!-선택적 테마-> <link rel = "stylesheet"href = "bootstrap/3.3.4/css/bootstrap-theme.min.min. JavaScript-> <Script SRC = "Bootstrap/3.3.4/js/bootstrap.min.js"> </script>
부트 스트랩을 다운로드하여 로컬로 배포 할 수도 있습니다. 사용자는 페이지에서 전체 부트 스트랩을 다운로드하거나 사용자 정의 페이지의 프로젝트 요구에 따라 프로젝트에 사용 된 기능을 선택하고 단순화 된 버전의 부트 스트랩을 컴파일하고 다운로드 할 수 있습니다. 다운로드가 완료된 후 ZIP 파일이 얻어집니다. 압축 압축 디렉토리 구조는 다음과 같습니다.
목록 2. 부트 스트랩 디렉토리 구조
부트 스트랩/
CSS/
bootstrap.css
bootstrap.css.map
bootstrap.min.css
bootstrap-theme.css
bootstrap-theme.css.map
bootstrap-theme.min.css
JS/
bootstrap.js
bootstrap.min.js
Fonts/
Glyphicons-Halflings-Regular.eot
Glyphicons-Halflings-Regular.svg
Glyphicons-Halflings-Regular.ttf
Glyphicons-Halflings-Regular.woff
Glyphics-Halflings-Regular.woff2
여기서 우리는 주로 세 가지 단순화 된 파일에 중점을 둡니다. bootstrap.min.css는 부트 스트랩의 주요 구성 요소이며 사용할 수있는 많은 CSS 클래스가 포함되어 있습니다. Bootstrap-Theme.min.css는 옵션 부트 스트랩 테마를 포함합니다. bootstrap.min.js는 몇 가지 JavaScript 방법을 제공합니다. 부트 스트랩은 jQuery에 의존하므로 bootstrap.min.js를 사용하기 전에 jQuery를 도입해야합니다. 콘텐츠 배포 네트워크를 사용하는 것과 같이 상대 경로를 사용하여 해당 CSS 및 JavaScript를 페이지에 소개합니다. 실제 개발에서는 종종 부트 스트랩이 제공 한 템플릿을 시작점으로 사용합니다. 이 템플릿은 응답 페이지에서 필요한 메타 데이터 및 부트 스트랩을 소개합니다. 개발자는이 기준으로 자체 반응 형 페이지를 쓸 수 있습니다.
목록 3. 부트 스트랩 기본 템플릿
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catible"content = "ie = edge"> <meta name = "viewport"content = "width = device-width, 초기-스케일 = 1"> <! 다른 헤드 컨텐츠는 *이 태그-> <title> 이후 * 부트 스트랩 101 템플릿 </title> <!-bootstrap-> <link href = "css/bootstrap.min.css"rel = "Stylesheet"> <!-html5 shim and respons.js에 대한 html5 요소의 지원-<! 파일을 통해 페이지보기 : //-> <!-[LT IE 9]> <SCRIPT SRC = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "https://oss.maxcdn.com/respent/1.4.2/respone.min.js"> </script> <! src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> <!-모든 컴파일 된 플러그인 (아래) 포함 또는 필요에 따라 개별 파일을 포함 시키거나-> <script src = "js/bootstrap.min.js">
2. CSS
Bootstrap은 먼저 CSS 프레임 워크로, 많은 CSS 클래스를 사전 정의했습니다. 개발자는 HTML 요소에 적절한 CSS 클래스를 추가하여 원하는 스타일을 얻을 수 있으므로 페이지 레이아웃, 레이아웃 및 기타 기능을 완료 할 수 있습니다. Bootstrap에서 제공하는 CSS는 매우 강력합니다. 이 기사는 제공하는 그리드 시스템에 중점을 둘 것입니다. 다른 기능의 경우 적용 할 때만 언급됩니다. 기능에 대해 더 알고 싶다면 공식 문서를 참조하십시오.
컨테이너
부트 스트랩 레이아웃을 사용하는 경우 컨테이너 (.Container)에 HTML 요소를 포함해야합니다. Bootstrap은 .Container와 .Container-Fluid의 두 개의 컨테이너를 제공합니다. 전자는 내용을 고정 너비로 중심으로하고 후자는 컨텐츠가 아래와 같이 전체 브라우저 창을 수평으로 채울 수 있도록합니다.
Listing 4 .. Container 및 .Container-fluid
<div> <p> "내가 어렸을 때 어머니는 아플 때마다 커피 한 잔을 만들 것입니다. 그녀는 부드럽게 말했다."외국인들은 이것을 마신다 "고 말했다. 이제 어렸을 때 어렸을 때 마신 맛을 찾을 수 없습니다. 그날까지 나는 이타티스 한 잔을 마셨다. "</p> </div> <div> <p>"어렸을 때 아플 때마다 어머니는 커피 한 잔을 만들 것입니다. 그녀는 부드럽게 말했다 : "외국인들은 이것을 마신다." "어릴 때, 나는 항상 커피를 두려워했고 신맛과 쓴 맛은 얽혀 있습니다. 이제 나는 어렸을 때 어렸을 때 마신 맛을 찾을 수 없습니다. 그날까지 나는 이사티스 한 잔을 마 셨습니다." </p> </div>
다음 그림은 브라우저의 모습을 보여줍니다.
그림 2. 용기
그리드 시스템
첫 번째 반응 형 페이지를 작성하여 설계된 그리드 시스템과 마찬가지로 부트 스트랩은 페이지를 행당 12 열 (.Col-MD-*)으로 행으로 나눕니다. 행은 컨테이너에 포함되어야합니다. 스크린 크기에 따르면, 열은 각각 .col-xs-, .col-sm-, .col-md- 및 .col-lg-로 나뉘어져있다. 그 안에 나타나는이 픽셀을 임계점이라고합니다. 브라우저 크기 또는 화면 크기가 다른 중요한 지점에 도달 할 때마다 해당 CSS 클래스가 작동하고 페이지 레이아웃이 변경됩니다. 자세한 내용은 다음 그림을 참조하십시오.
그림 3. 그리드 시스템
위의 표를 어떻게 이해합니까? 컴퓨터의 페이지를 탐색 할 때 페이지를 3 개의 열로 파야하는 경우 1/4, 2/4 및 행 너비의 1/4을 차지하는 경우 다음과 같이 코드를 작성할 수 있습니다.
Listing 5. 하나의 행은 3 개의 열로 나뉩니다
<div> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div >>. col-md-3 </div> </div>
브라우저를 열면 12 개의 열 중 3, 6 및 3 개를 차지하는 것을 볼 수 있으며 정확히 12 개의 열이 추가됩니다. 브라우저 창이 970px 미만이 될 때까지 브라우저 창을 좁히면 3 줄이되어 함께 쌓여 표시되어 표시됩니다. .col-xs-를 제외하고 다른 CSS 클래스는 동일하게 행동합니다. 화면 크기가 임계점보다 작을 때 쌓여 있습니다. 화면 크기가 임계점보다 큰 경우에만 열에 표시되며 .col-xs-는 어쨌든 열에 표시됩니다.
다른 화면 크기에 해당하는 CSS 클래스는 혼합 방식으로 사용할 수 있습니다. 예를 들어, 컴퓨터에 3 개의 열과 전화기에 2 개의 열을 표시하기 위해 페이지를 원한다면 다음과 같이 코드를 쓸 수 있습니다. 전화에서 세 번째 열은 다음 줄에 표시되고 선 너비의 절반을 차지합니다.
Listing 6. 컴퓨터 및 전화에 다양한 수의 열 표시
<div> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div >>. col-md-3 </div> </div>
모든 장치에서 동일한 열을 표시하려면 최소 크기 .col-xs- 만 정의하면 레이아웃이 자동으로 더 큰 크기로 확장됩니다. 그렇지 않으면 다음과 같습니다.
Listing 7. 모든 장치에 동일한 수의 열이 표시됩니다.
<div> <div> .col-xs-6 </div> <div> .col-xs-6 </div> </div>
예를 들어, 첫 번째 열은 행 너비의 1/4을 차지하는 것과 같은 열에 특정 오프셋을 제공 할 수 있으며, 두 번째 열이 6 개의 열을 오른쪽으로 오프셋하고 행 끝에 3 개의 열을 차지하려고합니다.
Listing 8. 열 오프셋
<div> <div> .col-md-3 </div> <div> .col-md-3 </div> </div>
열 순서는 .col-md-push-* 및 .col-md-pull-*로 조정할 수 있습니다. 그들의 의미는 요소를 뒤로 밀거나 여러 열을 앞으로 끌어내는 것입니다. 개발자는이 기능을 사용하여 휴대 전화에 표시 할 때 중요한 콘텐츠를 앞쪽으로 끌어 올릴 수 있습니다.
리스팅 9. 푸시 및 당기기 열
<div> <div> .col-md-9 .col-md-push-3 </div> <div> .col-md-3 .col-md-pull-9 </div> </div>
더 흥미로운 점은이 메쉬 시스템이 중첩 될 수 있으므로 다양한 복잡한 레이아웃을 수행 할 수 있다는 것입니다.
리스팅 10. 중첩
<div> <div> 레벨 1 : .col-sm-9 <div> <div> 레벨 2 : .col-xs-8 .col-sm-6 </div> <div> 레벨 2 : .col-xs-4 .col-sm-6 </div> <div> 레벨 1 : .col-sm-3 </div> </div> </div> </div> </div> </div>
위의 코드는 일반적으로 두 개의 열로 나뉩니다. 첫 번째 열에는 두 개의 열이 중첩되어 있습니다.
Bootstrap의 그리드 기능은 웹 페이지 레이아웃을위한 다양한 가능성을 제공하며 사용하기가 매우 간단합니다. Bootstrap을 사용하여 반응 형 페이지를 작성하는 것이 얼마나 간단한 지 확인해 보겠습니다.
3. 실제 전투
다음 이미지에 표시된대로 웹 페이지를 구현한다고 가정합니다.
그림 4. 웹 디자인
먼저 웹 페이지 요소를 해당 행과 열로 나눕니다. 다음 그림은 저자의 부서를 보여줍니다.
그림 5. 웹 디자인을 행과 열로 나눕니다
따라서 HTML 구조를 정의하고 적절한 부트 스트랩 CSS 클래스를 추가하십시오.
목록 11. HTML 구조 정의
<div> <div> <img src = "http://placehold.it/150x150"> </div> <div> <h1> Jane Doette </h1> <h3> 프론트 엔드 닌자 </div> <hr> <div> <div> <IMG src = "http://placehold.it/950x350"> </div> <div> <div> <h2> 추천 작업 </h2> </div> <div> <div> <img src = "http://placehold.it/250x250"> <h2> applify </h2> <a href = "https://github.com/udacity/applify"> https://github.com/udacity/applify </a> </div> <div> <img src = "http://placehold.it/250x250"> <h2> sunflower </h2> <a href = "https://github.com/udacitic/sunflower"> https://github.com/udacity/sunflower </a> </div> <div> <img src = "http://placehold.it/250x250"> <h2> bokeh </h2> <a href = "https://github.com/udacity/bokeh"> https://github.com/udacity/bokeh </a> </div> </div>
저자가 위의 코드를 작성하는 데 10 분도 채 걸리지 않았으며 사진이 없기 때문에 저자는 온라인으로 제공되는 자리 표시 자 그림을 사용했습니다. 브라우저 에서이 페이지를 열면 설계에 가깝지만 글꼴, 대문자, 대문자 및 서체는 여전히 디자인과 일치하지 않습니다. 다음으로 관련 CSS 클래스를 발견하려면 부트 스트랩 문서를 미세 조정하고 찾아야합니다. 최종 효과는 아래 그림에 나와 있습니다.
그림 6. 실현 효과
더 흥미로운 점은 브라우저 창을 좁히거나 휴대 전화에서 페이지에 액세스 할 때 이미 간단한 응답 페이지라는 것을 알게되며 추가 코드를 추가하지 않았다는 것입니다. 당시에는 총 20 분도 채 걸리지 않았으며 몇 분 안에 반응 형 페이지를 작성하겠다는 약속을 이행했습니다.