Bootstrap 개요, 반응형웹을 위한 그리드 시스템(4가지 클래스)

부트스트랩(Bootstrap)이란 무엇인가? 

MIT에서 개발해서 공개한 부트스트랩(Boottrap)은 더 빠르고 쉬운 웹 개발을 위한 무료 프론트엔드 프레임워크입니다.  제이쿼리(jQuery)와 함께 웹/앱개발에 주로 사용하는 부트스트랩의 특징은 타이포그래피, 양식, 버튼, 테이블, 탐색, 모드, 이미지 캐러셀 및 기타 여러 가지를 위한 HTML 및 CSS 기반 설계 템플릿과 옵션인 JavaScript 플러그인이 포함되어 있습니다.

 

반응형 모바일 우선 웹사이트를 만드는 데 가장 인기 있는 HTML, CSS 및 자바스크립트 프레임워크인 부트스트랩의 최신 버전입니다.부트스트랩은 완전히 무료로 다운로드하여 사용할 수 있습니다!  부트스트랩의 개발은 매사추세츠 공과대학교(MIT)로 공개된 내용은 앞서 말한 무료입니다.

MIT(MIT License, MIT 라이선스)는 매사추세츠 공과대학교(MIT)를 기원으로 하는 소프트웨어 라이선스 중 가장 대표적인 것이다. X11 License 또는 X License로 표기된다.

 

부트스트랩은 또한 반응형 디자인을 쉽게 만들 수 있는 기능을 제공합니다. 
버전에 따라 업그레이드된 자바스크립트와 CSS의 소스내용이 다르며, 최신버전은 B5입니다.

 

W3Schools.com

 

 

---

 

 

 

Bootstrap 5 그리드 시스템에는 6가지 클래스가 있습니다. 그중 정리한

index222.php

0.01MB

 

<div class="container-fluid">

    <div class="row">
      <div class="col-lg-3 col-sm-6 col-12 bg-success">11</div>
      <div class="col-lg-3 col-sm-6 col-12 bg-warning">22</div>
      <div class="col-lg-3 col-sm-6 col-12 bg-success">33</div>
      <div class="col-lg-3 col-sm-6 col-12 bg-warning">44</div>
    </div>

</div>

 

아래부분을 콘테이너에 적용해보세요.

    <div class="row">
      <div class="col-lg-3 col-sm-6 col-12">
        <div class="border p-4 rounded">11</div>
      </div>
      <div class="col-lg-3 col-sm-6 col-12">
        <div class="border p-4 rounded">22</div>
      </div>
      <div class="col-lg-3 col-sm-6 col-12">
        <div class="border p-4 rounded">33</div>
      </div>
      <div class="col-lg-3 col-sm-6 col-12">
        <div class="border p-4 rounded">44</div>
      </div>
    </div>

 

 

 

현재 테마의 테마 그리드4개 개선버전

테마 그리드4개 개선버전.txt

0.00MB

 

Bootstrap 5 Grid System

Bootstrap 5 그리드 시스템에는 6가지 중 4개 클래스를 정리했습니다.

.col-(초소형 기기 - 화면 너비가 576px 미만)
.col-sm-(소형 기기 - 화면 너비가 576px 이상)
.col-md-(중형 기기 - 화면 너비가 768px 이상)
.col-lg-(대형 기기 - 화면 너비가 992px 이상)

 

bs5_grid.html

0.00MB

 

---

Bootstrap 공식사이트를 통해서 추가적인 내용들을 분석해 적용해봅니다.

https://getbootstrap.com/

Bootstrap

 

Padding, border 등 클래스로 적용된 유틸리티의 사용도 익혀보세요

Bootstrap 4 Utilities