부트스트랩 : 기본 템플릿과 부가 사항

라이브러리/Bootstrap

부트스트랩 : 기본 템플릿과 부가 사항

THREE™ 2014. 3. 19. 02:52

bootstrap : Page 0-2 부트스트랩 0-2번째

부트스트랩은 웹디자인을 쉽게하기 위해 미리 몇가지의 CSS의 클래스 선택자와 정의된 스타일시트, 자바스크립트 플러그인을 모은 강력한 프론트엔드 프레임워크입니다. <부트스트랩 소개와 다운로드 중 참조...>

참고로 이블로그 게시물은 한글부트스트랩3을 참고로 만들어 졌으며 제 블로그 공부용으로 작성한 것입니다.

기본 템플릿 Basic template

완전 기본 HTML 템플릿을 이용하거나, 조금 추가된 HTML 템플릿을 이용하여 부트스트랩을 이용할수 있습니다.

참고

부트스트랩을 시작하기 위해 추천할만한 에디터로 Sublime Text를 추천합니다. 또한 부트스트랩는 HTML5와 CSS, 자바스크립트를 사용하기 위하여 jQuery가 필요합니다.

기본뼈대 HTML

<!DOCTYPE html>  
<html lang="en">   
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">      
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap 101 Template</title>
        <!-- 부트스트랩 -->
      <link href="css/bootstrap.min.css" rel="stylesheet">

      <!-- HTML5 Shimrhk Respond.js를 이용하여 새로운 HTML5와 CSS3를 인식하게 만들어줘야 합니다 -->
      <!-- 경고 :  file:// 형식으로 파일을 볼 경우 Respond.js는 작동하지 않습니다 -->
      <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->
    </head>
    <body>
      <h1>Hello, world!</h1>

        <!--jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요한) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <!-- 모든 합쳐진 플러그인을 포함하거나 (아래) 필요한 각각의 파일들을 포함하세요 -->
      <script src="js/bootstrap.min.js"></script>
  </body>
</html>

발 변역이라 이상 할 수도 있습니다.

참고

html5shiv.js 는 익스플로러가 html5 의 구문을 모르기때문에 알려주는 역할을 합니다. 그래야만 html 이 로드될때 제대로 인식하기 때문입니다.

또하나 respond.min.js 는 익스플로러가 미디어쿼리를 지원하지 않기때문에 지원할하고 넣어준것입니다.

해당 템플릿으로 작성된 예제 템플릿이 그 아래 제공되고 있습니다.

반응성 끄기 Disabling responsiveness

다음은 부트스트랩에서 제공하는 반응형을 비활성화 하는 방법에 대한 글입니다. 때론 비활성화 해야하는 디자인이 있을수도 있습니다. 그래서 부트스트랩에서는 비활성화 하는 방법 및 단계를 제시하고 있습니다

반응형 뷰를 끄는 방법

반응형 기능을 끄기 위해, 다음의 순서를 따라하세요. 아래에서 수정된 템플릿을 보세요.

문서내 CSS 에 명시된 뷰포트 <meta>를 제거합니다.
max-width: none !important; 를 .container 에 적용하여 max-width를 제거하고 width: 970px; 과 같은 수치값을 넣어줍니다. 이것들은 기본 부트스트랩 CSS 뒤에 와야함을 명심하세요. 아니면 선택적으로 !important 대신 미디어쿼리나 셀렉터 기능을 이용할수 있습니다.
네비게이션 바를 사용한다면, 네비게이션 바의 반응성도 해제해야 합니다. (이것은 여기에 보여주기엔 너무 많으므로, 예제를 참고하세요)
그리드 레이아웃을 위해, .col-md-* 나 .col-lg-* 클래스 대신 .col-xs-* 클래스를 사용하세요. 걱정하지 마세요, 당신이 설정한 대로 모든 해상도에서 동일하게 작동합니다.

여전히 IE8 을 위해 respond.js 가 필요합니다(미디어쿼리는 여전히 필요하기때문에). 이것은 단지 부트스트랩의 "모바일 사이트" 를 끄는 것입니다.

비반응형 부트스트랩 템플릿

위의 단계를 따라 예제에 적용해 보았습니다. 특정한 변화를 보기 위해 소스코드를 읽어보세요.

비반응형 예제 보기

2.x 에서 3.0 으로 이전

3.0으로 버전 업그레이드를 하면서 몇몇가지는 없어지고 몇몇은 변화 되었습니다.

개요를 보려면, Migrating from 2.x to 3.0을 읽어 보세요.

부가 사항 Additional notes

버전3 에서 보이지는 않는 많은 근본적인 변화들을 이루었습니다. 기본 클래스들, 주요 스타일, 움직임들은 유연성과 모바일 우선 접근을 위해 조절되었습니다.

텍스트 기반 폼콘트롤은 100% 로 넓어집니다. 입력 너비들을 조작하기 위해 <div class="col-*"></div> 안에 inputs 을 넣으세요.
.badge 는 더 이상 맥락적인(-success,-primary 등) 클래스를 가지고 있지 않습니다.
.btn 은 "default" 버튼을 적용하려면 반드시 .btn-default 도 사용해야 합니다.
.container 와 .row 은 이제 유동적입니다. (퍼센트 기반).
이미지들은 이제 더이상 기본적으로 반응형이 아닙니다. 유동적인 <img> 크기를 위해서 .img-responsive 을 사용하세요.
아이콘, .glyphicon 은 이제 폰트 기반입니다. 또한 그들은 기본클래스와 아이콘클래스를 가지고 있습니다. (예: .glyphicon .glyphicon-asterisk).
Twitter Typeahead 하여, 기존의 Typeahead 는 제거되었습니다.
모달 마크업은 크게 변화되었습니다. .modal-header, .modal-body, .modal-footer 섹션은 이제 향상된 모바일 스타일링과 동작을 위해 .modal-content 과 .modal-dialog 으로 둘러쌉니다.
자바스크립트 이벤트는 네임스페이스화 되었습니다. 예를 들면, 모달의 "show" 이벤트를 조작하려면, 'show.bs.modal' 을 사용합니다. 탭의 "shown" 은 'shown.bs.tab' 을 사용합니다.

커뮤니티로부터 업그레이드와 코드에 대해 더 많은 정보를 위해 Bootply, LayoutIt! 를 확인하세요.

bootstrap 프레임워크로 화면구성을 쉽게 할 수 있는 사이트입니다.

Thanks to

'라이브러리 > Bootstrap' 카테고리의 다른 글

부트스트랩 : 타이포그래피 (0)	2014.03.26
부트스트랩 : 그리드 시스템 (0)	2014.03.23
부트스트랩 : CSS 개요 (0)	2014.03.23
부트스트랩 : 참고사항 (0)	2014.03.21
부트스트랩 : 소개와 다운로드 (0)	2014.03.16

현재글부트스트랩 : 기본 템플릿과 부가 사항

The v3