그리드 시스템 비교 : 부트 스트랩 3 대 재단 5

Bootstrap과 Foundation은 특히 빠른 웹 사이트 프로토 타이핑을 위해 내가 가장 좋아하는 프론트 엔드 프레임 워크 중 하나입니다. 둘 다 워크 플로우 속도를 높이는 즉시 사용 가능한 구성 요소가 제공됩니다. 그들의 작은 차이를 넘어서, 그들의 기본 특징의 대부분은 나와 비슷해 보인다.

이 기사에서는 그리드의 기본 사항을 다룰 것입니다. 먼저, 구조화 된 방법, 주요 구성 요소를 설명하고 화면 크기에 따라 어떻게 구별되는지 보여줍니다. 그런 다음, 나는 당신이 얻은 지식을 실제로 실천하는 데 도움이되는 실제 예를 살펴 보겠습니다.

. 시작하자! 키 테이크 아웃

Bootstrap과 Foundation은 모두 기본 기능이 비슷한 인기있는 프론트 엔드 프레임 워크이지만 그리드 구조와 사용자 정의 옵션이 다릅니다. Bootstrap 응답 레이아웃을위한 4 개의 픽셀 기반 미디어 쿼리 브레이크 포인트를 지정하는 반면, Foundation에는 5 개의 EM 기반 미디어 쿼리가 포함되어 있습니다. 두 프레임 워크 모두 행과 열로 구성된 모바일 우선 12 열 그리드를 제공합니다. bootstrap의 그리드에는 컨테이너 또는 컨테이너-유체가있는 클래스가 있어야하는 행에 래퍼 요소가 필요합니다. 반면에 Foundation의 그리드는 약간 단순하고 래퍼 요소가 필요하지 않습니다. Foundation은 Block Grid라는 추가 그리드 기능을 지원하므로 마크 업이 최소화 된 동일한 크기의 열을 생성 할 수 있습니다. 부트 스트랩은 비슷한 기능을 제공하지 않습니다

미디어 쿼리 비교 Bootstrap 및 Foundation의 그리드 구조를 분석하기 전에 먼저 반응 형 레이아웃을 제공하는 중단 점을 살펴 보겠습니다. 이들은 각 프레임 워크가 제공하는 사용 가능한 그리드의 수를 설정하는 데 사용됩니다. bootstrap은 4 개의 픽셀 기반 미디어 쿼리 중단 점을 지정합니다. 아래 표는 다음을 보여줍니다

화면 뷰포트 크기

컨테이너 너비 클래스 접두사

여분의 작은 화면 재단에는 5 개의 EM 기반 미디어 쿼리가 포함되어 있습니다. 이것들은 다음 표에 나와 있습니다 :

