맨위로가기

부트스트랩 (프론트엔드 프레임워크)

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

부트스트랩은 마크 오토와 제이콥 손턴이 개발한 HTML, CSS, JavaScript 기반의 프론트엔드 프레임워크이다. 트위터 내부 도구의 일관성을 위해 시작되어 2011년 오픈 소스로 공개되었다. 부트스트랩은 반응형 웹 디자인, 모바일 우선 접근 방식, 다양한 컴포넌트, CSS 전처리기 지원, JavaScript 플러그인, 광범위한 브라우저 호환성 등의 특징을 가지며, 웹 페이지 개발을 단순화하여 웹 프로젝트에 일관된 스타일을 적용하는 데 사용된다. 부트스트랩은 Sass와 Less를 지원하며, 그리드 시스템과 재사용 가능한 컴포넌트를 제공한다.

더 읽어볼만한 페이지

  • CSS 프레임워크 - JQuery UI
    jQuery UI는 jQuery를 기반으로 웹 페이지 UI를 개선하는 JavaScript 라이브러리로, 상호 작용 기능, UI 위젯, 시각 효과, 유틸리티를 제공하며 2007년 처음 출시되어 1.12 버전을 마지막으로 개발이 중단되었다.
  • CSS 프레임워크 - YAML (프레임워크)
    YAML 프레임워크는 다양한 콘텐츠 관리 시스템 및 전자 상거래 시스템을 위한 템플릿을 제공하며, TYPO3, 드루팔, 줌라!, 닷넷누크, xt:Commerce, ExpressionEngine, MODX, Papaya CMS, Serendipity, 워드프레스 등 여러 CMS를 지원한다.
  • 반응형 웹 디자인 - 어도비 뮤즈
    어도비 뮤즈는 어도비에서 개발한 웹사이트 제작 소프트웨어이며, 테마와 위젯을 제공하여 정적 HTML 파일을 생성하고, 2012년에 출시되어 2020년에 기술 지원이 종료되었다.
  • 반응형 웹 디자인 - JQuery Mobile
    jQuery Mobile은 다양한 모바일 플랫폼과 데스크톱 브라우저를 지원하며 HTML5 기반 UI 구성과 AJAX 기반 탐색을 통해 모바일 웹 페이지 제작을 돕는 jQuery 기반의 사용자 인터페이스 라이브러리이다.
  • 자바스크립트로 작성된 자유 소프트웨어 - Node.js
    Node.js는 라이언 달이 2009년에 개발한 자바스크립트 런타임 환경으로, 구글 크롬 V8 엔진을 기반으로 구축되었으며 이벤트 기반의 논블로킹 I/O 모델을 사용하여 확장성 있는 네트워크 애플리케이션 개발에 용이하고 웹 서버 및 네트워킹 도구 제작을 위한 다양한 코어 모듈과 npm을 통한 오픈 소스 라이브러리 활용을 제공한다.
  • 자바스크립트로 작성된 자유 소프트웨어 - D3.js
    D3.js는 웹 브라우저에서 데이터를 기반으로 동적인 시각화를 구현하기 위해 사용되는 자바스크립트 라이브러리로, SVG 요소 조작, 데이터-DOM 연결, 다양한 시각화 기능 및 API를 제공하여 복잡한 데이터 시각화를 효율적으로 구현하도록 돕는다.
부트스트랩 (프론트엔드 프레임워크) - [IT 관련 정보]에 관한 문서
개요
부트스트랩 로고
부트스트랩 로고
유형프론트엔드 프레임워크, CSS 프레임워크
개발자https://getbootstrap.com/docs/5.3/about/team/
최초 출시일2011년 8월 19일
최신 안정화 버전5.3.3
최신 안정화 버전 출시일2023년 8월 23일
저장소https://github.com/twbs/bootstrap
프로그래밍 언어HTML, CSS, LESS(v3), Sass(v4), 자바스크립트
플랫폼웹 플랫폼, HTML 렌더링 엔진
라이선스MIT 라이선스 (3.1.0 이전 버전은 아파치 라이선스 2.0)
통계
깃허브 스타 수166,000 이상
웹사이트 사용 점유율3.4%
기타
관련 프로젝트프로젝트
오픈 소스
웹 디자인
웹 개발

2. 역사

부트스트랩은 원래 트위터 블루프린트(Twitter Blueprint영어)라는 이름으로 트위터의 마크 오토(Mark Otto영어)와 제이콥 손턴(Jacob Thornton영어)이 만들었다. 기존의 다양한 인터페이스 라이브러리들은 정형화되지 않아 유지보수에 어려움이 있었고, 이를 통합하기 위해 부트스트랩을 만들었다.[56] 2011년 8월 19일 오픈 소스가 발표되면서 부트스트랩으로 이름이 변경되었다.

