부트스트랩

부트스트랩(bootstrap)은 웹 사이트나 웹 응용 프로그램을 작성하기 위해 사용하는 무료 소프트웨어 도구 모음이다.

개요

부트스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크로, 입력 창, 버튼, 내비게이션 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS기반의 디자인 템플릿으로 제공하며 추가적인 자바스크립트 확장들도 포함한다. 하나의 CSS 로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하고 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다. 부트스트랩은 트위터의 두 개발자인 마크 오토(Mark Otto)와 제이콥 손튼(Jacob Thornton)에 의해 처음으로 개발되었다. 트위터 내부적으로 개발을 일관성 있게 통합하고 유지하기 위해 개발된 프레임워크로 초기에는 트위터 블루프린트(Twitter Blueprint)라 불렸다. 그 후 몇 달의 개발 기간을 거쳐 이름을 부트스트랩으로 바꾸고 2011년 8월에 최초로 공개되었다.

역사

트위터에서 시작된 jQuery기반의 오픈 소스 웹 프레임워크로 시작은 디자이너 하나와 트위터의 한 개발자였다. 부트스트랩의 원래 이름은 Twitter Blueprint로 마크 오토(Mark Otto)와 제이콥 손튼(Jacob Thornton)이 만들었다. 기존에 여러 인터페이스에 대응하기 위한 다양한 라이브러리들이 존재했지만 정형화되지 않아 유지, 보수에 어려움이 있었다. 트위터의 개발자였던 Mark Otto는 이를 통합하기 위해 부트스트랩을 만들었고 트위터의 다른 개발자들이 개발에 기여하기 시작했다. 부트스트랩이라는 이름은 2011년 8월 19일 오픈 소스가 발표되면서 지어졌다. 2012년 1월 31일 부트스트랩 2가 발표되었다. 이 버전에서는 12컬럼 그리드 레이아웃과 반응형 디자인이 포함되었다. 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개월만에 알파 베타 테스트를 다 하고 정식을 내놓은 것에 비하면 상당히 느린 행보다. 2015년 12월 8일에 알파 2 버전이 나온 이후로는 7개월간 아무런 소식이 없었고, 공식 블로그도 침묵에 빠졌다. 그러다 2016년 7월 27일 알파 3 버전이, 9월 5일에 알파 4 버전이 나왔다. 윈도우 XP 지원 종료로 인해 IE8 이하 버전이 버려지고, 최신 버전이자 마지막 버전인 IE11의 점유율이 증가하면서 호환성보다는 성능을 고려하여 부트스트랩 4 버전부터는 IE10 이상만 지원하게 되었다. 구버전 브라우저에서도 레이아웃 깨짐 없이 잘 보여야 하는 사이트는 부트스트랩 3을 쓰라고 권고하고 있다. 현재 2019년 가장 최신버전은 4.3버전이다.

특징

타이포그래피 및 각종 메뉴를 포함한 웹 페이지에서 사용되는 거의 모든 요소를 내장하고 있기 때문에 부트스트랩의 CSS와 자바스크립트, 관련 이미지만 있으면 대부분의 웹 페이지를 손쉽게 제작할 수 있도록 지원한다. 모듈화 되어 있으며 LESS(CSS의 기능을 보완해주는 전처리기이자 스타일시트 언어)의 다양한 요소를 구현하고 있다. 웹 브라우저의 종류 및 크기에 따라 디자인 요소가 자동으로 정렬되는 그리드 레이아웃을 표준 설계로 사용하며 동일한 하나의 웹 페이지를 수정 없이 데스크탑, 태블릿, 스마트 폰에서모두 볼 수 있도록 지원한다. 버전 2.0에서는 팝 오버(pop over) 경고, 버튼, 툴 팁(tool tip), 탭 등의 플러그인이 지원되기 시작하였다.

