웹 개발용 주춧돌 꾸러미 (css라이브러리) 입니다. 자바의 jquery 와 비슷한 개념일까요?

• 부트스트랩 누리집(영문)
• 서브라임 텍스트 CSS 편집기
• 부트스트렙 한글번역
• 뼈대잡기 Scaffloding : http://dev.nagesoft.com/design/scaffolding
• Base CSS : http://dev.nagesoft.com/design/css
• 각종 요소들 Components : http://dev.nagesoft.com/design/components
• Javascript plugins : http://dev.nagesoft.com/design/jsplugin

• 부트스트랩을 활용한 티스토리 블로그

무료 관리자용 페이지 프로그램 홈페이지 – http://usman.it/free-responsive-admin-template/

깃허브 – https://github.com/usmanhalalit/charisma

데모 – http://usman.it/themes/charisma/

2013년 9월에 부트스트랩 3.0 이 출시되었습니다.

간단하게 해당 내용을 정리합니다.

기존의 CSS의 그라데이션을 활용한 표현에서 단순하고 평면적 느낌의 모습으로 바뀌었습니다. 많은 사람들이 부트스트랩의 기본 디자인으로 부터 확장하고 변형하기 용이한 모습이 되었고, 최근에 주목받은 평면형 디자인을 수용하면서, 기본에 충실하여 널리 쓰이는 프론트 앤드 프레임워크로써 면모를 갖추었다고 볼 수 있습니다.

이전에는 데스크탑 기준의 반응형 웹 체계였다면 지금은 모바일 기준의 반응형 웹 체계가 되어, 모바일, 타블렛, 데스크탑 각자에서 12열을 중심으로 원하는 그리드를 원하는 단말로 표현할 수 있도록 매우 강력해 졌습니다. 자세한 내용은 아래의 링크를 참고하세요.

미리살펴보는 부트스트랩 3.0 모바일 그리드 지원 체계 한국어 트위터 부트스트랩 3.0 미리보기 한국어 Bootstrap 3.0 RC1 #Grid

부트스트랩은 기본적으로 LESS라는 CSS 전처리기로 작성되어 있는데, CSS대신 LESS로된 패키지를 사용하면 서버 측에서 CSS를 다이나믹하게 생성해서 활용할 수 있습니다.

이번 부트스트랩 3에서는 LESS 작성 부분의 상당수를 다시 만들어 Mix-in을 하기 쉽도록 변화하였습니다. Mix-in은 CSS에 변수와 함수를 넣고 적절히 추상화 하여 재사용과 체계를 만들기 용이한 CSS 전처리기의 기능입니다. 이로써 서버에서 LESS를 통해 부트스트랩 3를 다이나믹하게 생성하고 변형하기 좀 더 편해졌다고 볼 수 있습니다._ LESS와 비슷하게 SASS, Stylus라는 CSS 전처리기 또한 Ruby나 Node 서버 환경에서 많이 쓰이고 부트스트랩에서도 이를 간접적으로 지원해서 좀 더 활용 처를 넓혔다고 볼 수 있습니다.

Node Packages

대다수의 스마트폰들은 CSS 트랜지션을 지원하는데 3버전으로 넘어오면서 가급적 자바스크립트로 DOM을 직접 움직이는 애니메이션을 자제하고 CSS를 통해 애니메이션을 하도록 강화했습니다.

많은 부분에 애니메에션이 들어있는 것은 아니지만, 모바일 지원에 좀 더 최적화 되었다고 볼 수 있습니다.

이제 더 이상 IE7을 지원하지 않습니다. 앞으로 IE7로 부트스트랩 3를 사용한 페이지를 보면 기능적으로 혹은 모양새가 적절히 표현되지 않을 수 있습니다. 이제 IE7은 잊을 때가 된 듯 합니다. 마찬가지로 Firefox 3.6 이하 버전도 지원하지 않게 되었습니다.

기존의 아이콘은 스프라이트 이미지로 되어있었는데 이번 부터는 폰트를 통해 지원합니다. 아이콘 폰트는 벡터로 구성되어 있어서 확대, 축소 시에도 이미지 변형이나 손실이 없기 때문에 좀 더 다양하게 활용이 가능해 졌습니다. 아이콘은 별도의 사이트로 분리되어 관리됩니다.

아이콘을 폰트로 만드는 방식은 여러 잇점이 있는데 아래의 링크를 통해 확인해 보세요.

• Glyphicons - 부트스트랩에서 공식 지원하는 아이콘
• Say Hello to Octicons - 깃허브에서 사용한 사례
• The Making of Octicons - 깃허브에서 만든 방법
• Font Awsome - 부트스트랩에서 활용 가능 한 아이콘 폰트
• Icon Fonts are Awsome - 아이콘 폰트 활용 법
• Fontello - 나만의 아이콘 폰트를 만들어 주는 서비스

기존의 부트스트랩 2를 사용하고 있고, 3로 이전을 염두해 두고 있다면 아래의 내용을 알아 두는 것이 유용합니다.

• 테이블 : 반응형 웹 유틸리티 지원
• 버튼 : 기본 CSS클래스가 .btn에서 .btn .btn-default로 변경
• 폼 : .input-prepend와 .input-append를 .input-group로 간략화
• 폼 : .form-search 삭제
• 폼 : 체크박스와 라디오 버튼 마크업시 감싸는 <div> 필요
• 네비게이션 : .nav-list를 .list-group로 대체
• 네비게이션 바 : .navbar-search 삭제 및 .navbar-form 대체
• 네비게이션 바 : 기본적인 마크업 변경.
• .navbar-inner 제거
• .navbar > .nav를 navbar-nav로 변경
• .btn-navbar를 navbar-toggle로 변경
• 모달 : .hide클래스 불 필요. 모달 마크업시 .hide 클래스 제거 요함.
• 리스트 그룹 : 모바일에 적합한 리스트 그룹 새로 추가
• 패널 : 내용을 별도로 분리하기 용이한 패널 새로 추가
• 캐러셀 : 기본적인 마크업 변경. .carousel-control 필요

좀 더 자세한 내용은 부트스트랩 깃허브 저장소의 WIP : Bootstrap 3.0을 참고 하세요.