2012년 1월 31일에는 12컬럼 그리드 레이아웃과 반응형 웹 디자인을 포함하는 부트스트랩 2가 발표되었다. 2013년 8월 19일에는 모바일 플랫폼을 적용한 부트스트랩 3가 발표되었다.

2. 1. 기원

부트스트랩은 원래 트위터 블루프린트(Twitter Blueprint영어)라는 이름으로, 트위터의 마크 오토(Mark Otto영어)와 제이콥 손턴(Jacob Thornton영어)이 만들었다. 이전에는 인터페이스 개발에 다양한 라이브러리가 사용되어 일관성이 부족하고 유지보수 부담이 컸다. 트위터 개발자였던 마크 오토는 이를 통합하기 위해 부트스트랩을 만들었고, 트위터의 다른 개발자들이 개발에 기여하기 시작했다. 부트스트랩이라는 이름은 2011년 8월 19일 오픈 소스가 발표되면서 지어졌다.[56]

마크 오토에 따르면, 소수의 개발자 그룹이 새로운 내부 도구를 설계하고 구축하면서 더 많은 것을 할 기회를 보았고, 그 과정을 통해 또 다른 내부 도구보다 훨씬 더 실질적인 것을 구축하고 있다는 것을 알게 되었다. 몇 달 후, 회사 내에서 공통 디자인 패턴과 자산을 문서화하고 공유하는 방법으로 부트스트랩의 초기 버전을 얻게 되었다.[6]

소규모 그룹의 개발이 수개월 진행된 후, 트위터 개발팀을 위한 해커톤 스타일의 주간인 해크 위크(Hack Week)를 통해 트위터의 많은 개발자들이 프로젝트에 기여하기 시작했다. 이후 트위터 블루프린트에서 부트스트랩으로 이름이 변경되었으며, 2011년 8월 19일에 오픈 소스 프로젝트로 출시되었다.[7] 오토, 손턴, 소수의 핵심 개발자 그룹, 그리고 대규모 기여 커뮤니티에 의해 지속적으로 유지 관리되고 있다.[8]

2. 2. Bootstrap 2

2012년 1월 31일, 반응형 웹 디자인을 지원하는 부트스트랩 2가 출시되었다. 반응형 웹 디자인은 웹 페이지의 레이아웃이 사용된 장치(데스크톱, 태블릿, 휴대폰)의 특성에 따라 동적으로 조정됨을 의미한다.[9] 부트스트랩 2에는 Glyphicons에 대한 내장 지원, 몇 가지 새로운 구성 요소, 그리고 기존 구성 요소의 변경 사항이 추가되었다. 부트스트랩 2.1.2가 출시되기 직전에 오토(Otto)와 손튼(Thornton)은 트위터(Twitter)를 떠났지만 부트스트랩을 독립적인 프로젝트로 계속 작업하기로 했다.[10]

2. 3. Bootstrap 3

2013년 8월 19일에 출시된 부트스트랩 3는 플랫 디자인과 모바일 우선 방식을 사용하여 컴포넌트를 재설계했다.[11] 부트스트랩 3는 네임스페이스화된 이벤트를 갖춘 새로운 플러그인 시스템을 특징으로 한다. Internet Explorer 7 및 Firefox 3.6 지원을 중단했지만, 이러한 브라우저를 위한 선택적인 폴리필이 있다.[12] 또한 부트스트랩 3는 트위터 조직 대신 깃허브(GitHub)의 twbs 조직에서 출시된 첫 번째 버전이었다.[13]

2. 4. Bootstrap 4

마크 오토는 2014년 10월 29일에 부트스트랩 4를 발표했다.[14] 부트스트랩 4의 첫 번째 알파 버전은 2015년 8월 19일에 출시되었고,[15] 첫 번째 베타 버전은 2017년 8월 10일에 출시되었다.[16] 마크 오토는 부트스트랩 4 작업을 위해 2016년 9월 6일에 부트스트랩 3에 대한 작업을 중단했다. 부트스트랩 4는 2018년 1월 18일에 완성되었다.[17]

주요 변경 사항은 다음과 같다.

  • 코드의 대대적인 재작성
  • Less를 Sass로 대체
  • `Normalize`를 기반으로 하는 단일 파일에 있는 요소별 CSS 변경 사항 모음인 `Reboot` 추가
  • IE8, IE9, 및 iOS 6 지원 중단
  • CSS 플렉서블 박스 지원
  • 탐색 사용자 지정 옵션 추가
  • 반응형 간격 및 크기 조정 유틸리티 추가
  • CSS의 픽셀 단위에서 root em 단위로 전환
  • 가독성 향상을 위해 전역 글꼴 크기를 14px에서 16px로 증가
  • `panel`, `thumbnail`, `pager`, 및 `well` 컴포넌트 삭제
  • `Glyphicons` 아이콘 글꼴 삭제
  • 엄청난 수의 유틸리티 클래스
  • 향상된 폼 스타일, 버튼, 드롭다운 메뉴, 미디어 객체 및 이미지 클래스