Bootstrap에서 해주고 있는 가장 기본적인 동작 중 하나는 바로 최대한 모든 브라우져들에서 동작할 수 있는 다른 스타일들을 하나로 통일 시켜주는 것이다. 예를 들면 태그가 있으면, 각 브라우져별로 이 태그안에 있는 텍스트를 어떠한 방식으로, 어떠한 크기와 어떠한 폰트, 그리고 어떠한 굵기로 보여줄지 각각 판단해서 보여주어야 한다. 이럴 때 서로 다른 브라우져에서 만약 다르게 이 태그를 표시해준다면 브라우져별로 보이는 내용이 달라질 수 있는 위험성이 있기 때문에 이러한 것들을 브라우져의 기본값을 사용하도록 하는 것이 아니라, 각 태그들에 대하여 기본적인 설정들을 명시하고 있다.

반응형 웹(Responsive Web)

디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정 되는 것을 말한다. 어떠한 환경에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 만드는 웹이죠. 오직 하나의 HTML소스 만으로 특정 장치에 최적화된 환경을 사용자에게 제공한다. 반응형 웹에 있어서 빼놓을 수 없는 개념이 모바일 퍼스트이다. 모바일 퍼스트는 웹 디자인을 할때, PC보다 모바일 기기를 먼저 생각해서 디자인하고 프로그래밍 하는 기법이다. 이 개념은 앞서 말했 듯 태블릿 PC, 스마트 폰등 모바일 기기의 이용이 늘어나면서 일반 웹 사용자보다 모바일 웹 사용자가 더 많아지면서 생기게 됐다. 모바일 퍼스트의 핵심은 모바일의 제약을 집중의 기회로 본다는 것에 있다. 모바일의 제약은 크게 세가지로 나눌 수 있다.

• 모바일 기기의 스크린 크기
• 네트워크 속도 및 품질
• 사용하는 모드

위 세가지 제약을 통해 일반 웹은 모바일 웹에 있어서 불필요한 요소(기능/형식/꾸미기/이동)들을 가지고 있다고 판단한다. 불필요한 요소를 최소화 시킨 모바일 웹은 사이트가 진짜로 제공해야 할 내용과 기능이 무엇인지 나타낸다다. 그리고 사용자들에게 사용하기 편하고 작업을 빠르게 처리할수 있는 웹을 제공 한다. 그 중 가장 대표적인 것으로 일반 웹 메뉴를 한 버튼으로 축소 시켜놓고 첫 화면부터 컨텐츠를 보여주는 것이다. 반응형 웹은 고 사양(고 해상도)웹이 저 사양(저 해상도) 모바일 기기에서도 불편함이 없이 구현이 되는데 초점이 맞춰져 있다. 주로 레이아웃과 스타일 변화에 초점을 맞추어서 진행이 된다. 하지만, 레이아웃과 스타일 보다는 웹 컨텐츠를 모바일 퍼스트 관점으로 재구성하는 반응형 웹도 있다. 이는 사용자가 사용하는 기능에 대해 연구하고 사용자가 필요로하는 기능을 중심으로 우선순위를 둬서 제공한다. 반응형 웹의 최종형은 위 두가지를 섞어놓아 모든 기기에서 사용사자 원하는 컨텐츠를 보기좋게 제공하는 것이다. 부트스트랩은 이런 반응형 웹 사이트를 개발하기 위해 만들어졌다.

그리드 시스템(Grid system)

Bootstrap이 가장 많이 사용되는 이유이자 반응형 웹페이지를 만들기 위해서 가장 많이 사용이 필요한 기능이다. 특히 Bootstrap의 가장 핵심적인 기능이므로 기본적으로 어떻게 동작하고 이러한 기능들을 어떻게 활용할 수 있을지 조금 더 고민해보는 것이 Bootstrap을 완벽하게 활용할 수 있는 기회가 될 것이다. 여러 클래스들이 복잡하게 있는 것이 조금 어려울수도 있는데, Bootstrap에서는 기본적으로 12칼럼으로 나누어서 기능을 제공하고 있다고 생각하면 쉬울 것이다. 이를 테이블의 형식대로 row 클래스와 각종 col-* 클래스들로 자유롭게 구성이 가능하며, 이렇게 구성한 페이지들은 Bootstrap에서 알아서 크기에 따라 반응형으로 동작하도록 만드는 것이다. Bootstrap에서는 아래의 규칙대로 이러한 그리드 시스템을 구축하라고 권고하고 있다.

