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

Bootstrap (front-end framework)
부트스트랩
Bootstrap logo.svg
원저작자마크 오토, 제이콥 손턴
개발자부트스트랩 코어팀
초기 릴리즈2011년 8월 19일, 10년 전(2011-08-19)
안정된 릴리스
5.2.0[1] / 2022년 7월 19일; 19일 전 (2022년 7월 19일)
저장소부트스트랩 저장소
기입처HTML, CSS, Less(v3), Sass(v4) 및 JavaScript
플랫폼웹 플랫폼
면허증.MIT 라이선스(3.1.0보다 이전 버전)
웹 사이트getbootstrap.com Edit this on Wikidata

부트스트랩은 응답성이 뛰어난 모바일 우선 프런트 엔드 웹 개발을 지향하는 자유 오픈 소스 CSS 프레임워크입니다.여기에는 HTML, CSS 및 (옵션) 타이포그래피, 폼, 버튼, 내비게이션 및 기타 인터페이스 컴포넌트용 JavaScript 기반 설계 템플릿이 포함되어 있습니다.

2022년 7월 현재 부트스트랩은 158,000개 이상의 별을 가진 GitHub에서 8번째로 많은 별을 [2]가진 프로젝트이다.

특징들

부트스트랩은 HTML, CSS 및 JS 라이브러리로 웹 어플리케이션이 아닌 유익한 웹 페이지 개발을 단순화하는 데 중점을 두고 있습니다.웹 프로젝트에 추가하는 주된 목적은 Bootstrap이 선택한 색상, 크기, 글꼴 및 레이아웃을 프로젝트에 적용하는 것입니다.따라서 담당 개발자가 자신의 취향에 맞는 선택을 할 수 있느냐가 주요 요인이다.프로젝트에 추가되면 Bootstrap은 모든 HTML 요소에 대한 기본 스타일 정의를 제공합니다.그 결과 웹 브라우저 전체에서 산문, 표 및 폼 요소가 균일하게 나타납니다.또한 개발자는 부트스트랩에 정의된 CSS 클래스를 이용하여 콘텐츠의 외관을 더욱 맞춤화할 수 있습니다.예를 들어, Bootstrap은 밝은 색과 어두운 색상의 테이블, 페이지 제목, 더 눈에 띄는 풀 따옴표 및 강조 표시가 있는 텍스트를 프로비저닝했습니다.

부트스트랩은 jQuery와 같은 다른 라이브러리를 필요로 하지 않는 몇 가지 자바스크립트 컴포넌트와 함께 제공됩니다.대화상자, 툴팁, 프로그레스바, 네비게이션드롭다운, 회전목마 등의 추가 사용자 인터페이스 요소를 제공합니다.각 부트스트랩컴포넌트는 HTML 구조, CSS 선언 및 경우에 따라서는 JavaScript 코드로 구성됩니다.또한 입력 필드의 자동 완성 기능 등 일부 기존 인터페이스 요소의 기능도 확장합니다.

Example of a webpage using Bootstrap framework
Firefox에서 렌더링된 부트스트랩 프레임워크를 사용한 웹 페이지 예시

부트스트랩의 가장 중요한 컴포넌트는 레이아웃 컴포넌트이며 웹 페이지 전체에 영향을 미칩니다.페이지의 다른 모든 요소가 배치되기 때문에 기본 레이아웃 구성요소를 "컨테이너"라고 합니다.개발자는 고정 폭의 용기와 유체 폭의 용기 중 하나를 선택할 수 있습니다.후자는 항상 웹 페이지의 너비를 채우는 반면, 전자는 페이지를 표시하는 화면의 크기에 따라 사전 정의된 5개의 고정 너비 중 하나를 사용합니다.

  • 576픽셀 미만
  • 576 ~ 768 픽셀
  • 768 ~ 992 픽셀
  • 992 ~ 162 픽셀
  • 1200픽셀보다 크다

컨테이너가 배치되면 다른 부트스트랩 레이아웃 컴포넌트는 행과 열을 정의함으로써 CSS Flexbox 레이아웃을 구현합니다.

