CSS 그리드와 부트스트랩의 차이점-CSS 튜토리얼-php.cn

CSS 그리드와 부트스트랩의 차이점

WBOY

풀어 주다： 2023-09-08 17:17:02

앞으로

1171명이 탐색했습니다.

CSS Grid和Bootstrap之间的区别

대부분의 경우 엄격한 레이아웃 요구 사항이 필요하고 해당 요구 사항에 따라 콘텐츠가 페이지에 흐르기를 원할 때 CSS 그리드를 사용합니다.

Bootstrap의 그리드 시스템은 CSS Flexbox 레이아웃 시스템을 기반으로 하며 CSS 그리드는 인쇄 기반 ID의 영향을 받습니다. Bootstrap은 CSS Grid의 직접적인 경쟁자이며 두 프레임워크의 그리드 레이아웃 시스템 간에 중요한 비교가 이루어질 수 있습니다.

행 또는 열 방향으로 레이아웃을 제어하려면 Bootstrap에서 제공하는 Flexbox 기반 그리드를 사용해야 합니다. 반면에 행과 열 모두의 레이아웃을 제어하려면 CSS 그리드를 솔루션으로 사용해야 합니다.

CSS 그리드란 무엇인가요?

직선과 수평선이 교차하는 일련의 선은 격자로 이해됩니다. CSS3는 그리드 레이아웃을 사용하여 페이지를 여러 부분으로 나눌 수 있습니다.

그리드 속성은 행 및 열 기반 그리드 레이아웃 시스템을 제공합니다. 웹 디자인에서 요소 레이아웃과 플로팅이 필요하지 않습니다. 그리드 레이아웃은 HTML 대신 CSS를 사용하여 그리드 구조를 만드는 방법을 제공합니다.

CSS 그리드 레이아웃은 페이지를 주요 섹션으로 분할하거나 기본 컨트롤을 기반으로 하는 HTML의 여러 구성 요소 간의 크기, 위치 및 계층적 관계를 설정하는 데 특히 효과적입니다.

다음을 참조하세요example−

<div class="grid_container">
   <div class="grid_items">01</div>
   <div class="grid_items">02</div>
   <div class="grid_items">03</div>
   <div class="grid_items">04</div>
   <div class="grid_items">05</div>
   <div class="grid_items">06</div>
   <div class="grid_items">07</div>
   <div class="grid_items">08</div>
   <div class="grid_items">09</div>
</div>

로그인 후 복사

사용자가 항목을 행과 열로 정렬할 수 있다는 점에서 테이블과 유사한 방식으로 작동합니다. 그러나 테이블과 달리 CSS 그리드는 그리드-템플릿-행 및 그리드-템플릿-열 속성을 사용하면 그리드에 나타나는 열과 행을 지정할 수 있습니다.

부트스트랩이란 무엇입니까?

에 관해서 모바일 장치에서 반응성이 뛰어나고 사용자 친화적인 웹 사이트를 디자인할 때 Bootstrap으로 알려진 HTML, CSS 및 JavaScript 프레임워크는 도구를 다운로드하거나 사용하는 데 비용이 전혀 들지 않습니다. 웹사이트 개발 프로세스를 더욱 간단하고 효율적으로 만들어주는 프런트엔드 프레임워크입니다.

이에는 타이포그래피, 양식, 버튼, 표, 탐색, 모달, 그림 캐러셀 등을 위한 HTML 및 CSS 기반 디자인 템플릿이 포함되어 있습니다. 게다가 JavaScript로 작성된 플러그인을 지원하므로 반응형 디자인을 더 쉽게 만들 수 있습니다.

Bootstrap 그리드란 무엇인가요?

Bootstrap이 사용하는 그리드 구조는 반응형입니다. 화면 크기에 따라 재정렬됩니다. − 자료가 세 개의 열로 구성되어 있으면 큰 화면에서 더 잘 보일 수 있지만, 콘텐츠 요소가 서로 쌓여 있으면 작은 화면에서는 더 잘 보일 수 있습니다. screen .

부트스트랩 그리드 시스템에는 네 가지 클래스가 포함되어 있습니다 −

xs(휴대폰의 경우 − 너비가 768px 미만인 화면)
sm(태블릿의 경우 − 768px 이상의 화면) 와이드) )
md(소형 노트북의 경우 − 992px 이상의 화면)
lg(노트북 및 데스크톱의 경우 − 1200px 이상의 화면)

다음을 살펴보세요. 예 −

<div class="row">
   <div class="col-xs-9 col-md-7">col-xs-9 and col-md-7</div>
   <div class="col-xs-3 col-md-5">col-xs-3 and col-md-5</div>
</div>

<div class="row">
   <div class="col-xs-6 col-md-10">col-xs-6 and col-md-10</div>
   <div class="col-xs-6 col-md-2">col-xs-6 and col-md-2</div>
</div>

<div class="row">
   <div class="col-xs-6">col-xs-6</div>
   <div class="col-xs-6">col-xs-6</div>
</div>

로그인 후 복사

적절한 정렬 및 패딩을 위해 행은 ".container"(고정 너비) 또는 ".container-fluid"(전폭) 내에 포함되어야 합니다.
행을 사용하여 가로 열 그룹을 만듭니다.
열만 임시적일 수 있으므로 콘텐츠는 열 안에 배치되어야 합니다.
".row" 및 ".col-sm-4"와 같은 사전 정의된 클래스를 사용하여 그리드 레이아웃을 빠르게 생성할 수 있습니다.
열 사이를 채우면 간격(열 사이의 공백)이 생깁니다. 첫 번째 열과 마지막 열의 패딩을 오프셋하려면 ".rows"에 음수 여백을 사용하세요.
확장할 열 수를 정의하여 그리드 열을 만듭니다(12개 옵션 사용 가능). 예를 들어 3개의 동일한 너비 열은 3개의 ".col-sm-4"로 표시될 수 있습니다.
열 너비는 백분율로 표시되므로 항상 유연하고 상위 요소에 비례합니다.

CSS 그리드와 부트스트랩의 차이점

아래 표는 CSS 그리드와 부트스트랩의 주요 차이점을 강조합니다 -

기본 비교	CSS Grid	Bootstrap
Markup	더 깔끔하고 읽기 쉬운 마크업이 있습니다. 그리드의 레이아웃은 HTML이 아닌 CSS로 이루어집니다.	레이아웃을 구축하려면 각 행마다 div 태그가 필요하고 각 div 요소 내에 클래스 계층 구조를 정의해야 합니다. 이렇게 하면 코드가 길어집니다.
Responsive	HTML이 변경되지 않더라도 다양한 미디어 쿼리를 추가하고 각 HTML 요소의 그리드 레이아웃을 기술하면 CSS를 수정할 수 있습니다.	정립된 클래스 계층 구조를 사용하면 다양한 장치 크기에 맞는 콘텐츠 영역 레이아웃을 독립적으로 디자인할 수 있습니다. 그러나 클래스 수가 증가하면 라벨링이 더 번거로워집니다.
페이지 로딩 속도	는 대부분의 브라우저와 버전에서 강력하게 지원됩니다. 아무것도 다운로드할 필요가 없으며 웹사이트가 더 빠르게 로드됩니다.	스타일시트 첨부파일을 다운로드해야 해서 웹사이트 로딩이 느립니다.
Column Limit	열 수에 제한이 없는 유연한 레이아웃을 제공합니다. 따라서 여러 개의 열을 갖는 것은 어렵지 않습니다.	그리드가 12열로 나누어져 있기 때문에 합이 12가 되지 않는 레이아웃은 구현할 수 없습니다.