catpark's something new

트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. 

Bootstrap Modal

부트스트랩에는 기본적으로 팝업창인 모달이 포함돼있지만 한가지 종류만 있습니다. 이 플러그인은 다양한 형태의 모달을 제공합니다.

프로그램 사이트 : https://github.com/jschr/bootstrap-modal/

데모 사이트 : http://jschr.github.com/bootstrap-modal/

Fuel UX

트위터 부트스트랩에는 이미 폼을 만들기 위한 스타일시트가 있지만 이 플러그인을 사용하면 부트스트랩의 폼을 더욱 확장시킬 수 있습니다.  

프로그램 사이트 : https://github.com/ExactTarget/fuelux

데모 사이트 : http://exacttarget.github.com/fuelux/

jQuery slimScroll

일정한 범위의 컨텐트를 스크롤할 수 있는 기능입니다.

프로그램 사이트 : https://github.com/rochal/jQuery-slimScroll

데모 사이트 : http://rocha.la/jQuery-slimScroll

Bootstrap-progressbar

프로그레스 바를 색상별로 분리할 수 있는 플러그인입니다.

프로그램 사이트 : https://github.com/geersch/bootstrap-progressbar

데모 사이트 : http://geersch.github.com/bootstrap-progressbar/demo.html

Bootstrap video player

HTML5 비디오 플레이어를 만들 수 있는 플러그인입니다.

프로그램 사이트 : http://html5-ninja.com/item/Bootstrap-video-player-jQuery-plugin/5

데모 사이트 : http://html5-ninja.com/preview/index/5#.UTBERIMz3DP

- 출처 : http://martian36.tistory.com/category/부트스트랩/플러그인

트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. 

Acc-wizard

부트스트랩의 어코디언을 이용한 위자드(마법사)를 만들 수 있는 플러그인입니다. 이를 응용해서 쇼핑몰의 결제 단계별 과정이나 프로그램의 설치과정, 튜토리얼을 만들 수 있습니다.

프로그램 사이트: https://github.com/sathomas/acc-wizard

데모 사이트: http://sathomas.me/acc-wizard/#prerequisites

bootstrap-lightbox

이미지를 클릭하면 큰 이미지의 팝업창이 나오는 라이트 박스입니다.

프로그램 사이트: https://github.com/jbutz/bootstrap-lightbox

데모사이트: http://jbutz.github.com/bootstrap-lightbox/

Bootstrap-Image-Gallery

이미지 갤러리를 만들 수 있는 플러그인입니다.

프로그램 사이트: https://github.com/blueimp/Bootstrap-Image-Gallery

데모사이트: http://blueimp.github.com/Bootstrap-Image-Gallery/

Tocify

제목 태그를 목록화해서 목차를 자동으로 만들어주며 스크롤해서 내릴 경우 해당 목차가 나타나고 목차를 클릭하면 해당 컨텐트로 애니메이션 되면서 이동합니다.

프로그램 사이트: https://github.com/gfranko/jquery.tocify.js

데모사이트: http://gregfranko.com/jquery.tocify.js/

Bootstrap-Arrows

부트스트랩 디자인 형태의 화살표를 만듭니다.

프로그램 사이트: https://github.com/iarfhlaith/Bootstrap-Arrows

데모사이트: http://bootstrap-arrows.iarfhlaith.com/

본 포스팅은 이클립스 juno 버전 , jdk6 버전에서 실행하였습니다.

1. 이클립스에서 git를 사용하기 위해선 플러그인을 설치해줘야 합니다.

메뉴 -> Help ->Install New Software.. 클릭

