Bootstrap은 CSS에 특화되어 있지만 HTML 및 JavaScript 구성 요소도 제공하는 프런트 엔드입니다. 2011년 트위터에서 만들어졌습니다.
여기에는 간단하고 효율적인 그리드 시스템이 포함되어 있어 쉽게 반응하는 웹 애플리케이션을 디자인할 수 있습니다. 또한 버튼, 양식, 탐색 모음, 모달 창 등에 일관된(그리고 미학적으로 보기 좋은) 스타일을 사용할 수 있습니다.
download
넣어<header><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

그리드 시스템은 컨테이너를 사용합니다(블록으로 상상할 수 있는 클래스 컨테이너). 각 컨테이너는 행으로 절단됩니다(이것은 클래스 행이 됩니다). 차례로, 각 행은 12개 열로 잘립니다(이것은 classcol이 됩니다).

클래스 컨테이너는 두 가지 유형이 될 수 있습니다.

컨테이너는 그리드를 고정 너비로 ​​중앙에 배치합니다(화면 크기에 따라 다름).

컨테이너 유체 전체 페이지 및 더 이상 고정되지 않음(항상 너비의 100%)

yourcontainer가 생성되면 yourrows(행)를 넣기만 하면 됩니다. 여기에는 yourcol(열)이 포함될 것입니다. 이것은 yourgrate 시스템이 될 것입니다.

삶을 더 쉽게 만들기 위해 Bootstrap은 기본적으로 4가지 크기("중단점"또는 "중단점")를 통합합니다.
*칼라 : 사이즈 xs, 스마트폰 화면용. 이 크기의 경우 칼라-xs를 표시하지 않고 칼라만 표시합니다.
*col-sm : 세로 태블릿 또는 가로 스마트폰 화면용 ;
*col-md : 가로 태블릿 또는 작은 PC 화면용 ;
*col-lg : 와이드스크린 디스플레이용 ;
* 매우 넓은 화면의 경우 col-xl.

<div class="container">
        <div class="row">
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <img src="..." alt="">
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <img src="..." alt="">
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <img src="..." alt="">
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <img src="..." alt="">
            </div>
        </div>
    </div>

열 크기를 화면 크기로 설정하면 더 큰 화면 크기에 자동으로 적용됩니다.