• row 클래스는 container나 container-fluid 안에 있어야 정상적인 배열이나 패팅을 지원해준다.
• row 클래스는 가로로 그룹 지을 칼럼들의 집합이다.
• 내용은 col-* 클래스 안에 있어야 하며, row의 직속 자녀 요소로 배치해야 한다.
• 칼럼은 총 12칼럼이 있는 것으로 정의하여 각 배치할 %에 따라서 클래스를 결정하면 된다. 예를 들어, 같은 넓이의 3개의 칼럼을 쓰고자 한다면 3개의 .col-xs-4 칼럼을 쓰면 된다.
• 12칼럼이 넘어가면 새로운 줄로 칼럼이 배치된다.

이러한 그리드 시스템은 row-col을 사용하는 것은 가로x세로의 크기를 적당하게 나누어서 내용을 배치하던 것과 유사하게 편리하게 사용할 수 있도록 도와주고 있어서 매우 유용하게 사용할 수 있다. 옛날에는 이러한 가로x세로 크기를 나누기 위해서 table태그를 사용하는 것을 좋아했지만, table태그를 사용하는 것이 HTML 재사용성과 소스 관리, 그리고 다른 브라우져간에 보여지는 것이 다르게 보여지는 경우가 많아서 화면에 내용을 보여줄 때에는 div태그를 기본적으로 많이 사용하게 되었다. 그 이후로는 이러한 CSS를 다루는 것이 조금 어려워진면이 있어서 Bootstrap에서는 이러한 테이블 구조로 웹페이지를 디자인할 수 있도록 그리드 시스템의 기능을 제공해주고 있는 것이다. Bootstrap의 그리드 시스템에서 사용하고 있는 칼럼의 클래스 종류는 기본적으로 4가지가 있으며, 각각의 종류 뒤에는 12칼럼 중 몇개의 칼럼을 사용할지 명시하여 사용하면 된다.

• .col-xs-*: 항상 가로로 배치
• .col-sm-*768px: 이하에서 세로로 표시 시작
• .col-md-*992px: 이하에서 세로로 표시 시작
• .col-lg-*: 1200px 이하에서 세로로 표시 시작

프레임워크

"소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것" 프레임워크는 구체적이며 확장 가능한 기반 코드를 가지고 있으며, 설계자가 의도하는 여러 디자인 패턴의 집합으로 구성되어 있다. 원하는 기능 구현에만 집중하여 빠르게 개발 할 수 있도록 기본적으로 필요한 기능을 갖추고 있는 것으로 재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 라이브러리가 포함되어 있다. 프레임워크만으로는 실행되지 않으며 기능 추가를 해야 되고 프레임워크에 의존하여 개발해야 되며 프레임워크가 정의한 규칙을 준수해야 한다. 부트스트랩은 프런트엔드(사용자들에게 보이는 영역을 책임을 지는 것)용어와 프레임워크를 합쳐 프런트엔드 프레임워크라고도 불린다.

프레임워크 예시

• Java 개발자라면 Spring
• Python 개발자라면 Django
• JavaScript 개발자라면 Angularjs
• PHP 개발자라면 Laravel

CSS(cascading style sheets)

웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도 한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다.

Bootstrap 프레임워크의 CSS 기능은 웹페이지에 적용하게 되는 CSS 규칙들을 기본적으로 설정하고, 기본 HTML 요소들에 대한 스타일을 적용하는 기능들을 포함하고 있다. 특히, Bootstrap 프레임워크에서 제공해주고 있는 반응형 웹페이지의 가장 큰 기능인 그리드 형식으로 여러 칼럼으로 보여주다가 브라우져의 크기가 작아지면 세로로 나열시키는 기능을 이 CSS 기능에서 적용하면 된다. 양식이나 버튼들에 대해서도 다양한 CSS 설정을 기본적으로 해주니 기본 UI 디자인에서 조금 더 향상된 CSS를 체험할 수 있다.

