Bootstrap and Foundation은 특히 빠르게 개발하는 웹 사이트를위한 프로토 타입에서 제가 가장 좋아하는 프론트 엔드 프레임 워크 중 하나입니다. 그들은 모두 즉시 사용 가능한 구성 요소를 제공하여 내 워크 플로를 가속화합니다. 약간의 차이를 제외하고, 그들의 기본 특성의 대부분은 나에게 비슷한 것으로 보인다.
이 기사에서는 그리드의 기본 구성을 소개 할 것입니다. 먼저, 이들이 어떻게 구축되는지, 주요 구성 요소를 설명하고, 다른 화면의 크기와 차이를 나타내는 방법을 보여줍니다. 그런 다음 실제 사례 연습을 통해 지식을 추가하도록 도와 드리겠습니다.
함께 시작합시다!
비교 1 : 미디어 쿼리 비교
Bootstrap 및 Foundation의 래스터 구조를 분석하기 전에 응답 레이아웃을 위해 제공하는 중단 점을 살펴 보겠습니다. 이것은 각 프레임이 사용 가능한 래스터 수를 설정하기 위해 제공하는 것입니다.
Bootstrap은 4 개의 PX 기반 미디어 쿼리 중단 점을 지정합니다. 다음과 같이 표시됩니다.
Foundation에는 5 개의 EM 기반 미디어 쿼리가 포함되어 있습니다. 다음 표에 표시됩니다.
미디어 쿼리의 작동 방식을 이해하기 위해 Bootstrap의 데모 및 관련 파운데이션 데모를 확인하는 것이 좋습니다. 그러나 여전히 혼란스러워지면 다음 부분은 모든 것을 설명 할 것입니다.
참고 : Foundation의 메쉬 및 슈퍼 큰 화면은 기본적으로 비활성화됩니다. 사용하려면 사용하려면 "취소"하고 두 변수의 값을 포함하여 -xl-html-grid 클래스와 $ include-xl-html block-grid 클래스를 true로 설정해야합니다. 이 변수는 _settings.scss 섹션에서 찾을 수 있습니다.
비교 2 : 그리드 구조
부트 스트랩과 파운데이션은 행과 열로 구성된 최초의 12 열 그리드를 제공합니다. 열은 줄로 중첩됩니다. 각 행의 열의 합은 12 열입니다. 행은 또한 열에 중첩 될 수 있습니다.
이 두 프레임 워크에는 열의 크기를 설정하는 데 사용할 수있는 사전 정의 된 클래스가 많이 포함되어 있습니다. 위에서 언급했듯이 Bootstrap에는 4 개의 미디어 쿼리 브레이크 포인트가 포함되어 있으며 Foundation에는 5가 포함되어 있습니다. 각 그리드마다 열 크기를 설정하는 데 사용할 수있는 클래스 접두사가 다릅니다 (위의 두 테이블 참조).
부트 스트랩 그리드 라인에는 캡슐화 된 요소도 필요합니다. 컨테이너 또는 컨테이너 유체 클래스가 있어야합니다. 요소의 컨테이너 클래스는 고정 된 값을 가지며 그 값은 창에 따라 다르며 (위의 첫 번째 표 참조) 요소의 컨테이너 유체 클래스는 브라우저 창의 전체 너비로 확장됩니다.
비교 3 : 열! = 12?
그리드 시스템의 열 수는 12와 같지 않을 수 있습니다.이 경우 Bootstrap은 마지막 열을 왼쪽으로 묶고 파운데이션은 오른쪽으로 떠 다니게됩니다. Foundation의 기본 동작을 무시하려면 마지막 열에서 .end 클래스를 추가하십시오.
비교 4 : 기능 클래스
두 프레임 워크 모두 메쉬를 매우 유연하게 정의 할 수있는 추가 클래스를 제공합니다.
가시 클래스를 사용하면 특정 크기의 화면에서 콘텐츠를 표시하거나 숨길 수 있습니다. 오프셋 클래스를 사용하면 불완전한 열을 중앙으로 중앙으로 중앙으로 또는 간격을 조정할 수 있습니다. 물론 다른 장치에 따라 열 순서를 지정할 수있는 다른 클래스가 있습니다.
비교 5 : 그리드 블록
기본 그리드 외에도 Foundation은 다른 래스터 기능, 즉 그리드 블록을 지원합니다. 가장 작은 마크로 동일한 크기의 열을 만들 수 있습니다. 이를 사용하려면 행을 UL 요소로, 행의 열을 Li 요소로 정의하십시오. 그런 다음 관련 클래스를 UL 요소에 적용하여 열의 크기를 지정하십시오 (자세한 내용은 위의 두 번째 표 참조).
현재 일반 그리드와 그리드 블록의 차이점은 무엇입니까? 그들 사이의 두 가지 차이점을 간단히 살펴 보겠습니다.
기본 그리드와 달리 (그리드 블록) 각 행에는 최대 너비가 적용되므로 전체 브라우저 창이 항상 덮여 있습니다.
메쉬 블록은 동일한 크기의 프로젝트에서만 사용할 수 있습니다.
그리드 사용
이 두 프레임 워크의 그리드를 잘 이해 했으므로 부트 스트랩 페이지와 해당 파운데이션 페이지를 만드는 방법을 살펴 보겠습니다.
다음 스크린 샷은 우리가 빌드 할 첫 번째 레이아웃을 보여줍니다.
부트 스트랩부터 컨테이너 클래스의 요소를 정의합니다. 앞에서 논의한 바와 같이,이 클래스는 화면의 크기에 따라이 요소의 고정 너비를 설정합니다 (자세한 내용은 부트 스트랩의 테이블 참조). 그런 다음 클래스 행이있는 요소를 추가합니다.
이제 우리는 열을 설정할 준비가되었습니다. 큰 화면의 경우 같은 크기의 4 개의 열을 원합니다. 따라서 COL-LG-3 클래스로 각각 4 개의 div 요소를 정의합니다. 그러나 중소형 장치의 경우 각 행에 두 개의 열을 선호합니다. 이러한 이유로 COL-SM-6 클래스를 사용합니다. 마지막으로, 초소형 화면을 위해서는 열이 쌓기를 원합니다. 이것은 첫 번째 프레임 워크를 이동하는 기본 동작이므로 COL-XS-12 클래스를 정의 할 필요가 없습니다.
HTML은 다음과 같습니다.
<div> <div> <div> <!-내용-> </div> <div> <!-내용-> </div> <div> <!-내용-> </div> <! </div> <!-내용-> </div> <div> <!-컨텐츠-> </div> <!-content-> </div> </div>
Foundation을 계속 살펴 보겠습니다.
기초의 메쉬는 부트 스트랩의 메쉬와 매우 유사하지만 조금 간단합니다. 먼저, 열이 포함 된 행 클래스의 요소를 정의해야합니다. 이 클래스는 요소의 Max width를 62.5rem (1000px)으로 설정합니다. 다음으로 열을 추가합니다. 이를 달성하기 위해 각 DIV 요소에 열 또는 열 클래스가 있음을 지정한 다음 해당 래스터 클래스 (위의 테이블 참조)를 사용하여 폭을 설정합니다. 마찬가지로 소규모 장치의 경우 Small-12 클래스를 정의 할 필요가 없습니다.
이것은 Foundation Raster를 기반으로 한 HTML 입니다.
<div> <div> <!-내용-> </div> <div> <!-내용-> </div> <div> <!-내용-> </div> <div> <!-content-> </div> <div> <!-content-> </div> <div> <!-content-> </div> </div>
이 순간, 나는 당신 이이 두 프레임 워크의 그리드 시스템에 더 익숙해지기 시작했다고 생각합니다. 그러나 다른 예는 더 명확하게 이해하는 데 도움이 될 수 있습니다.
다음 예에서는 바닥 글을 만들 것입니다. 다음 다이어그램은 우리가 원하는 스타일을 보여줍니다.
여기서는 이전 예제와 비교할 다른 레이아웃을 선택합니다. 미드 스크린 이상의 스크린 (또는 작은 화면이있는 화면 이상의 화면이있는 화면)의 경우 부트 스트랩 그리드에있는 스크린의 경우 세 개의 열을 표시하려고합니다. 그러나 마지막 열에 중첩 행이 있음을 알았습니다. 이것은 두 개의 열로 구성됩니다. 모든 장치에서 폭을 행 너비의 절반으로 설정합니다. 마지막으로, 중첩 행에 나타나는 이미지의 가시성을 조정합니다.
부트 스트랩의 코드는 다음과 같습니다.
<div> <div> <div> <!-내용-> </div> <div> <!-내용-> </div> <div> <div> a href = "#"> <p> 만남과 토론 </p> <i> </i> </a> </div> <!-.col-xs-6-> <!-</div> </div> <!-. </div> <!-.col-sm-4-> </div> <!-.row-> </div> <!-.container->
Foundation의 코드는 다음과 같습니다.
<div> <div> <!-내용-> </div> <div> <!-내용-> </div> <div> <ul> <li> <a href = "#"> <p> 만남과 토론 </p> <i> </i> </a> </li> <li> <! </li> </div> <!-mmedium-4.. .row->
참고 : 메쉬 블록을 교체하려면 Foundation의 기본 메쉬를 사용하여 중첩 행을 생성 할 수 있습니다.
결론적으로
부트 스트랩 그리드 시스템에 대한 자세한 정보를 원한다면이 기사를 확인하십시오. "부트 스트랩은 매일 (레이아웃)에 대해 알아야합니다."
마지막 으로이 기사에서는 부트 스트랩과 파운데이션의 메쉬 구조를 소개합니다. 그런 다음 실제 프로젝트에서 그리드를 사용하는 방법을 보았습니다. 보시다시피, 모든 그리드는 비슷하며 더 정의 할 수 있습니다.
이 기사가 마음에 드 셨으면합니다. 배운 내용을 프로젝트에 적용 할 수 있습니다. 더 많은 부트 스트랩 컨텐츠는 다음을 참조하십시오 : "부트 스트랩 학습 자습서", 읽어 주셔서 감사합니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.