기타

부트스트랩(Bootstrap) 소개

D.Y 2016. 5. 3. 07:36
반응형

안녕하세요. 오늘은 부트스트랩에 대해 간단히 소개해보도록 하겠습니다.


아래 내용들은 w3schools를 참조 및 발췌한 내용 입니다. ^^



부트스트랩이란?

  • 부트스트랩은 프론트엔드 진영에서 웹 개발을 빠르고 쉽게 하기위한 무료 프레임워크 입니다.
  • HTML, CSS를 기반으로 된 템플릿을 제공합니다. (forms, buttons, tables, navigation 등..)
  • 오픈소스 입니다. (GitHub)

부트스트랩은 어떻게 개발되었는가?
  • 트위터의 Mark Otto, Jacob Thornton 이란 사람에 의해 개발되었다.
  • 2011년 GitHub에 오픈소스로 release 되었고, 2014년 6월에 GitHub에서 1등 프로젝트가 되었습니다.
  • 트위터 팀내에서 개발시 다양한 라이브러리를 사용하므로써, 시간이 많이 걸리고 일관성이 떨어짐. 부트스트랩을 통해서 일관성 및 시간절약이 가능해졌다.

부트스트랩의 장점

  • 3버전부터는 모바일 중심의  프레임워크로 변경되었다.
  • 인기있는 브라우저들 모두 지원
  • 사용자 디바이스에 최적화 화면을 보여주는 반응형을 기본으로 한다.
    - 단일코드 베이스로 CSS 미디어 쿼리를 이용하여 휴대폰에서부터 태블릿, 데스크탑까지 크기를 조절합니다.
  • html, css에 대한 지식만 있다면 사용하는데 어렵지 않다.

부트스트랩 사용방법
  • 부트스트랩을 직접 다운받는 방법
    - http://getbootstrap.com/getting-started/
  • CDN(Content Delivery Network) 방식으로 프로젝트에 포함하는 방법
    - bootstrap.min.css, bootstrap.min.js, jquery.min.js 를 포함하면 됩니다.

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

반응형 화면 설정 방법
  • head 부분에 meta 태그에 속성으로 아래와 같이 설정합니다. 
    -     <meta name="viewport" content="width=device-width, initial-scale=1">
  • 또한, div의 class에 container를 적용시켜야 부트스트랩 효과를 적용이 가능합니다.
    - <div class="container">...</div>

참고












































































반응형
저작자표시 (새창열림)