CSS 기본설정

CSS 기능을 이용하기 위해서는 기본적으로 HTML5를 사용해야 한다. 그러기 위해서는 DOCTYPE에 대해서 HTML5로 정의해야 한다. 가장 위에 문서 양식은 아래와 같이 정의하면 된다.

<!DOCTYPE html>

그리고 Bootstrap 2에서는 모바일은 옵션으로 다루고 있었지만, Bootstrap 3에서는 모바일 우선(mobile first)인 프레임워크로 작성이 되었기 때문에 뷰포트에 대한 메타태그 설정을 하면 좋다. 물론 사이트에 따라서 이러한 뷰포트는 다르게 설정을 해도 되며, 기존의 사이트에 적용하는 경우에는 모바일에 대한 화면의 크기가 달라지기 때문에 예상하지 못하는 문제가 발생할 수 있으므로 조심해야 한다.

<meta name="viewport" content="width=device-width, initial-scale=1">

이후에 <head> 태그 안에서 CSS 파일을 link 시키면 기본적인 CSS 기능들은 사용할 수 있다. 아래는 CDN에 있는 Bootstrap CSS 파일을 사용하는 것으로, 필요하면 개별적으로 서버에서 다운 받아서 사용하면 된다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

이렇게 끝내면 기본적으로 Bootstrap의 CSS 기능을 사용하는 준비는 끝났다. 자바스크립트 기능이나 위젯을 사용하려면 추가로 자바스크립트 파일을 불러와야 한다. 이렇게 Bootstrap의 CSS를 가져오기만해도 Bootstrap에서는 기본적으로 브라우져에서 기본값을 가지고 서로 다르게 나타낼 수 있는 부분들의 스타일을 정의하여 동일하게 적용하도록 한다.

활용

Bootstrap의 구성

Bootstrap은 사용방법에 따라 크게 3가지로 구분이 가능합니다.

• CSS stylesheet
• Reusable component
• Javascript component

CSS stylesheet

HTML 자체의 기능을 확장하고 강화할 수 있게 해주는 css이다. Bootstrap의 UI 요소중 가장 간단하게 사용할 수 있는 방법으로 Boostrap의 css에 정의된 class들을 tag에 적용하여 사용하는 방법이다. 예를들어 간단한 버튼을 만들기 위해서는 일일이 마우스 이벤트들을 처리해줘야하지만 이미 Bootstrap에 정의된 버튼 css를 사용하면 간단하게 버튼을 생성할 수 있다. Bootstrap에서 제공하는 CSS들을 기능별로 구분해 놓은 목록이다.

• Grid system : Grid 형태의 영역구분을 가능하게 해주는 Layout 체계
• Typography : 각종 텍스트 서식을 위한 스타일
• Code : 코드 또는 키코드 표시를 위한 스타일
• Tables : 테이블 스타일
• Forms : 폼 스타일
• Buttons : 버튼 스타일
• Images : 이미지 스타일
• Helper classses : 자주 사용하는 기능을 모아 놓은 유틸
• Responsive utilities : 반응형 페이지 동작을 위한 유틸

Reusable component

HTML만으로는 표현할 수 없었던 화면 구성 요소들을 Bootstrap에서 css와 javascript의 조합을 통해 다양하게 제공한다. 버튼 묶음을 예로 들자면 HTML에서는 버튼을 단순하게 나열하는 것만으로 표시할 수 밖에 없었지만 Bootstrap을 통하면 시작적으로나 기능적으로 묶음으로서의 동작을 구현할 수 있다. 이런 Bootstrap 컴포넌트들을 사용할 때는 단순하게 tag안 class 입력만으로 가능하다. Bootstrap에서 제공되는 Reusable component는 아래와 같다.

