[Javascript] bootstrap 사용법 및 grid

bootstrap - http://getbootstrap.com/

트위터 개발자가 만들었고 다양한 컴포넌트를 제공한다. 

반응형 웹을 만들 때 가장 많이 쓰이는 것 같고 크로스 브라우징도 잘 해결됨

Bootstrap CDN

The folks over at MaxCDN graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these Bootstrap CDN links.

Copy

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

사실 사용법은 별거 없다. getting-started에 있는 CDN가져와서 붙이면 된다. (integrity를 포함하면 너무 길어서 일단 지움)

이렇게 단순히 붙이는 것보다 제일 중요한건 grid라고 생각한다.

bootstrap의 grid는 기본적으로 화면의 width를 12등분하여 표현하고

 grid에 관한 class는 디바이스 화면 크기별로 레이아웃을 어떻게 정할것인지에 따라 분류된다.

두 개의 div가 있다고 할 때,

col-md-8 와 col-md-4 는 992px 미만 화면에서 8 : 4 (2 : 1) 비율로, 

col-sm-6와 col-sm-6은 992px 미만 768px 이상 화면에서 6 : 6 (1 : 1) 비율로 width를 채우고

col-xs-12 와 col-xs-6 의 경우에는 768px 미만 화면에서 첫번째 div가 한줄을 채우고 그 아래에 두번쨰 div가 화면 크기의 1/2만큼의 width를 가진다.

위의 코드를 bootstrap으로 표현하면 아래와 같은 결과가 나온다