부트스트랩의 사전 컴파일 버전은 임의의 프로젝트에 쉽게 추가할 수 있는1개의 CSS 파일과3개의 JavaScript 파일 형식으로 이용할 수 있습니다.그러나 Bootstrap의 원시 형식을 통해 개발자는 추가 맞춤 및 크기 최적화를 구현할 수 있습니다.이 raw 형식은 모듈러형입니다.즉, 개발자는 불필요한 컴포넌트를 삭제하고 테마를 적용하며 컴파일되지 않은 Sass 파일을 수정할 수 있습니다.

역사

초기 시작

Bootstrap은 원래 Twitter 청사진이라는 이름으로 마크 오토와 제이콥 손턴이 Twitter에서 내부 툴 간의 일관성을 장려하기 위한 프레임워크로 개발했습니다.부트스트랩 이전에는 인터페이스 개발을 위해 다양한 라이브러리가 사용되었으며 이는 불일치와 높은 유지보수 부담을 초래했습니다.오토에 따르면:

초소형 개발자들과 저는 새로운 내부 도구를 설계하고 구축하기 위해 함께 모였고, 더 많은 것을 할 수 있는 기회를 보았습니다.이 과정을 통해 우리는 다른 내부 도구보다 훨씬 더 실질적인 무언가를 구축하는 것을 볼 수 있었습니다.몇 달 후,[3] 우리는 회사 내에서 공통적인 설계 패턴과 자산을 문서화하고 공유하는 방법으로 Bootstrap의 초기 버전을 갖게 되었습니다.

소규모 그룹이 몇 달 동안 개발한 후, 트위터 개발팀을 위한 해커톤 스타일의 주간인 Hack Week의 일환으로 트위터의 많은 개발자들이 이 프로젝트에 참여하기 시작했다.Twitter 청사진에서 Bootstrap으로 이름이 변경되어 2011년 [4]8월 19일 오픈 소스 프로젝트로 출시되었습니다.Otto, Thornton, 핵심 개발자로 구성된 소규모 그룹 및 대규모 [5]기부자 커뮤니티에 의해 유지되고 있습니다.

부트스트랩 2

2012년 1월 31일, 부트스트랩 2가 출시되었으며, 이는 글리피콘과 몇몇 새로운 컴포넌트에 대한 내장 지원과 많은 기존 컴포넌트에 대한 변경을 추가하였다.이 버전은 응답성이 뛰어난 웹 설계를 지원합니다.즉, 사용하는 디바이스(데스크탑, 태블릿, 휴대 전화 [6]등)의 특성을 고려하여 웹 페이지의 레이아웃이 동적으로 조정됩니다.

부트스트랩 3

2013년 8월 19일 부트스트랩 3가 출시되었습니다.평면 설계와 모바일 퍼스트 어프로치를 사용하도록 부품을 재설계했습니다.부트스트랩3은 이벤트 이름 지정이 가능한 새로운 플러그인 시스템을 갖추고 있습니다.부트스트랩3에서 Internet Explorer 7 및 Firefox 3.6 지원이 끊어졌지만 이들 브라우저에는 [7]옵션 폴리필이 있습니다.

부트스트랩 4

오토는 2014년 [8]10월 29일에 부트스트랩 4를 발표했습니다.부트스트랩4의 첫 번째 알파 버전은 2015년 [9]8월 19일에 출시되었습니다.첫 번째 베타 버전은 2017년 [10]8월 10일에 출시되었습니다.Otto는 2016년 9월 6일 부트스트랩 4에서 작업할 수 있는 시간을 확보하기 위해 부트스트랩 3에서 작업을 중단했습니다.부트스트랩4는 2018년 [11]1월 18일에 완성되었습니다.