부트스트랩 4는 최신 버전의 구글 크롬, 파이어폭스, 인터넷 익스플로러, 오페라, 및 사파리 (Windows 제외)를 지원한다. 또한 IE10과 최신 파이어폭스 확장 지원 릴리스(ESR)까지 지원한다.[18]

2. 5. Bootstrap 5

2021년 5월 5일에 부트스트랩 5가 공식 출시되었다.[19][20]
주요 변경 사항:[21]

  • 새로운 오프캔버스 메뉴 컴포넌트가 추가되었다.
  • jQuery 의존성이 제거되고 순수 자바스크립트를 사용한다.
  • 반응형 거터와 행 바깥에 배치된 열을 지원하도록 그리드가 재작성되었다.
  • 문서가 Jekyll에서 Hugo로 마이그레이션되었다.
  • Internet Explorer 지원이 중단되었다.[22]
  • 테스트 인프라가 QUnit에서 Jasmine으로 이동되었다.
  • 사용자 정의 SVG 아이콘 세트가 추가되었다.[23]
  • CSS 사용자 정의 속성이 추가되었다.
  • API가 개선되었다.
  • 그리드 시스템이 향상되었다.
  • 사용자 정의 문서가 향상되었다.
  • 양식이 업데이트되었다.
  • RTL(Right-to-Left)이 지원된다.
  • 내장된 다크 모드가 지원된다.


2020년 6월 16일에 알파 버전이 출시되었고,[51] 2021년 2월 10일에는 베타 버전이 출시되었다.[52]

베타 버전의 주요 변경 사항은 다음과 같다.

  • 바닐라 JavaScript를 지원하고 jQuery가 삭제되었다.
  • 행 바깥쪽에 배치된 열과 반응형 거터를 지원하도록 그리드가 다시 작성되었다.
  • 문서가 Jekyll에서 Hugo로 이전되었다.
  • IE10 및 IE11 지원이 종료되었다.
  • 테스트 기반이 QUnit에서 Jasmine으로 이전되었다.
  • SVG 아이콘의 사용자 정의 세트가 추가되었다.
  • CSS 사용자 정의 속성이 추가되었다.
  • API가 개선되었다.
  • 그리드 시스템이 강화되었다.
  • 사용자 정의 문서가 개선되었다.
  • 폼이 업데이트되었다.
  • RTL이 지원된다.


곧 등장할 변경 사항으로 오프 캔버스 메뉴 구현이 있으며, Sass 모듈 시스템, CSS 사용자 정의 속성 사용 증가, CSS가 아닌 HTML에 SVG 포함 등은 평가 중인 변경 사항이다.

Bootstrap 5 버전의 첫 번째 사용 예는 공식 출시 며칠 후에 등장했다. 가장 유명한 패키지는 Material Design for Bootstrap 5 & Vanilla JavaScript 머티리얼 디자인 UI 키트이다.[55]

3. 특징

부트스트랩은 웹 페이지 개발을 쉽게 만들어주는 도구 모음으로, HTML, CSS, 그리고 자바스크립트(JS) 라이브러리를 제공한다. 부트스트랩을 사용하면 웹 페이지의 디자인 요소(색상, 크기, 글꼴, 레이아웃 등)를 일관성 있게 적용할 수 있다.

부트스트랩은 텍스트, 표, 양식 등의 요소를 위한 기본적인 스타일을 제공하여 통일된 모양을 보여준다. 개발자는 부트스트랩의 CSS 클래스를 활용하여 디자인을 추가로 변경할 수 있다. 예를 들어, 밝거나 어두운 색상의 표, 페이지 제목, 강조된 인용구 등을 만들 수 있다.

jQuery와 같은 다른 라이브러리가 없어도 작동하는 자바스크립트 구성 요소를 제공하여 대화 상자, 도구 설명, 진행률 표시줄, 드롭다운 메뉴, 캐러셀과 같은 사용자 인터페이스 요소를 사용할 수 있다. 각 구성 요소는 HTML 구조, CSS, 그리고 필요한 경우 자바스크립트 코드로 이루어져 있다. 또한 입력 필드 자동 완성 기능과 같이 기존 인터페이스를 확장하는 기능도 제공한다.

Example of a webpage using Bootstrap framework
파이어폭스에서 렌더링된 부트스트랩 프레임워크를 사용하는 웹 페이지의 예시


부트스트랩의 가장 중요한 구성 요소는 "컨테이너"라고 불리는 레이아웃 구성 요소이다. 모든 요소는 이 컨테이너 안에 배치된다. 개발자는 고정 폭 컨테이너와 유동 폭 컨테이너 중 하나를 선택할 수 있는데, 유동 폭 컨테이너는 항상 웹 페이지 너비에 맞춰지지만, 고정 폭 컨테이너는 화면 크기에 따라 미리 정의된 5가지 너비 중 하나를 사용한다.[5]

  • 576픽셀 미만
  • 576–768픽셀
  • 768–992픽셀
  • 992–1200픽셀
  • 1200–1400픽셀
  • 1400픽셀 이상


