부트스트랩 소개

부트스트랩은 모바일 우선 프레임워크인 CSS로 반응성이 뛰어나고 사용자 장치의 크기에 따라 확장되는 동적 사이트를 쉽게 구축할 수 있습니다. 사용하기 쉽고 광범위한 템플릿, 클래스 및 속성 라이브러리를 통해 멋지고 모바일 친화적인 웹 사이트 또는 앱을 빠르게 구축할 수 있는 안정적인 방법입니다. 이 기사에서는 Bootstrap이 제공하는 몇 가지 기본 기능에 대해 설명합니다.

그리드 시스템

이 프레임워크의 핵심 기능은 UI의 레이아웃을 정의하는 그리드 시스템 레이아웃입니다. 각 구성 요소의 구조는 내부에 중첩된 행이 있는 열을 포함하는 컨테이너입니다. 각 컨테이너는 최대 12개의 열을 포함할 수 있습니다.

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

source

모두 "col"클래스를 가진 div로 컨테이너가 로드되면 열은 기본적으로 동일한 너비로 설정됩니다. 아래에 다른 행이 추가되고 두 ​​번째 행에서 열의 크기가 변경됩니다.

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

source

열 너비는 열 수에 관계없이 정의할 수 있습니다. 크기가 전체가 아닌 일부에 대해 정의된 경우 너비가 정의되지 않은 요소는 기본적으로 페이지의 나머지 부분을 차지하는 동일한 너비로 설정됩니다. 크기의 합이 12를 초과하면 기둥이 서로 겹쳐서 배치됩니다. 이 간단한 시스템은 중첩된 행과 열의 모든 조합을 허용하며, 수신하는 장치의 유형에 따라 반응형 HTML을 렌더링하는 기능이 모두 제공됩니다.

중단점

부트스트랩 레이아웃은 항상 휴대폰에 가장 적합한 레이아웃으로 기본 설정됩니다. 페이지가 더 큰 화면에 렌더링되면 사용자 화면 크기에 맞게 레이아웃이 조정됩니다. 중단점('sm', 'med', 'lg', 'xl' 또는 'xxl')을 추가하면 조건을 추가하여 화면 크기를 기반으로 레이아웃을 정의할 수 있습니다. 중단점이 설정되면 해당 크기 이상의 모든 화면에 적용됩니다. 3개의 서로 다른 디스플레이를 원할 경우 2개의 중단점을 설정할 수 있습니다. 하나는 중간이고 다른 하나는 초대형입니다. 중간보다 작은 화면은 기본 레이아웃을 갖습니다. 중단점이 주어지면 정의된 상태가 해당 화면 크기 이상에 적용됩니다.
중단점은 그리드 시스템 내부의 모든 컨테이너, 열 또는 행에 적용할 수 있습니다. 이동 here 중단점에 대한 모든 것을 배우려면 here 그리드 시스템에서 구현하고 무제한으로 가능한 레이아웃을 확인하여 프로젝트를 만들 수 있습니다.

커스터마이징

Bootstrap은 유연한 프레임워크이며 구성 요소는 모두 기본값과 함께 제공되지만 완전히 사용자 정의할 수 있습니다. 그들의 라이브러리는 CSS와 Javascript 모두에서 작동하는 귀중한 도구로 가득 차 있습니다. 또한 React, Vue 및 Angular와 함께 사용할 특정 프레임워크도 있습니다.

결론

12열 레이아웃 시스템과 함께 부트스트랩의 거대한 클래스 및 템플릿 라이브러리는 프로젝트를 빨리 시작하기 위해 시간이 부족한 경우 큰 도움이 될 수 있습니다. 이제 프레임워크의 도구 키트를 약간 가지고 놀면 미래에 큰 이점을 얻을 수 있습니다. 레이아웃을 설정하는 그리드 기능만 사용하든 전체 템플릿 부트스트랩을 사용하든 제품에 큰 자산이 될 수 있습니다.