트위터 부트스트랩(Twitter Bootstrap)은 웹사이트 제작에 사용되는 프레임워크입니다. 트위터 개발자들이 내놓은 이 툴은 처음에는 트위터 내부에서 인터페이스의 일관성을 위해 만들어졌지만 오픈소스로 공개하면서 큰 인기를 얻고 있습니다. 일정한 틀을 가진 저작도구를 프레임워크라고 하는데 티스토리나 워드프레스도 블로그나 웹사이트를 만들기 위한 프레임워크라고 할 수 있습니다. 이들은 블로그나 웹사이트의 콘텐츠를 만들 수 있는 도구이지만 부트스트랩은 웹사이트의 레이아웃인 스킨이나 테마 디자인을 하기 위한 도구입니다. 그동안 웹 프레임워크는 여러 종류가 개발됐지만 웹사이트의 모든 요소에 대해 스타일시트를 정의한 것은 부트스트랩이 처음입니다. 웹 페이지를 만들 때 어떤 요소가 필요할까요? 우선 제 블로그를 ..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. WATable 데이터 테이블, 분류, 페이징, 필터링 가능 프로그램 사이트 및 데모 사이트 : http://wootapa-watable.appspot.com/ jekyll bootstrap 정적인(Static) 웹사이트를 만들 수 있는 프레임워크, 부트스트랩 테마 사용, 데이터베이스가 필요 없어서 빠른 속도의 웹사이트 제작 가능. 현재 부트스트랩 3.0의 문서도 이 프레임워크로 제작. 웹 개발자들은 워드프레스에서 이 프레임워크로 전향 중. 향후 자세한 사용법..
트위터 부트스트랩이 최근 며칠 동안 개발이 신속히 진행되고 있는 듯합니다. 3월 31일 현재 추가된 새로운 기능이 있어서 소개합니다. 1. 리스트 그룹 리스트는 기존에 내비게이션 항목에서 탭(Tab), 필(Pill)과 같이 있던 것을 별도의 항목으로 떼어서 처리했습니다. 바로가기 2. 패널 패널 기능이 추가됐습니다. 사이드바의 위젯에 사용하면 좋을 듯합니다. 바로가기 3. 상단으로 가기 버튼 부트스트랩의 기능이 아니라 문서의 사용을 편리하게 하기 위한 상단으로 이동하기 버튼이 추가됐습니다. 긴 내용의 문서에서는 반드기 필요한 기능이죠. 이것은 부트스트랩에 있는 affix 기능을 이용한 것입니다.
부트스트랩 3.0이 개발 중인 상태이며 최근에 문서 레이아웃이 대폭 변경됐습니다. 그동안 여러개의 파일로 있던 것을 하나의 파일로 만들었습니다. 이에 따라서 하나의 페이지에서 검색해서 관련 내용을 찾을 수 있으므로 찾기 쉽게 했습니다. 관련 글: http://martian36.tistory.com/1154 상단에 있던 메뉴바는 필요없으므로 제거됐고 그대신에 문서로 이동할 수 있는 버튼이 추가됐습니다. View docs 버튼을 클릭하면 부트스트랩의 모든 내용이 있는 페이지로 이동합니다. 문서의 초기화면입니다. 좌측의 사이드바에서 메뉴를 선택하면 해당 내용으로 이동합니다. 최근에 바뀐 내용은 그리드 시스템에서 그동안 .span+숫자의 형태에서 .col-span-숫자의 형태로 바뀌어서 더 특정화했습니다. 즉 ..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. MagicSuggest 선택 박스 프로그램 사이트 및 데모 사이트 : http://nicolasbize.github.com/magicsuggest/ Nod 폼 유효성 검사 프로그램 사이트 및 데모 사이트 : http://casperin.github.com/nod/ Bootstrap-AcknowledgeInput.js 입력박스 피드백 프로그램 사이트 및 데모 사이트 : http://averagemarcus.github.com/Bootstrap-Acknowled..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. tablecloth.js 다양한 테이블 디자인 프로그램 사이트 및 데모 사이트 : http://tableclothjs.com/ Bootbox.js 부트스트랩 모달 확장 프로그램 사이트 및 데모 사이트 : http://bootboxjs.com/ Bootstrap Tag Autocomplete 태그 자동 완성 프로그램 사이트 및 데모 사이트 : http://sandglaz.github.com/bootstrap-tagautocomplete/ BOOTSTRAP FI..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인할 경우 부트스트랩 문서 페이지에서 요소검사해서 코드를 복사해 붙여넣고 사용할 수도 있지만 앱타나 스튜디오와 서브라임 텍스트 에디터에 플러그인을 설치하면 간단하게 스니핏 코드를 사용할 수 있습니다. 스니핏이란 이미 만들어진 코드로 단축키만 누르면 코드가 바로 완성됩니다. 1. 앱타나 스튜디오에 부트스트랩 스니핏 플러그인 설치하기 https://github.com/berkayunal/twitter-bootstrap.ruble 위 링크로 이동합니다. ZIP 버튼을 클릭해서 파일을 내려받습니다. 위 경로로 들어가서 Aptana Rubles에 twitter-bootstrap.ruble 폴더를 만들고 파일을 압축해제합니다. 메뉴에서 Window-->Show View-..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. jQuery FileStyle for Bootstrap 파일 업로더 프로그램 사이트 및 데모 사이트 : http://markusslima.github.com/bootstrap-filestyle/ Clockface 타임피커 프로그램 사이트 및 데모 사이트 : http://vitalets.github.com/clockface/ Bootstrap Captcha 부트스트랩 캡차 프로그램 사이트 및 데모 사이트 : http://jsfiddle.net/hqv27/ Go..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. TODC Bootstrap 구글 스타일 부트스트랩 프로그램 사이트 : https://github.com/todc/todc-bootstrap 데모 사이트 : http://todc.github.com/todc-bootstrap/index.html Flat-UI 프로그램 사이트 : https://github.com/designmodo/Flat-UI 데모 사이트 : http://designmodo.com/flat-free/ twitter.bootstrap.mvc A..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. SASS-TWITTER-BOOTSTRAP SASS용 부트스트랩 프로그램 사이트 : https://github.com/jlong/sass-twitter-bootstrap#readme OpenWeb Icons 오픈소스 관련 아이콘 프로그램 사이트 및 데모 사이트 : http://pfefferle.github.com/openwebicons/ FLATSTRAP 그래디언트와 둥근 모서리를 제거한 부트스트랩 프로그램 사이트 및 데모 사이트 : http://littles..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. BOOTSTRAP TWITTER OFFLINE DOCS 부트스크랩 크롬 브라우저 오프라인 도움말기능으로 설치하고 나면 우측 상단에 트위터 아이콘이 만들어지고 아이콘을 클릭하면 오프라인으로 부트스트랩 문서를 볼 수 있습니다. 또한 마우스클 우클릭하면 컨텍스트 메뉴에도 나타납니다. 프로그램 사이트 및 데모 사이트 : https://chrome.google.com/webstore/detail/bootstrap-twitter-offline/gihkgljdimgfff..
책 제목 : 트위터 부트스트랩 - 디자이너도 놀라워 할 매끈하고 직관적인 웹 사이트 디자인의 비밀(432페이지, PDF 포함 504페이지)영문 제목 : Twitter Bootstrap for Web Development 2013. 3.29일 인쇄 완료되어 선정된 분들에게 오늘 날짜로 발송됩니다. 늦어도 다음 주 월요일에는 받아보실 수 있습니다. 트위터 부트스트랩 책 출간 기념으로 이벤트를 진행합니다. 이 책이 CSS와 HTML을 다룰 줄 아는 분을 기준으로 만들어졌기 때문에 어느정도 웹 디자인 지식이 있어야 따라하실 수 있습니다. 대상 : 웹디자이너, 웹 개발자, 및 CSS로 웹사이트를 스스로 만들 줄 아시는 분을 기준으로 네이버, 티스토리, 다음, 각 포털 사이트 블로거를 배분하여 10명을 선정합니다...
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. LAVISH 부트스트랩 테마 프로그램 사이트 : https://github.com/mquan/lavish데모 사이트 : http://www.lavishbootstrap.com/ WRAPBOOTSTRAP 유료 테마 사이트 프로그램 사이트 및 데모 사이트 : https://wrapbootstrap.com/ FBOOTSTRAPP 페이스북 스타일 부트스트랩 테마 프로그램 사이트 : https://github.com/ckrack/fbootstrapp데모 사이트 : h..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. JQDRAWBOOTSTRAPGRID 디자인 작업시 그리드 생성. 보이기 감추기 기능 제공 프로그램 사이트 : https://github.com/plozi/jQDrawBootstrapGrid데모 사이트 : http://plozi.github.com/jQDrawBootstrapGrid/example/ex.html DIVSHOT 웹 앱 인터페이스 빌더 프로그램 사이트 및 데모 사이트 : http://www.divshot.com/ BOOTSTRAP-FORM-BUIL..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. TWITTER BOOTSTRAP BUTTON GENERATOR WITH FAMFAMFAM ICONS 1000개의 무료 팜팜팜 아이콘과 부트스트랩 버튼 프로그램 사이트 및 데모 사이트 : http://www.plugolabs.com/custom-twitter-bootstrap-button-generator-with-famfamfam-icons/ CSS3 GRADIENT GENERATOR CSS3 그래디언트 생성기 프로그램 사이트 및 데모 사이트 : http:/..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. WP-BOOTSTRAP-GALLERY 워드프레스 갤러리 프로그램 사이트 : https://github.com/twittem/wp-bootstrap-gallery WP-BOOTSTRAP-NAVWALKER 부트스트랩 용 워드프레스 내비게이션 메뉴 프로그램 사이트 : https://github.com/twittem/wp-bootstrap-navwalker WP PLUGIN FOR BOOTSTRAP SHORTCODES 부트스트랩 스타일시트 숏코드. 테마와 함께 제공..