컨테이너가 배치되면, 다른 레이아웃 구성 요소는 행과 열을 정의하여 CSS 플렉스박스 레이아웃을 구현한다.

부트스트랩은 미리 컴파일된 버전(CSS 파일 1개, JS 파일 3개)으로 제공되어 쉽게 사용할 수 있다. 또한 개발자는 부트스트랩의 원본 파일을 수정하여 필요 없는 구성 요소를 제거하거나 테마를 적용하는 등 추가적인 사용자 정의 및 최적화를 할 수 있다.

HTML5 및 CSS3에서 주요 웹 브라우저와의 호환성이 있지만, 일부 기능은 구형 브라우저에서 지원되지 않을 수 있다. 그러나 부트스트랩은 부분적인 호환성을 통해 기본적인 정보는 모든 장치와 브라우저에서 사용할 수 있도록 한다. 예를 들어, 둥근 모서리, 그라데이션, 박스 섀도우와 같은 CSS3 기능은 구형 브라우저에서 지원되지 않지만 부트스트랩에서 사용된다.

최근에는 커뮤니티 멤버들이 중국어, 브라질 포르투갈어, 일본어 등 매뉴얼 번역을 진행하고 있다.

3. 1. 반응형 웹 디자인 지원

2012년 1월 31일에 부트스트랩 2가 출시되면서 반응형 웹 디자인을 지원하게 되었다.[9] 이는 웹 페이지의 레이아웃이 사용된 장치(데스크톱, 태블릿, 휴대폰)의 특성에 따라 동적으로 조정됨을 의미한다.[9] 즉, 열람 기기(PC, 태블릿, 휴대 전화)의 사양에 따라 웹 페이지의 레이아웃이 동적으로 조정된다.

표준 설계는 940픽셀 너비의 그리드 레이아웃이며, 사용자는 가변 너비 레이아웃을 사용할 수도 있다. 두 가지 모두 휴대폰, 세로 및 가로 모드, 태블릿, 컴퓨터의 4가지 열람 단말기 및 해상도에 맞춰 열 너비를 조정하는 기능이 있다.

3. 2. 모바일 우선 접근 방식

2013년 8월 19일에 부트스트랩 3가 출시되었다. 부트스트랩 3는 플랫 디자인과 모바일 우선 방식을 사용하여 컴포넌트를 재설계했으며, 네임스페이스화된 이벤트를 갖춘 새로운 플러그인 시스템을 특징으로 한다.[11] Internet Explorer 7과 Firefox 3.6에 대한 지원은 중단되었지만, 이러한 브라우저를 위한 선택적인 폴리필이 있다.[12]

3. 3. 다양한 컴포넌트 제공

부트스트랩은 사용자들이 자주 사용하는 다양한 요소들을 제공한다. 예를 들어, 여러 종류의 버튼, 드롭다운 메뉴, 탭, 라벨, 상태 바 등이 있다.[5]

부트스트랩은 대화 상자, 도구 설명, 진행률 표시줄, 탐색 드롭다운 및 캐러셀과 같은 추가적인 사용자 인터페이스 요소도 제공한다. 이러한 요소들은 jQuery와 같은 다른 라이브러리 없이도 작동한다. 각 부트스트랩 구성 요소는 HTML 구조, CSS 선언, 그리고 경우에 따라 JavaScript 코드로 구성되어 있다. 또한, 입력 필드 자동 완성 기능과 같이 일부 기존 인터페이스 요소의 기능을 확장하기도 한다.[5]

일반적인 HTML 요소 외에도 다음과 같은 요소들을 포함한다.[5]

  • 버튼 확장 기능 (드롭다운, 그룹화, 탐색 목록, 수평/수직 탭, 탐색, 계층적 링크 탐색, 페이지 나누기 위치 자동 수정 등)
  • 레이블
  • 고급 타이포그래피
  • 썸네일
  • 경고 메시지를 포함하는 프로그레스 바

3. 4. CSS 전처리기 지원

부트스트랩은 Sass 및 Less와 같은 CSS 전처리기를 지원한다. 이를 통해 개발자는 변수, 중첩, 믹스인 등의 기능을 사용하여 CSS 코드를 더 쉽게 작성하고 관리할 수 있다.[57]

Sass는 "Syntactically Awesome Style Sheets"의 약자로, CSS의 확장 기능이다. CSS와 완전히 호환되며 중복을 줄여준다. Sass는 햄튼 캐틀린이 설계하고 2006년에 나탈리 와이젠바움이 개발했다. Less는 "Leaner Style Sheets"의 약자로, CSS에 편리한 기능을 추가하여 배우기 쉽다.[57]