2. Add 버튼 -> 사이트링크 추가 (Name : egit  / Location : http://www.jgit.org/updates  -> ok 버튼을 눌러줍니다.

3. 해당 주소에서 다운받을수 있는 플러그인이 검색됩니다. 모두 설치하셔도 되지만 Eclipse Egit, Elipse JGit, Elipse JGit Command Line Interface 만 클릭하여 Next 버튼을 눌러줍니다. (완료될때까지 눌러주면 잘 설치됩니다.)

4. 이제 글4번까지 올렸었던 github.com/uiandwe 의 소스를 다운받는것을 해보겠습니다.

메뉴 File -> Import 를 클릭해줍니다.

5. 3번까지 정상적으로 설치가 완료 되었다면 메뉴리스트에 git가 나오게 됩니다. Git -> Projects from Git 를 클릭하고 Next 를 눌러줍니다.

6. 로컬에서 받아올것인지, 인터넷으로 받아올것인지를 고를수 있습니다. 

github.com에서 받아와야 하므로 URI를 클릭하고 Next를 클릭합니다.

7. 받아올 URI를 지정해 줘야 합니다. 저의 경우는 https://github.com/uiandwe/git_test.git 입니다. URI 칸에 해당하는 주소를 넣어주면 나머지는 자동으로 채워집니다. Next 버튼을 눌러줍니다.

8. 해당 URI에 속해 있는 Branch 를 가져옵니다. 저의 경우 생성한 브랜치가 master 하나 이므로 하나만 뜹니다. (여러개의 경우엔 브랜치별로 다운받을수 있습니다.)

9. 로컬에 저장소를 어디에 만들것인지를 물어보는 화면입니다.

    적당한곳의 디렉토리를 지정하고 Next를 눌러줍니다.

10. git콜솔에서도 clone 명령어로 가져오듯이 마찬가지로 cloning 중입니다. 프로젝트의 크기가 크면 상당한 시간이 소요될수 있습니다.

11. 이클립스의 프로젝트를 어떻게 생성할것인지를 물어보는 화면입니다. Import exsting projects 는 기존의 프로젝트에 포함, Use the New Project wizard는 새롭게 프로젝트를 실행, Import as general project 는 이클립스에 포함되지 않는 프로젝트를 포함시키는 항목입니다.  저의 경우는 Use the New Project wizard 로 선택하여 새롭게 프로젝트를 생성하였습니다.

12. txt 파일로만 만들어졌기 때문에 General->Project 를 생성한다음 Next 를 눌러줍니다.

13. 프로젝트 이름을 넣어주고 Finish 버튼을 눌러줍니다. 

14. 프로젝트 생성과 함께 github.com에 있었던 파일까지 정상적으로 clone되어 생성되었습니다.

15. 해당 프로젝트를 클릭후 우클릭 -> Team -> Show in History 를 클릭합니다. 

16. history 창이 열리면서 그동안의 커밋 정보와 날짜, 코맨트까지 볼수 있습니다. 

17. 이번엔 이클립스에서 파일을 생성하여 커밋후 올려보도록 하겠습니다. 해당 프로젝트에 test4.txt 라는 파일을 생성하였습니다. 파일의 이미지가 ?로 뜨는군요. 아직 커밋되지 않은 파일엔 ?가 뜹니다. 

18. 다시 해당 프로젝트 우클릭-> Team -> Commit 를 눌러줍니다. 

19. git 콘솔버전과 마찬가지로 커밋할때 코맨트를 지정해줄수 있습니다 . 코맨트를 지정후 아래의 커밋되지 않는 파일들 중에서 커밋할려는 파일을 선택하고 commit 버튼을 눌러줍니다. 

20. History 창을 보면 커밋한 날짜와 코맨트가 보입니다. 또한 커밋한 파일까지 보이는군요.

21. 이번엔 github.com 에서 확인해 보았습니다. 해당 프로젝트에 커밋한 파일이 정상적으로 올라간것을 확인할수 있습니다. (text4.txt 와 .project 파일)

22. 커밋할때 올린 코맨트 까지 정상적으로 나오는것을 확인할수 있습니다. 

출처 : http://uiandwe.tistory.com/804