중요한 변경 사항은 다음과 같습니다.

  • 코드의 메이저 개서
  • Sass로의 치환 감소
  • 추가Reboot1개의 파일로 구성되는 요소 고유의 CSS 변경 컬렉션,Normalize
  • IE8, IE9 및 iOS 6 지원 중단
  • CSS Flexible Box 지원
  • 탐색 사용자 정의 옵션 추가
  • 응답성 높은 간격 설정 및 크기 조정 유틸리티 추가
  • CSS의 픽셀 단위에서 루트 EMS로 전환
  • 글로벌 글꼴 크기를 14px에서 16px로 확대하여 가독성 향상
  • 의 드롭panel,thumbnail,pager,그리고.well구성 요소들
  • 의 드롭Glyphicons아이콘 폰트
  • 방대한[quantify] 수의 유틸리티 클래스
  • 폼 스타일링, 버튼, 드롭다운 메뉴, 미디어 객체 및 이미지 클래스 개선

부트스트랩 4는 최신 버전의 Google Chrome, Firefox, Internet Explorer, Opera 및 Safari를 지원합니다(Windows 제외).IE10 및 최신 Firefox 확장 지원 릴리스(ESR)[12]에 대한 지원도 제공합니다.

부트스트랩 5

부트스트랩 5는 2021년 [13][14]5월 5일에 공식적으로 출시되었습니다.

주요 변경 사항은 다음과 같습니다.[15]

  • 새 오프캔버스 메뉴 구성 요소
  • jQuery에 의존하지 않고 vanilla JavaScript에 의존하지 않음
  • 행 외부에 배치된 반응성 거터 및 열을 지원하도록 그리드 다시 쓰기
  • 지킬에서 휴고로 문서 이행
  • Internet[16] Explorer 지원 중지
  • Qunit에서 Jasmine으로 테스트 인프라스트럭처 이동
  • 사용자 정의 SVG 아이콘 세트 추가
  • CSS 커스텀 속성 추가
  • 개선된 API
  • 강화된 그리드 시스템
  • 문서 커스터마이즈 개선
  • 갱신된 폼
  • RTL 지원

「 」를 참조해 주세요.

레퍼런스

  1. ^ https://blog.getbootstrap.com/2022/07/19/bootstrap-5-2-0/; 발행일 : 2022년 7월 19일
  2. ^ "Search · stars:>1". GitHub. Retrieved November 14, 2018.
  3. ^ Otto, Mark (January 17, 2012). "Bootstrap in A List Apart No. 342". Mark Otto's blog. Archived from the original on October 28, 2016. Retrieved February 23, 2017.
  4. ^ Otto, Mark (August 19, 2011). "Bootstrap from Twitter". Developer Blog. Twitter. Archived from the original on February 23, 2017. Retrieved February 23, 2017.
  5. ^ "About". Bootstrap. Retrieved February 23, 2017.
  6. ^ Otto, Mark (January 31, 2012). "Say hello to Bootstrap 2.0". Developer Blog. Twitter. Archived from the original on February 23, 2017. Retrieved February 23, 2017.
  7. ^ Otto, Mark (August 19, 2013). "Bootstrap 3 released". Archived from the original on October 21, 2016. Retrieved February 23, 2017.
  8. ^ Otto, Mark (October 29, 2014). "Bootstrap 3.3.0 released". Archived from the original on July 24, 2016. Retrieved February 23, 2017.
  9. ^ Otto, Mark (August 19, 2015). "Bootstrap 4 alpha". Archived from the original on January 23, 2017. Retrieved February 23, 2017.
  10. ^ Otto, Mark; Thornton, Jacob (August 10, 2017). "Bootstrap 4 Beta". Retrieved August 16, 2017.
  11. ^ "Bootstrap 4". blog.getbootstrap.com. January 18, 2018. Retrieved February 5, 2021.
  12. ^ "Supported browsers". Bootstrap. Retrieved February 23, 2017.
  13. ^ "Release Release v5.0.0 (#33647) · twbs/bootstrap". GitHub. Retrieved May 5, 2021.
  14. ^ "Bootstrap 5". blog.getbootstrap.com. May 5, 2021.
  15. ^ "Bootstrap 5 grid by MartijnCuppens · Pull Request #28517 · twbs/bootstrap". GitHub. Retrieved September 29, 2019.
  16. ^ "v5: drop Internet Explorer support by XhmikosR · Pull Request #30377 · twbs/bootstrap". GitHub. Retrieved April 7, 2020.

외부 링크

Wikimedia Commons에는 부트스트랩(프레임워크)과 관련된 미디어가 있습니다.