부트스트랩은 Sass와 Less 기반의 원본 파일을 제공하여 개발자가 이러한 전처리기를 통해 부트스트랩을 맞춤 설정할 수 있도록 한다. 예를 들어 변수 수정, 기본 스타일 덮어쓰기, 사용자 정의 컴포넌트 및 스타일 추가 등이 가능하다. 이러한 지원 덕분에 부트스트랩은 더 유연해지며, 개발자는 프로젝트 요구 사항에 따라 스타일을 사용자 정의할 수 있다.[57]

부트스트랩 4 버전부터는 Less 대신 Sass를 사용한다.[14][15][16][17]

3. 5. 자바스크립트 플러그인

부트스트랩은 자바 스크립트를 이용하여 드롭다운, 탭, 버튼 등의 기능을 구현한다. jQuery 플러그인 형식으로 일부 JavaScript를 사용할 수 있으며, 대화 상자, 도구 설명, 캐러셀 등의 사용자 인터페이스 기능 외에도, 입력란 자동 완성 기능을 포함한 기존 요소의 확장 기능을 이용할 수 있다. Ver2.0에서는 모달, 드롭다운, Scrollspy, 탭, 도구 설명, 팝오버, 알림, 버튼, 접기, 캐러셀 및 선행 입력 등의 JavaScript 플러그인이 지원된다.[19][20]

Bootstrap 5는 2021년 5월 5일에 공식 출시되었으며, 주요 변경 사항은 다음과 같다.[21]

  • jQuery에 대한 의존성 제거 및 순수 JavaScript 사용
  • 새로운 오프캔버스 메뉴 컴포넌트
  • 반응형 거터와 행 바깥에 배치된 열을 지원하도록 그리드 재작성
  • 문서를 Jekyll에서 Hugo로 마이그레이션
  • Internet Explorer 지원 중단[22]
  • 테스트 인프라를 QUnit에서 Jasmine으로 이동
  • 사용자 정의 SVG 아이콘 세트 추가[23]
  • CSS 사용자 정의 속성 추가
  • API 개선
  • 그리드 시스템 향상
  • 사용자 정의 문서 향상
  • 양식 업데이트
  • RTL(Right-to-Left) 지원
  • 내장된 다크 모드 지원


Dojo Toolkit을 사용한 Twitter용 구현인 Dojo Bootstrap[31][32]도 이용 가능하다. 그것은 Twitter Bootstrap 플러그인의 포트이며, Dojo의 코드를 기반으로 작성되었고, AMD 비동기 모듈 정의[33]에 대응한다.

마찬가지로, AngularJS 제어용 Bootstrap[34]도 존재한다.

3. 6. 광범위한 브라우저 호환성

부트스트랩은 구글 크롬(Google Chrome), 모질라 파이어폭스(Mozilla Firefox), 오페라(Opera), 사파리(Safari) 등 주요 웹 브라우저의 최신 버전을 지원한다.[50] Bootstrap 4는 인터넷 익스플로러(Internet Explorer) 10 및 최신 모질라 파이어폭스(Mozilla Firefox) 확장 지원 릴리스(ESR)를 지원한다.[50]

HTML5 및 CSS3에서는 비교적 지원이 불완전하지만 주요 웹 브라우저와의 호환성이 있다. 웹 사이트 및 웹 애플리케이션의 기본 정보가 모든 장치 및 브라우저에서 이용 가능하도록 부분적인 호환성이라는 개념을 사용하고 있다.

Bootstrap 5에서는 IE10 및 IE11 지원이 중단되었다.[53][54]

4. 구조와 기능



부트스트랩은 모듈화되어 있으며, LESS의 다양한 요소를 구현하고 있다. `bootstrap.less`에는 컴포넌트의 스타일 시트가 포함되어 있어 사용자는 사용할 컴포넌트를 선택하여 파일을 수정할 수 있다.

기본 설계 수정은 제한적인 범위에서 가능하며, LESS 선언을 통해 대규모 수정이 가능하다. LESS 사용 시에는 변수, 함수, 연산자, 중첩된 선택자뿐만 아니라 Mixin이 사용 가능하다.

2.0 버전부터는 문서 내에 특별한 "사용자 정의" 옵션이 추가되어, 사용자는 필요에 따라 다양한 옵션의 값, 컴포넌트, 수정을 폼에서 선택할 수 있다. 이후 생성된 패키지에는 구축된 CSS가 포함된다.

4. 1. CSS

부트스트랩은 HTML 요소(글꼴, 테이블, 폼 등)에 대한 기본적인 스타일 정의를 제공하여 모든 웹 브라우저에서 통일된 모양을 나타낸다.[30] 개발자는 부트스트랩에 정의된 CSS 클래스를 활용하여 밝고 어두운 색상의 표, 페이지 제목, 눈에 띄는 인용구, 강조 표시된 텍스트 등 다양한 스타일을 추가로 적용할 수 있다.[5]