• Glyphicons : 아이콘 컴포넌트
• Dropdowns : 드랍다운 형태를 만들어주는 컨테이너 컴포넌트
• Button groups : 버튼 그룹 컴포넌트
• Button dropdowns : 버튼 액션에 드랍다운이 추가된 컴포넌트
• Input groups : 입력폼 묶음 컴포넌트
• Navs : 탭/버튼 형태의 각종 내비게이션 버튼 묵음 컴포넌트
• navbar : 내비게이션 메뉴바 컴포넌트
• Breadcrumbs : 페이지 이동 경로 표시 컴포넌트
• Pagination : 페이징 컴포넌트
• Labels : 레이블/태그 컴포넌트
• Badges : 알람등에 사용되는 뱃지 컴포넌트
• Jumbotron : 타이틀 화면 구성용 컴포넌트
• Page header : 페이지 상단 구성용 컴포넌트
• Thumbnails : 썸네일 컴포넌트
• Alerts : 알림 표시를 위한 컴포넌트
• Progress bars : 프로그레스바 컴포넌트
• Media object : 다양한 종류의 자료를 목록형태로 표시하기 위한 컴포넌트
• List group : 목록 표 컴포넌트
• Panels : 제목틀을 가진 패널 컴포넌트
• Responsive embed : embed로 삽입된 객체의 반응형 처리를 위한 컴포넌트
• Wells : 인용문구 표시 컴포넌트

Javascript component

jQuery를 이용하여 보다 다양한 Bootstrap의 기능들을 사용할 수 있다.

• Transitions : 전환 효과 플러그인
• Modal : 모달 팝업 플러그인
• Dropdown : 드랍다운 메뉴 플러그인
• Scrollspy : 스크롤 스파이 플러그인
• Tab : 탭 메뉴 플러그인
• Tooltip : 툴팁 플러그인
• Popover : 풍선 도움말 플러그인
• Alert : 알람 메세지 플러그인
• Button : 버튼전환 플러그인
• Collapse : 아코디언 패널 플러그인
• Carousel : 슬라이드 화면 플러그인
• Affix : 스크롤 고정하게 해주는 플러그인

Customize Bootstrap: 모든 웹페이지들이 Bootstrap의 모든 기능을 필요로 하지는 않기 때문에 필요한 기능만을 담은 Bootstrap file을 생성하는 기능을 제공한다. 불필요한 기능들을 로딩하는 부하를 줄이기 위해서 제공되는 서비스이다. 이외에도 각종 옵션들을 자신의 의도에 맞게 수정가능하다. 색상, 폰트, 각종 사이즈 등등.

설치/사용방법

Bootstrap은 설치를 위한 다양한 방법을 제공하고 있으면 각 방법들은 난이도와 용도의 차이가 있다. 자신이 원하는 형태에 맞추어 설치하시면 된다. Download 받아서 사용한다. 압축된 CSS, Javascript, Font 들이 묶인 파일을 다운 받는다.

https://github.com/twbs/bootstrap/releases/download/v3.2.0/bootstrap-3.2.0-dist.zip

Compile하여 사용한다. Less, Javascript, Font 들이 묶인 파일을 다운 받는다. Less를 위해서는 Less 컴파일러와 몇 가지 설정이 필요하다.

https://github.com/twbs/bootstrap/archive/v3.2.0.zip

CDN을 이용하여 바로 사용할 있다.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Bower를 통해서 Bootstrap을 설치할 수 있다.

$ bower install bootstrap

장점과 단점

