문서 보기문서 편집수정 내역 Bootstrap(프레임워크) (r0 버전으로 되돌리기) [[분류:웹 프레임워크]][[분류:2011년 출시]][[분류:X(SNS)]] [include(틀:웹 프레임워크)] ||<-2><table width=350><table align=right><table bordercolor=#9013fe><colbgcolor=#9013fe><colcolor=#fff><table bgcolor=#fff,#191919> {{{+1 '''부트스트랩'''}}}[br]Bootstrap || ||<-2><height=170><bgcolor=#fff,#191919> [[파일:Bootstrap 로고.svg|height=120]] || || '''종류''' ||[[프론트엔드(프로그래밍)|프론트엔드]] [[프레임워크]] || || '''라이선스''' ||[[MIT 라이선스]] || || '''개발''' ||Bootstrap 팀 || || '''버전''' ||v5.3.1 (2023년 7월 26일)|| ||<-2><bgcolor=#fff,#191919><color=#373a3c,#dddddd> [[https://getbootstrap.com/|[[파일:홈페이지 아이콘.svg|width=24]]]] | [include(틀:GitHub 로고,링크=twbs,크기=24)] | [include(틀:트위터 로고,링크=getbootstrap,크기=24)] || [목차] [clearfix] == 개요 == [[트위터]]에서 시작된 [[오픈 소스]] [[프론트엔드(프로그래밍)|프론트엔드]] [[프레임워크]].[* 5.0.0 이후로 [[jQuery]]는 사용하지 않는다.] 시작은 디자이너 한명과 트위터의 한 개발자였지만 지금은 트위터에서 주도적으로 개발하고 있지는 않다. 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인과 기능을 [[CSS]]와 [[JavaScript]]로 만들어 놓은 것이며, 초창기에는 웹 디자이너나 개발자 사이에서 웹 디자인의 혁명이라고 불릴 정도로 폭발적인 반응을 얻었던 프레임워크이다. == 장점 == 부트스트랩 프레임워크는 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘 등의 자잘한 것뿐만 아니라, 드롭다운 메뉴, 내비게이션 바, 버튼, 탭, 리스트, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 웹 페이지에서 많이 쓰이는 요소를 거의 전부 내장하고 있다. 이 때문에 웬만한 웹 페이지는 부트스트랩의 CSS와 JavaScript 관련 사항만 설치하고 미리 지정된 CSS 클래스나 JavaScript 함수만 불러오면 트위터에서 쓰는 것과 비슷한 디자인을 순식간에 만들 수 있었다. 다만 v5 버전에서는 트위터의 디자인과는 거리가 멀어졌다. PC용 디자인뿐 아니라 태블릿이나 스마트폰 같은 모바일용 디자인을 반응형으로 한번에 지원한다. 이 때문에 디자인 소요 시간이 크게 줄어들었고, 여러 웹 브라우저를 지원하기 위한 크로스 브라우징에 골머리를 썩일 필요가 없어졌다. 크로스 브라우징을 위한 각종 핵도 들어 있기 때문이다.[* 물론 인터넷 익스플로러 6은 너무 오래된 브라우저라서 지원하지 않는다. 2.x는 인터넷 익스플로러 7부터, 3.x는 8부터, 4.x는 10부터 지원한다. 5.x는 지원하지 않는다.] 거기다 화면 해상도 크기에 따라 자동으로 정렬되는 "그리드 시스템"[* 화면을 수직으로 12개의 그리드로 분할하여 거기에 맞춰 각 요소의 박스 크기를 정해 쓸 수 있다. 이 그리드의 크기는 화면 해상도 크기에 따라 사용자가 임의로 설정하거나 자동으로 정렬 할 수 있다.]을 채용하고 있기 때문에 하나의 웹 페이지로 데스크탑, 태블릿, 스마트폰 모든 기기에서 무리없이 보게 만들 수 있다. 즉 [[반응형 웹]]을 지원한다는 의미이다. 심지어 이게 오픈 소스다. 라이선스는 [[MIT 허가서]]를 사용하는데, 소스 코드 공개의 의무가 없어 재배포 면에서는 [[GPL]]보다 휠씬 자유로운 라이선스이다. 단, 같이 들어 있는 Glyphicon 아이콘은 CCL BY 3.0을 사용하므로 출처를 밝혀야 한다.[* 근데 Glyphicon은 잘 안 쓴다. 부트스트랩과 호환되는 [[https://fontawesome.com/?from=io|Font Awesome]]을 더 많이 쓰기 때문인데, Pro(유료) 버전을 빼더라도 무료 아이콘 수가 1,500여개를 넘어가기 때문에 개수 면에서도 넘사벽이고 폰트 형식이라 크기 변환도 자유롭기 때문. 결국 v4.0.0 이후에는 기존 아이콘 패키지가 빠지고, 자체적인 Bootstrap Icon을 탑재했다.] 소스까지 오픈되어 있다 보니 여기서 파생된 프로젝트만 해도 수천 개가 넘어간다. == 단점 == 사전 정의된 디자인이 있다보니 비슷한 디자인의 페이지가 양산될 수 있지만, 사실 이 문제는 오픈 소스의 힘으로 극복할 수 있다. 부트스트랩은 오픈 소스다 보니 사용자가 임의로 변경하는 것이 자유롭고, 변경한 것을 재배포하거나 상업적으로 판매하는 것이 가능하다. 유저들이 변경한 테마를 내려받아 적용하는 것도 어렵지 않다. [[HTML5]]에 맞춰져 있다 보니 구형 브라우저 지원이 미흡하다. HTML5가 제대로 지원되지 않는 IE7, 8을 지원하려면 강제로 HTML5를 인식시키는 html5shiv 같은 JavaScript 코드가 필요하고, 가뜩이나 JavaScript 해석이 느린 IE 구 버전을 더 느려지게 하는 주범이 된다. 사실 IE 8을 아직도 쓰는 사람이 문제긴 하다. 2022년 시점에서는 IE 구 버전과 그 구 버전을 기본 탑재했던 OS는 모두 지원이 종료되었고 Windows 8.1, 10에 기본 탑재된 IE 11만 남은 상황이므로 구 버전 지원은 특수한 상황 이외에는 필요가 없어졌다. 마지막으로 남아 있는 IE 11도 2022~2023년 내에 모두 지원이 종료될 예정이다. == 버전 == [[2013년]] 8월 19일 3.0 정식 버전이 나왔다. 2.x대 버전보다 구조를 단순화하고 모바일 지원을 강화했다. 이러다보니 디자인이 2.x보다 상당히 심플해졌는데, 2.x 시절의 디자인을 지원하는 테마 CSS 파일을 별도로 제공한다. 테마 CSS를 적용하면 2.x 시절의 디자인을 볼 수 있다. [[2015년]] 8월 19일, 부트스트랩 탄생 4주년을 기념해 버전 4의 알파 테스트가 시작되었다. 컴파일러가 less에서 sass로 변경되었고, 그리드 시스템을 개선, Flexbox 지원, well, thumbnail, panel 컴포넌트를 card로 통합하는 등 많은 변경점이 예정되어 있다. 업데이트에 따라 IE8 지원도 끊기고 최소 지원이 IE9로 올라갈 예정이다. 그래서 자연스럽게 [[Windows XP]]의 부트스트랩 지원도 버전 3에서 끊긴다. 버전 3 때 버전 2의 지원을 바로 끊어버려서 많은 혼란이 있었던 것에 반해 이번 버전 4는 발표 이후에도 버전 3의 지원을 당분간 계속할 것이라고 한다. [[2016년]] 9월 알파 테스트를 시작한지 1년이 넘도록 알파 테스트가 계속 진행중이다. 버전 3이 거의 6개월만에 알파 베타 테스트를 다 하고 정식버전을 내놓은 것에 비하면 상당히 느린 행보다. 그러다 [[2016년]] 7월 27일 알파 3 버전이, 9월 5일에 알파 4 버전이 나왔다. 현재는 정식으로 버전 4가 나온 상태다. v4.0.0 부터는 호환성보다는 성능을 고려하여 IE10 이상만 지원하게 되었다. 윈도우XP 지원 종료로 인해 IE8 이하 버전은 지원을 중단하고, 마지막 버전인 IE11의 점유율이 증가했기 때문이다.([[https://www.koreahtml5.kr/jsp/infoSquare/browserUseStatsKor.jsp?type_code_LIST=USST0001&os_code=all&search_type=B&search_date=201611|#]]) 구 버전 브라우저에서도 레이아웃 깨짐 없이 잘 보여야 하는 사이트는 부트스트랩3 사용을 권고하고 있다.([[https://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#desktop-browsers|#]]) 가장 큰 변경점은 레이아웃 박스가 CSS flex 기반으로 바뀌었다. [[2021년]] 5월 5일 v5.0.0 정식 버전이 출시되었다. 이제 v5.0.0 이상부터는 모든 IE 브라우저에 대한 지원이 중단된다. IE환경에서 부트스트랩을 사용하려면 v4.x를 사용해야 한다. 또한 기존 [[jQuery]] 형식의 스크립트가 전부 [[JavaScript]]로 대체되었다. 물론 기존과 동일하게 [[jQuery]]를 통한 제어도 가능하다. [[4K]](3840x2160) 해상도에 대한 향후 대중화 및 기존 모바일 화면들의 크기가 전반적으로 커졌기 때문에 기존 5개의 브레이크포인트가 좀 더 세분화된 6개의 브레이크포인트로 변경되었다. 이외에도 다양한 유틸리티들이 추가되었고 특히 bootstrap icon의 [[SVG]]가 대량으로 추가되었다. 2021년 8월 4일 5.1 버전이 출시되었는데, CSS Grid 기반의 레이아웃을 추가로 지원하고, 최신 트렌드인 좌측이나 우측 슬라이드 형식의 내비게이션 메뉴를 지원하는 등 많은 변경점이 생겼다. == 관련 문서 == * [[반응형 웹]] * [[HTML5]] * [[CSS]] == 부트스트랩이 적용된 사이트 == '''[[나무위키]]에 해당 문서가 있는 경우만 등재해 주세요.''' 단, 부트스트랩 이외의 [[반응형 웹]]이 적용된 사이트는 해당 문서에 등재해주세요. * ~~[[BGM STORAGE]]~~[* 2014년도에 홈페이지 폐쇄.] * [[FOX NEWS]] 공식 홈페이지 * [[Nyaa]] * [[Overcast Network]] * [[XpressEngine]] 공식 홈페이지 * [[나는 갈 데가 없다]] * --[[나무위키]]--[* 전에는 다음 도우 기반이였으나 2015년경 기본 스킨이 senkawa로 바뀌었다. 현재 4.0.0 알파 버전을 쓰고 있다.][* [[the seed]] 버전 4.13.0부터 senkawa는 Bootstrap이 제거되었다.] * [[뉴리넷]] * [[뉴스위크]] * [[도쿠위키]]: Bootstrap 플러그인이 사용된 경우 * [[로이터]] 공식 홈페이지 * [[리그베다 위키]] * [[리그베다 위키 게시판/사태 전]] * [[리브레 위키]] * --[[무나키위]]--[* 2016년에 폐쇄.] * [[아임웹]] * [[위키닷]] 공식 홈페이지[* 단, 여기서 제공하는 위키는 제외. 부트스트랩 테마를 선택할 순 있지만 아닌 경우도 많다. 위키닷 기반의 위키사이트이면서 부트스트랩을 사용하지 않는 대표적인 경우가 [[SCP 재단]].] * [[위키메이슨]] * [[커그]] * ~~[[티비플]]~~[* 2019년도에 홈페이지 폐쇄.] * [[포브스]] india 공식 홈페이지캡챠되돌리기