부트스트랩의 미리 컴파일된 버전은 하나의 CSS 파일 형태로 제공되어 모든 프로젝트에 쉽게 추가할 수 있다. 모듈식 구조를 통해 개발자는 필요 없는 구성 요소를 제거하고, 테마를 적용하며, 컴파일되지 않은 Sass 파일을 수정하여 추가적인 사용자 정의 및 크기 최적화를 구현할 수 있다.

4. 2. 그리드 시스템

부트스트랩의 가장 두드러진 구성 요소는 레이아웃 구성 요소이며, 이는 전체 웹 페이지에 영향을 미친다. 기본 레이아웃 구성 요소는 "컨테이너"라고 불리며, 페이지의 다른 모든 요소는 이 컨테이너 안에 배치된다. 개발자는 고정 폭 컨테이너와 유동 폭 컨테이너 중에서 선택할 수 있다. 유동 폭 컨테이너는 항상 웹 페이지의 너비를 채우는 반면, 고정 폭 컨테이너는 페이지를 표시하는 화면 크기에 따라 5가지 미리 정의된 고정 너비 중 하나를 사용한다:[5]

  • 576픽셀 미만
  • 576–768픽셀
  • 768–992픽셀
  • 992–1200픽셀
  • 1200–1400픽셀
  • 1400픽셀 이상


컨테이너가 배치되면 다른 부트스트랩 레이아웃 구성 요소는 행과 열을 정의하여 CSS 플렉스박스 레이아웃을 구현한다.

Ver2.0 이후, 문서 내에 특별한 "사용자 정의" 옵션이 추가되었다. 또한, 사용자는 필요에 따라 다양한 옵션의 값, 컴포넌트, 수정을 폼에서 선택할 수 있다. 이후 생성된 패키지에는 구축된 CSS가 포함된다.

940픽셀 너비의 그리드 레이아웃이 표준 설계이며, 사용자는 대신 가변 너비 레이아웃을 사용할 수 있다. 두 가지 모두 휴대폰, 세로 및 가로 모드, 태블릿, 컴퓨터의 4가지 열람 단말기 및 해상도에 맞춰 열 너비를 조정하는 기능이 있다.

  • Twitter Bootstrap Ver3.0.0의 경우


