1. 부트스트랩소개와 사용방법 - 2

1. 기본적인 반응형 웹 페이지 예제

 부트스트랩 웹사이트에는 다양한 예제 페이지들이 있습니다. 간단하게 예제 하나를 살펴보겠습니다. 부트스트랩 스타터 템플릿이라는 페이지입니다. 아주 평범한 웹 페이지인데, 이 웹페이지의 폭을 변화시켜 보면 변화되는 것을 알 수 있습니다. 즉 웹 페이지가 가변적으로 변화할 때, 반응형 웹페이지로 바뀌는 것을 알 수 있습니다.

부트스트랩 스타터 템플릿

- 브라우저 크기를 줄이기 전 -

- 브라우저 크기를 줄인 후 -

- 토글 버튼 클릭 시 -

부트스트랩은 기본적으로 반응형 웹 페이지를 만들어 주지만, 경우에 따라 반응형 웹 페이지가 필요 없거나, 어드민 페이지와 같이 반응형 웹페이지로 만들면 안되는 경우가 있습니다.

부트스트랩에서 반응형 웹 페이지를 생성하지 않게 하는 방법은 헤더부분에서 아래와 같은 코드를 삭제하시면 됩니다.

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

bootstrap.css 파일 내부에 있는 .continer 선택자중 max-width와 width를 수정합니다.

.container{max-width: none !important;width: 970px !important;}

그리고 내비게이션 바 부분에 있는 반응형 태그들을 전부 없애줍니다. 마지막으로 그리드 레이아웃을 위해 .col-xs-*라는 클래스 선택자를 .col-md-* 또는 .col-lg-*와 대체하면 됩니다. 가장 간단한 방법은 non-responsive.css라는 CSS파일을 하나 만들어서 해당 웹 페이지에 적용해 주면 간단하게 해결할 수 있습니다.

2. 브라우저별 부트스트랩 지원 여부

	크롬	파이어폭스	익스플로러	오페라	사파리
안드로이드	지원	지원 안함	해당사항 없음	지원 안함	해당사항 없음
iOS	지원	해당사항 없음		지원 안함	지원
맥 OSX	지원	지원		지원	지원
윈도우	지원	지원	지원	지원	지원 안함