• 화면 뷰포트 크기 클래스 접두사 (기본 그리드) 클래스 접두사 (블록 그리드)
작은 화면 ≤ 40em (640px) .small-* .column (s) .small-block-grid-* 중간 스크린 ≥ 40.063EM (641px) .medium-* .column (s) .medium-block-grid-* 큰 화면 ≥ 64.063em (1025px) .large-* .column (s) .large-block-grid-* Xlarge 스크린 ≥ 90.063EM (1441px) 활성화되지 않았습니다 활성화되지 않았습니다 xxlarge 스크린 ≥ 120.063em (1921px) 활성화되지 않았습니다 활성화되지 않았습니다 이 미디어 쿼리가 어떻게 작동하는지에 대한 아이디어를 제공하려면 부트 스트랩 데모와 관련 파운데이션 데모를 살펴 보는 것이 좋습니다. 그러나 여전히 약간 혼란스러워지면 다가오는 섹션에서는 사물을 분명히 할 것입니다.
• 참고 : XLARGE 및 XXLARGE 스크린 용 Foundation의 그리드는 기본적으로 비활성화됩니다. 사용하려면 사용하려면 "무례"하고 $ include-xl-html-grid 클래스의 값을 설정하고 $ include-xl-html-block-grid classes 변수를 true로 설정해야합니다. _settings.scss 부분에서 해당 변수를 찾을 수 있습니다 그리드 구조

  부트 스트랩 및 기초는 각각 행과 열로 구성된 모바일 우선 12 열 그리드를 제공합니다. 열은 줄 안에 중첩되어 있습니다. 각 행 당 최대 12 명까지 확장됩니다. 행은 열에도 중첩 될 수 있습니다 두 프레임 워크에는 열의 크기를 설정하는 데 사용할 수있는 많은 미리 정의 된 클래스가 제공됩니다. 위에서 언급했듯이 Bootstrap에는 4 개의 미디어 쿼리 브레이크 포인트가 포함되어 있으며 Foundation에는 5 개가 있습니다. 각 그리드마다 열의 크기를 설정하는 데 사용할 수있는 다른 클래스 접두사가 있습니다 (두 테이블 참조). Bootstrap의 그리드에는 행에 래퍼 요소가 필요합니다. 이것은 컨테이너 또는 컨테이너 유체 클래스가 있어야합니다. 컨테이너 클래스가있는 요소는 고정 너비를 가지며, 뷰포트에 따라 다르며 (위의 첫 번째 표 참조) 컨테이너 유체 클래스가있는 요소는 브라우저 창의 전체 너비를 채우도록 확장됩니다.

  열! = 12? 그리드의 열 수는 정확히 12가 아닐 수 있습니다.이 경우 부트 스트랩은 마지막 열을 왼쪽으로 띄우고 Foundation은 오른쪽으로 떠 다니게됩니다. Foundation의 기본 동작을 무시하려면 마지막 열에 종료 클래스를 추가하십시오. 이 차이를 보려면 부트 스트랩 예제와 기초 예를 살펴볼 수 있습니다. 유틸리티 클래스 두 프레임 워크는 그리드를 사용자 정의 할 수있는 유연성을 제공하는 추가 클래스를 제공합니다. 가시성 클래스를 사용하면 특정 화면 크기에 따라 콘텐츠를 표시하거나 숨길 수 있습니다. 오프셋 클래스를 사용하면 불완전한 열을 중앙으로 중앙으로 중앙에 있거나 간격의 양을 조정할 수 있습니다. 다른 장치에서 열 순서를 지정하는 클래스도 있습니다.

  이 부트 스트랩 데모 와이 기초 데모에서 이 모든 클래스의 예를 보여줄 수 있습니다.

  블록 그리드 기본 그리드를 넘어서 Foundation은 Block Grid라는 다른 그리드 기능을 지원합니다. 이를 통해 최소한의 마크 업으로 동일한 크기의 열을 만들 수 있습니다. 그것을 사용하려면 행을 UL 요소로 정의하고 그 안의 열을 Li 요소로 정의하십시오. 그런 다음 관련 클래스 (위의 두 번째 표 참조)를 UL 요소에 적용하여 열 크기를 지정하십시오. 이 시점에서 당신은 생각할 수 있습니다. 일반 그리드와 블록 그리드의 차이점은 무엇입니까? 그들 중 두 가지를 간단히 살펴 보겠습니다
  각 행에 최대 세포를 적용하는 기본 그리드와 달리 블록 그리드는 항상 전체 창 너비를 채 웁니다. 블록 그리드는 동일한 크기의 품목에만 사용할 수 있습니다.
  1. 그리드가 어떻게 구별되는지 더 잘 보여주기 위해 여기에 데모가 있습니다.
  그리드 사용 > 이제 우리는이 두 프레임 워크의 그리드를 잘 이해 했으므로 부트 스트랩 페이지와 해당 파운데이션 페이지를 만드는 방법을 살펴 보겠습니다. 아래 스크린 샷은 우리가 구축 할 첫 번째 레이아웃을 보여줍니다.
  부트 스트랩으로 시작하여 컨테이너 클래스가있는 요소를 정의합니다. 앞에서 논의한 바와 같이,이 클래스는 화면 크기에 따라 값으로 요소에 고정 너비를 설정합니다 (부트 스트랩 테이블 참조). 그런 다음 행 클래스가있는 요소를 추가합니다.
  이제 우리는 열을 설정할 준비가되었습니다. 큰 화면의 경우 4 개의 동일한 크기 열을 원합니다. 따라서 우리는 각각 COL-LG-3 클래스로 4 개의 div 요소를 정의합니다. 그러나 중소형 장치의 경우 행 당 두 개의 열을 선호합니다. 이러한 이유로 COL-SM-6 클래스를 사용합니다. 마지막으로, 광소 한 장치의 경우 열을 쌓기를 원합니다. 이것은 모바일 우선 프레임 워크의 기본 동작이므로 COL-XS-12 클래스를 정의 할 필요가 없습니다. HTML이 어떻게 보이는지

  기초를 계속합시다 Foundation의 그리드는 Bootstrap과 매우 유사하지만 조금 간단합니다. 먼저, 우리는 열이 포함 된 행 클래스의 요소를 정의해야합니다. 이 클래스는 요소의 최대 폭을 62.5rems (1000px)로 설정합니다. 다음으로 열을 추가합니다. 이를 달성하기 위해 각각의 열 또는 열 클래스가있는 div 요소를 지정하고 해당 그리드 클래스를 사용하여 폭을 설정합니다 (위의 기초 표 참조). 다시 한 번 소규모 장치의 경우 Small-12 클래스를 정의 할 필요가 없습니다.

  다음은 Foundation의 그리드를 기반으로 한 HTML입니다

  이 시점에서 두 프레임 워크의 그리드 시스템에 더 익숙해지기를 바랍니다. 그러나 또 다른 예는 이것을 더 명확하게 만드는 데 도움이 될 것입니다.

  이 다음 경우 바닥 글을 구조화합니다. 다음 그래픽 표현은 우리가 어떻게 스타일을 만들고 싶은지 보여줍니다.
  여기서는 이전 예제와 비교하여 다른 레이아웃 모드를 선택합니다.

  중간 스크린 크기와 UP (또는 Bootstrap의 그리드의 경우)의 경우 세 개의 열을 표시하려고합니다. 그러나 마지막 열에 중첩 행이 있음을 알 수 있습니다. 이것은 두 개의 열로 구성됩니다. 모든 장치의 폭을 행 너비의 50%로 설정합니다. 마지막으로 중첩 된 열에 나타나는 아이콘의 가시성을 조정합니다.

  다음은 부트 스트랩 코드입니다 : <p> <: :> 및 기초 : <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;container&quot;&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;row&quot;&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;col-sm-6 col-lg-3&quot;&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt; &lt;span&gt;&lt;!-- content --&gt; &lt;/span&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;col-sm-6 col-lg-3&quot;&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt; &lt;span&gt;&lt;!-- content --&gt; &lt;/span&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;col-sm-6 col-lg-3&quot;&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt; &lt;span&gt;&lt;!-- content --&gt; &lt;/span&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;col-sm-6 col-lg-3&quot;&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt; &lt;span&gt;&lt;!-- content --&gt; &lt;/span&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt; &lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt;&lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> 참고 : 블록 그리드 대신에 중첩 행을 생성하기 위해 Foundation의 기본 그리드를 사용할 수있었습니다. <p> 결론 <more> Bootstrap의 그리드 시스템에 대한 자세한 정보를 원한다면 Syed Fazle Rahman의 기사 이해 Bootstrap의 그리드 시스템을 읽을 수도 있습니다. 이 기사에서, 나는 부트 스트랩과 파운데이션의 그리드 구조를 소개했습니다. 그런 다음 실제 프로젝트에서 그리드를 활용하는 방법을 살펴 보았습니다. 보시다시피, 두 그리드는 비슷하게 보이고 추가로 사용자 정의 할 수 있습니다. <em> <enjoy> 나는 당신 이이 기사를 읽는 것을 즐겼기를 바랍니다. 아마도 당신이 여기서 배운 것을 자신의 프로젝트에 적용 할 수 있습니다. 언제나 그렇듯이 아래의 의견에서 이러한 프레임 워크에 대한 귀하의 생각을 자유롭게 공유하십시오. </enjoy></em> <questions> Bootstrap vs Foundation에서 자주 묻는 질문 (FAQ) <key> 부트 스트랩과 파운데이션의 주요 차이점은 무엇입니까? </key></questions></more></p> <h2 id="부트-스트랩과-기초는-웹-개발에-사용되는-인기있는-프론트-엔드-프레임-워크입니다-그러나-몇-가지-주요-차이점이-있습니다-Bootstrap은-광범위한-기능과-사전-스타일-구성-요소로-유명하여-디자인을-신속하게-프로토-타입하려는-초보자-또는-개발자에게-훌륭한-선택입니다-반면에-Foundation은-더-유연하고-사용자-정의-가능하므로-디자인을-더-많이-제어하려는-개발자에게-선호하는-선택입니다-또한-부트-스트랩에-비해-더-복잡한-그리드-시스템을-가지고-있습니다"> 부트 스트랩과 기초는 웹 개발에 사용되는 인기있는 프론트 엔드 프레임 워크입니다. 그러나 몇 가지 주요 차이점이 있습니다. Bootstrap은 광범위한 기능과 사전 스타일 구성 요소로 유명하여 디자인을 신속하게 프로토 타입하려는 초보자 또는 개발자에게 훌륭한 선택입니다. 반면에 Foundation은 더 유연하고 사용자 정의 가능하므로 디자인을 더 많이 제어하려는 개발자에게 선호하는 선택입니다. 또한 부트 스트랩에 비해 더 복잡한 그리드 시스템을 가지고 있습니다. </h2> 부트 스트랩 또는 기초는 반응 형 디자인에 더 나은가? <p> 부트 스트랩과 기초는 다양한 화면 크기에 적응하는 반응 형 웹 사이트를 만들도록 설계되었습니다. 그러나 Foundation은 모바일 우선 접근 방식을 취하여 모바일 장치를 염두에두고 설계 한 다음 더 큰 화면을 위해 확장됩니다. 반면에 Bootstrap은 처음에 데스크탑 최초 용으로 설계되었지만 이후 Bootstrap 3에서 모바일 우선 접근 방식을 채택했습니다. 두 프레임 워크 모두 반응 형 디자인을 제공하지만 두 가지 사이의 선택은 종종 개인 선호도와 프로젝트 요구 사항에 따릅니다. </p> 부트 스트랩의 그리드 시스템은 기초와 어떻게 비교됩니까? <p> 부트 스트랩 및 기초 사용 모두 콘텐츠를 구조화하고 정렬하는 그리드 시스템이지만 약간 다른 방식으로 수행합니다. Bootstrap은 12 열 그리드 시스템을 사용하여 이해하고 사용하기 쉽습니다. 반면에 Foundation은 최대 12 개의 열을 사용할 수 있도록 사용자 정의 할 수있는 유연한 그리드 시스템을 사용합니다. 이는 Foundation의 그리드 시스템을보다 유연하지만 사용하기에 약간 더 복잡하게 만듭니다. </p>.<differ> 부트 스트랩과 파운데이션의 사용자 정의 옵션의 차이점은 무엇입니까? <h3> </h3> 부트 스트랩과 기초는 사용자 정의 옵션을 제공하지만 접근 방식은 다릅니다. Bootstrap은 구성 요소와 변수를 쉽게 사용자 정의 할 수있는 커스터마이저 도구를 제공합니다. 반면에 Foundation은 SASS 기반 사용자 정의 시스템을 사용하여 디자인을보다 잘 제어 할 수 있지만 SASS를 잘 이해해야합니다. <p> Bootstrap과 Foundation은 JavaScript 구성 요소를 어떻게 처리합니까? </p> <h3 id="부트-스트랩과-파운데이션-모두-웹-사이트에-기능을-추가하는-JavaScript-구성-요소-세트가-제공됩니다-Bootstrap의-JavaScript-구성-요소는-jQuery를-기반으로하며-Foundation은-JQuery를-사용하는-두-가지-버전과-jQuery의-가벼운-대안-인-Zepto-js를-사용하는-두-가지-버전을-제공합니다-두-프레임-워크의-JavaScript-구성-요소는-모듈-식입니다-즉-필요한-것만-포함시킬-수-있습니다"> 부트 스트랩과 파운데이션 모두 웹 사이트에 기능을 추가하는 JavaScript 구성 요소 세트가 제공됩니다. Bootstrap의 JavaScript 구성 요소는 jQuery를 기반으로하며 Foundation은 JQuery를 사용하는 두 가지 버전과 jQuery의 가벼운 대안 인 Zepto.js를 사용하는 두 가지 버전을 제공합니다. 두 프레임 워크의 JavaScript 구성 요소는 모듈 식입니다. 즉, 필요한 것만 포함시킬 수 있습니다. </h3> 부트 스트랩과 기초의 성능은 어떻게 부트 스트랩과 기초의 성능을 비교 하는가? 당신은 그들을 사용합니다. 두 프레임 워크 모두 필요한 구성 요소 만 포함하도록 사용자 정의 할 수 있으므로 성능 향상에 도움이 될 수 있습니다. 그러나 Foundation은 더 유연하고 사용자 정의 가능하기 때문에 올바르게 사용하면 더 가볍고 빠른 웹 사이트로 이어질 수 있습니다. <p> Bootstrap 및 Foundation의 커뮤니티 지원 및 리소스는 어떻게 비교됩니까? </p> Bootstrap 광범위한 테마, 템플릿 및 타사 플러그인을 포함하여 더 큰 커뮤니티와 더 많은 리소스가 있습니다. 재단은 더 작은 커뮤니티를 보유하고 있지만 전문적인 지원과 자원을 제공하는 디자인 회사 인 Zurb의 지원을받습니다. <h3 id="부트-스트랩에서-기초로-마이그레이션하는-것이-얼마나-쉬운가-한-프레임-워크에서-다른-프레임-워크로-마이그레이션하는-것은-HTML-CSS-및-잠재적으로-JavaScript를-다시-작성하는-것과-관련하여-복잡한-작업이-될-수-있습니다-그러나-부트-스트랩과-기초는-모두-비슷한-개념과-구성-요소를-가지고-있으므로-하나에-익숙하다면-다른-사람을-배우는-것은-비교적-간단해야합니다"> 부트 스트랩에서 기초로 마이그레이션하는 것이 얼마나 쉬운가? 한 프레임 워크에서 다른 프레임 워크로 마이그레이션하는 것은 HTML, CSS 및 잠재적으로 JavaScript를 다시 작성하는 것과 관련하여 복잡한 작업이 될 수 있습니다. 그러나 부트 스트랩과 기초는 모두 비슷한 개념과 구성 요소를 가지고 있으므로, 하나에 익숙하다면 다른 사람을 배우는 것은 비교적 간단해야합니다. </h3> 부트 스트랩과 기초의 접근성 기능은 어떻게 비교합니까? <p> </p> 부트 스트랩과 파운데이션은 모두 접근하기 위해 노력했지만 다른 방식으로 접근했습니다. 부트 스트랩에는 구성 요소에 다수의 접근성 기능이 포함되어 있으며 자세한 접근성 문서를 제공합니다. 반면에 Foundation에는 프레임 워크에 내장 된 일련의 접근성 도구가 있으며 포괄적 인 접근성 문서도 제공합니다.<ework> 어떤 프레임 워크를 선택해야합니까 : 부트 스트랩 또는 기초? 부트 스트랩과 기초 사이의 선택은 크게 요구 사항과 선호도에 달려 있습니다. 광범위한 기능, 사전 스타일 구성 요소 및 대규모 커뮤니티가있는 프레임 워크를 원한다면 부트 스트랩이 더 나은 선택 일 수 있습니다. 보다 유연하고 사용자 정의 가능하고 모바일 우선 접근 방식을 취하는 프레임 워크를 선호하는 경우 Foundation이 더 적합 할 수 있습니다. <p>.</p></ework></differ></:></p>

위 내용은 그리드 시스템 비교 : 부트 스트랩 3 대 재단 5의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!