```html



1 컬럼


1 컬럼


1 컬럼


1 컬럼


1 컬럼


1 컬럼


1 컬럼


1 컬럼


1 컬럼


1 컬럼


1 컬럼


1 컬럼






8 컬럼


4 컬럼






4 컬럼


4 컬럼


4 컬럼






6 컬럼


6 컬럼



4. 3. 재사용 가능한 컴포넌트

부트스트랩은 사용자들이 자주 사용하는 버튼, 드롭다운 메뉴, 탭, 라벨, 상태 바 등의 요소들을 미리 만들어 재사용 가능하게 제공하여 개발 생산성을 높인다.[5]

jQuery와 같은 다른 라이브러리 없이도 작동하는 JavaScript 구성 요소는 대화 상자, 도구 설명, 진행률 표시줄, 탐색 드롭다운 및 캐러셀과 같은 사용자 인터페이스 요소들을 제공한다. 각 부트스트랩 구성 요소는 HTML 구조, CSS 선언, JavaScript 코드로 구성되어 있으며, 입력 필드 자동 완성 기능과 같이 기존 인터페이스 요소의 기능을 확장하기도 한다.[5]

일반적인 HTML 요소 외에도 다음과 같은 요소들이 포함되어 있다.[5]

  • 버튼 확장 기능 (드롭다운, 그룹화, 탐색 목록, 수평/수직 탭, 탐색, 계층적 링크 탐색, 페이지 나누기 위치 자동 수정 등)
  • 레이블
  • 고급 타이포그래피
  • 썸네일
  • 경고 메시지를 포함하는 프로그레스 바

4. 4. 자바스크립트 플러그인

부트스트랩은 웹 애플리케이션과는 달리, 정보성 웹 페이지 개발을 단순화하는 데 중점을 둔 HTML, CSS 및 JS 라이브러리이다. 부트스트랩은 자바 스크립트를 이용하여 드롭다운, 탭, 버튼 등의 기능을 구현한다.

jQuery 플러그인 형식으로 일부 JavaScript를 사용할 수 있으며, 대화 상자, 도구 설명, 캐러셀 등의 사용자 인터페이스 기능 외에도, 입력란 자동 완성 기능을 포함한 기존 요소의 확장 기능을 이용할 수 있다. Ver2.0에서는 모달, 드롭다운, Scrollspy, 탭, 도구 설명, 팝오버, 알림, 버튼, 접기, 캐러셀 및 선행 입력 등의 JavaScript 플러그인이 지원된다.[31][32]

Bootstrap 5는 2021년 5월 5일에 공식 출시되었다. 주요 변경 사항은 다음과 같다.[19][20][21]

  • 새로운 오프캔버스 메뉴 컴포넌트
  • jQuery에 대한 의존성 제거 및 순수 JavaScript 사용
  • 반응형 거터와 행 바깥에 배치된 열을 지원하도록 그리드 재작성
  • 문서를 Jekyll에서 Hugo로 마이그레이션
  • Internet Explorer 지원 중단[22]
  • 테스트 인프라를 QUnit에서 Jasmine으로 이동
  • 사용자 정의 SVG 아이콘 세트 추가[23]
  • CSS 사용자 정의 속성 추가
  • API 개선
  • 그리드 시스템 향상
  • 사용자 정의 문서 향상
  • 양식 업데이트
  • RTL(Right-to-Left) 지원
  • 내장된 다크 모드 지원


Dojo Toolkit을 사용한 Twitter용 구현인 Dojo Bootstrap도 이용 가능하다.[33] 그것은 Twitter Bootstrap 플러그인의 포트이며, Dojo의 코드를 기반으로 작성되었고, AMD 비동기 모듈 정의에 대응한다.

마찬가지로, AngularJS 제어용 Bootstrap도 존재한다.[34]

4. 5. Sass 및 Less 지원

부트스트랩은 Sass영어 스타일시트를 기반으로 한다. Sass와 Less영어는 CSS 전처리기[57]로, 개발자가 변수, 중첩, 믹스인 등의 고급 기능을 사용하여 CSS 코드를 더 쉽게 작성하고 유지 관리할 수 있도록 한다. Sass는 "Syntactically Awesome Style Sheets"의 약자이다. Sass는 CSS의 확장으로, 모든 버전의 CSS와 완전히 호환되며 CSS의 중복을 줄여 시간을 절약해 준다. Sass는 햄튼 캐틀린이 설계하고 2006년에 나탈리 와이젠바움이 개발했다. Less는 "Leaner Style Sheets"의 약자이다. Less는 CSS 언어에 몇 가지 편리한 기능을 추가한 것으로, 배우기 비교적 쉽다.[57]

부트스트랩은 Sass와 Less 기반의 원본 파일을 제공하여 개발자가 이러한 전처리기를 사용할 수 있도록 한다. Sass나 Less를 사용하면 개발자는 변수 수정, 기본 스타일 덮어쓰기, 사용자 정의 컴포넌트 및 스타일 추가 등을 통해 특정 프로젝트의 요구에 맞게 부트스트랩을 맞춤 설정할 수 있다. 이러한 지원 덕분에 부트스트랩은 더 유연해지며, 개발자는 프로젝트 요구 사항에 따라 부트스트랩의 스타일을 사용자 정의할 수 있다.

모듈화되어 있으며, LESS의 다양한 요소를 구현하고 있다. bootstrap.less에는 컴포넌트의 스타일 시트가 포함되어 있으며, 사용자는 사용할 컴포넌트를 선택하여 파일 자체를 수정할 수 있다.

기본 설계의 수정은 제한적인 범위에서 가능하며, LESS에서의 선언을 통해 대규모 수정이 가능해진다.

LESS 사용 시에는 변수, 함수, 연산자, 중첩된 선택자뿐만 아니라 Mixin이 사용 가능하다.

2.0 버전 이후, 문서 내에 특별한 "사용자 정의" 옵션이 추가되었다. 또한, 사용자는 필요에 따라 다양한 옵션의 값, 컴포넌트, 수정을 폼에서 선택할 수 있다. 이후 생성된 패키지에는 구축된 CSS가 포함된다.

참조

[1] 웹사이트 bootstrap/LICENSE https://github.com/t[...]
[2] 웹사이트 bootstrap/LICENSE (v3.0.3) https://github.com/t[...]
[3] 웹사이트 Search · stars:>100000 https://github.com/s[...] 2022-12-04
[4] 웹사이트 Usage statistics and market share of Bootstrap for websites https://w3techs.com/[...] 2023-01-24
[5] 웹사이트 Bootstrap Containers · Bootstrap v5.0 https://getbootstrap[...]
[6] 웹사이트 Bootstrap in A List Apart No. 342 http://markdotto.com[...] 2012-01-17
[7] 웹사이트 Bootstrap from Twitter https://blog.twitter[...] Twitter 2011-08-19
[8] 웹사이트 About https://getbootstrap[...] 2011-08-19
[9] 웹사이트 Say hello to Bootstrap 2.0 https://blog.twitter[...] Twitter 2012-01-31
[10] 웹사이트 Onward https://blog.getboot[...] 2012-09-29
[11] 웹사이트 Bootstrap Blog - Bootstrap 3 released https://blog.getboot[...] 2013-08-19
[12] 웹사이트 Bootstrap 3 released https://blog.getboot[...] 2013-08-19
[13] 웹사이트 Bootstrap 3 plans https://blog.getboot[...] 2012-12-10
[14] 웹사이트 Bootstrap 3.3.0 released https://blog.getboot[...] 2014-10-29
[15] 웹사이트 Bootstrap 4 alpha https://blog.getboot[...] 2015-08-19
[16] 웹사이트 Bootstrap 4 Beta https://blog.getboot[...] 2017-08-10
[17] 웹사이트 Bootstrap 4 https://blog.getboot[...] 2018-01-18
[18] 웹사이트 Supported browsers https://getbootstrap[...]
[19] 웹사이트 Release Release v5.0.0 (#33647) · twbs/bootstrap https://github.com/t[...] 2021-05-05
[20] 웹사이트 Bootstrap 5 https://blog.getboot[...] 2021-05-05
[21] 웹사이트 Bootstrap 5 grid by MartijnCuppens · Pull Request #28517 · twbs/bootstrap https://github.com/t[...] 2019-09-29
[22] 웹사이트 v5: drop Internet Explorer support by XhmikosR · Pull Request #30377 · twbs/bootstrap https://github.com/t[...] 2020-04-07
[23] 웹사이트 Bootstrap Icons https://icons.getboo[...] 2022-11-07
[24] 웹사이트 Bootstrap-Flask https://github.com/h[...] HelloFlask 2022-11-07
[25] 웹사이트 Bootstrap-Django https://github.com/z[...] zelenij 2022-11-07
[26] 웹사이트 GitHub: Search Stars>10000 https://github.com/s[...]
[27] 웹사이트 NASA - Spot The Station http://spotthestatio[...] 2012-11-06
[28] 웹사이트 MSNBC - Breaking News http://www.breakingn[...] 2012-11-06
[29] 문서 About - Bootstrap v5.3 http://getbootstrap.[...]
[30] 문서 http://blog.seoseman[...]
[31] 문서 Blog: Using Twitter Bootstrap with Dojo http://kevinandre.co[...]
[32] 문서 Dojo Toolkit implementation of Twitter Bootstrap http://dojobootstrap[...]
[33] 문서 AMD for asynchronous loading of modules and its dependencies https://github.com/a[...]
[34] 문서 http://angular-ui.gi[...]
[35] 웹사이트 Bootstrap in A List Apart No. 342 https://markdotto.co[...] 2012-01-17
[36] 웹사이트 Bootstrap from Twitter https://blog.twitter[...] 2021-03-16
[37] 웹사이트 概要 https://getbootstrap[...] 2021-03-16
[38] 웹사이트 Say hello to Bootstrap 2.0 https://blog.twitter[...] 2021-03-16
[39] 웹사이트 Bootstrap 3 released https://blog.getboot[...] 2013-08-19
[40] 웹사이트 Bootstrap 3.3.0 released https://blog.getboot[...] 2014-10-29
[41] 웹사이트 Bootstrap 4 alpha https://blog.getboot[...] 2015-08-19
[42] 웹사이트 Bootstrap 4 Beta https://blog.getboot[...] 2017-08-10
[43] 웹사이트 Bootstrap 4 https://blog.getboot[...] 2018-01-18
[44] 웹사이트 Bootstrapのパネルは、コンテンツの周りに少々のパディングがある境界の付いたボックス https://bootstrap.ha[...] Bootstrap 2023-05-19
[45] 웹사이트 Images - Bootstrap 4.2 日本語リファレンスImage thumbnails https://getbootstrap[...] Bootstrap 2023-05-19
[46] 웹사이트 Pagination(ページネーション) https://getbootstrap[...] Bootstrap 2023-05-19
[47] 웹사이트 .well クラスは、灰色の背景色と少々のパディングを持ち、要素の周りに丸みのある境界線を追加 https://bootstrap.ha[...] Bootstrap 2023-05-19
[48] 웹사이트 GLYPHICONS - Visual language that everybody understands https://glyphicons.c[...] 2023-05-19
[49] 웹사이트 Bootstrap 4 utility classes https://www.oreilly.[...] O’Reilly 2023-05-19
[50] 웹사이트 Introduction https://getbootstrap[...] 2021-03-16
[51] 웹사이트 Bootstrap 5 alpha! https://blog.getboot[...] 2020-06-16
[52] 웹사이트 Bootstrap 5 beta 2 - Summary, download, tutorial & next releases https://mdbootstrap.[...] 2021-03-16
[53] 웹사이트 Release Release v5.0.0 (#33647) · twbs/bootstrap https://github.com/t[...] 2021-05-05
[54] 웹사이트 Bootstrap 5 https://blog.getboot[...] 2022-10-01
[55] 웹사이트 Bootstrap 5 & Material Design 2.0 https://mdbootstrap.[...] 2021-03-16
[56] 웹인용 Bootstrap from Twitter https://blog.twitter[...] Twitter 2011-08-19
[57] 웹인용 https://segmentfault[...] 2024-07-28


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com