쉽고 빠르며 다양한 기능들을 제공한다. 또한 다양한 디자인과 동적인 효과를 사용할 수 있다. 모바일웹과 반응형웹의 제작 빈도가 많이 높아졌다. 부트스트랩은 이러한 모바일 환경과 반응형웹 제작에 유리하게 사용할 수 있으며 수많은 테마도 손쉽게 웹사이트의 외형을 만들 수 있다. 높은 퀄리티가 보장되기 때문에 기업의 입장에서는 시간이 단축이 되며 시간단축은 곧 비용 절감이다. 하지만 jQuery에 의존성이 너무 강하다. 디자인이 정형화 되어 있다 보니 비슷한 디자인의 페이지가 양산될 수 있다는 것이다. 이건 오픈 소스의 힘으로 극복이 가능하기도한데 우리나라에서는 심플한 디자인보다는 이미지를 많이 쓰는 화려한 디자인을 선호하는지라 부트스트랩으로 만드려면 소스를 처음부터 뜯어 고치다시피 코딩을 해야 하다보니 아무래도 인기가 미미하다. 또한 HTML5에 맞춰져 있다 보니 구형 브라우저 지원이 미흡하다는 이유도 있다. 이 때문에 HTML5가 제대로 지원되지 않는 IE7, 8의 경우에는 강제로 HTML5를 인식시키는 html5shiv 같은 JavaScript 코드가 필요하고, 가뜩이나 JavaScript 해석이 느린 IE 구버전을 더 느려지게 하는 주범이 된다. 결국 이 때문인지 3.0에서는 IE8 이상을 정식 지원한다.

참고자료

• 두산백과, 〈부트스트랩〉, 《네이버 지식백과》
• 〈부트스트랩〉, 《위키백과》
• 〈(프레임워크) Bootstrap〉, 《나무위키》
• jokergt, 〈프레임워크란?〉, 《티스토리》,2012-05-28
• TERMINOLOGY, 〈라이브러리, 프레임워크, 아키텍처, 플래폼이란?〉, 《gaerae》,2016-11-30
• 두산백과, 〈CSS〉, 《네이버 지식백과》
• unikys, 〈Bootstrap시작하기, CSS 기능: 그리드 시스템(Grid system)〉, 《티스토리》,2016-06-23
• Nextree, 〈CSS : 반응형 웹(Responsive Web)〉, 《nextree》,2014-03-31
• jayzzz, 〈부트스트랩 특징 및 장점,단점〉, 《티스토리》,2017-08-16
• 이원제, 〈Bootstrap 시작하기〉, 《webframeworks》

같이 보기

• 코딩

이 부트스트랩 문서는 프로그래밍에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.

개발 : 프로그래밍 □■⊕, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷, 모바일, 사물인터넷, 게임, 메타버스, 디자인 프로그래밍 언어 ASP • C 언어 • C++ • C# • CSS • D 언어 • HTML • HTML5 • JSP • PHP • R • XHTML • XML • XSLT • 고(Go) • 고급언어 • 기계어 • 델파이 • 러스트 • 루비 • 루아 • 리액트 • 리퀴디티 • 무브 • 미켈슨 • 베이직 • 브이비스크립트 • 비주얼 C++ • 비주얼베이직(VB) • 비주얼베이직닷넷(VB.NET) • 솔리디티 • 스몰토크 • 스위프트 언어 • 스칼라 • 스크립트 언어 • 알골 • 어셈블리 • 언리얼스크립트 • 얼랭 • 에이잭스(Ajax) • 엠에프씨(MFC) • 오브젝티브-C • 오브젝트 파스칼 • 오카멜 • 웹어셈블리(WASM) • 이와즘(eWASM) • 자바 • 자바스크립트 • 저급언어 • 제이슨(JSON) • 제이쿼리(jQuery) • 카멜 • 코볼 • 코틀린 • 콜드퓨전 • 타입스크립트 • 파스칼 • 파워스크립트 • 파이썬 • 펄(Perl) • 포트란 • 프로씨(Pro-C) • 피엘에스큐엘(PL/SQL) • 피엘원(PL/I) • 하스켈 개발방법론 CBD 개발방법론 • EA • 구조적 개발방법론 • 객체지향 개발방법론 • 라이브러리 • 람다 아키텍처 • 모듈 • 모듈화 • 벤치마킹 • 소프트웨어 개발방법론 • 스크럼 • 스프린트 • 아키텍처 • 아키텍트 • 애자일 • 웹개발방법론 • 정보공학 개발방법론 • 컴포넌트 • 테일러링 • 템플릿 • 폭포수 모델 • 프로젝트 • 프로토타입 • 피드백 코딩 EUC-KR • UTF-8 • 값 • 글루웨어 • 노팔로우 링크 • 두팔로우 링크 • 디버깅 • 디코딩 • 마크업 • 버그 • 부트스트랩 • 세이브포인트 • 소스코드 • 시큐어코딩 • 아스키 • 액티브엑스 • 오픈소스 • 유니코드 • 인코딩 • 재컴파일 • 주석 • 컴파일 • 컴퓨터 프로그램 • 코드 • 코딩 • 태그 • 테스트 • 테이블 • 텍스트 • 파싱 • 퍼블리싱 • 퓨니코드 • 하드코딩 • 하이퍼링크 • 하이퍼텍스트 프로그래밍 C 명령어 • 객체 • 객체지향 • 객체지향 프로그래밍 • 거짓 • 관계연산자 • 기본형 변수 • 널 • 논리 • 논리연산 • 논리연산자 • 다중상속 • 다형성 • 대입 • 대입문 • 대입연산자 • 더블 • 도스 명령어 • 디폴트 • 레지스터변수 • 루프 • 리눅스 명령어 • 리턴 • 메모리 주소 • 메소드 • 멤버 • 명령문 • 명령어 • 무한루프 • 문자 • 문자열 • 바이트 • 반복문 • 배열 • 변수 • 분기 • 분기문 • 불린 • 브레이크 • 비교연산자 • 비트연산자 • 산술연산자 • 상속 • 상수 • 생성자 • 선언 • 선언문 • 설정자 • 속성 • 스위치 • 스태틱 • 시프트연산자 • 실행 • 실행문 • 어노테이션 • 에코 • 역참조 • 연산 • 연산문 • 연산자 • 오버로딩 • 오버라이딩 • 외부변수 • 윈도우 명령어 • 유닉스 명령어 • 인스턴스 • 인스트럭션 • 인클루드 • 인터페이스 • 임포트 • 입력 • 입력문 • 입출력 • 입출력문 • 자료형(데이터 타입) • 자바 명령어 • 자바 예약어 • 자바 컬렉션 • 전역변수 • 접근자 • 접근제어자 • 정보은닉 • 정수형 • 정적변수 • 제어 • 제어문 • 제어자 • 조건 • 조건문 • 조건연산자 • 주소 • 증감연산자 • 지역변수 • 참 • 참조 • 참조변수 • 초기화 • 추상메소드 • 추상클래스 • 추상화 • 출력 • 출력문 • 캡슐화 • 케이스 • 클래스 • 파라미터(매개변수) • 파이널 • 패키지 • 퍼블릭 • 포인터 • 프라이빗 • 프로텍티드 • 필드(멤버변수) • 함수 • 환경변수 명령어 abstract • array • boolean • break • byte • case • char • continue • default • double • do while • echo • elif • else • else if • false • final • float • for • gosub • goto • if • if else • import • include • int • join • long • long long • null • print • printf • println • private • protected • public • return • scanf • short • stdio.h • static • string • switch • temp • then • true • unsigned • void • while 디자인패턴 구조패턴 • 동시성패턴 • 동시실행패턴 • 모델-뷰-컨트롤러 패턴 • 상태패턴 • 생성패턴 • 싱글톤패턴 • 아키텍처패턴 • 전략패턴 • 커맨드패턴 • 행동패턴 프로그래밍 인물 귀도 반 로썸 • 그레이스 머레이 호퍼 • 니클라우스 비르트 • 댄 브릭클린 • 더그 커팅 • 데니스 리치 • 리누스 토르발스 • 리처드 그린블라트 • 마거릿 해밀턴 • 마크 앤드리슨 • 빈트 서프 • 빌 게이츠 • 빌 조이 • 스티브 잡스 • 에이다 러브레이스 • 제임스 고슬링 • 척 벤턴 • 켄 톰슨 • 팀 패터슨 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반