작성일자
카테고리 부트스트랩/부트스트랩으로 디자인하기

"트위터 부트스트랩: 디자이너도 놀라워할 매끈하고 직관적인 웹 사이트 제작의 비밀" 책 소스코드







1장첨부파일.zip


2장첨부파일.zip


3장첨부파일.zip


cloud-zoom.1.0.2-1.zip


부트스트랩(0318)_단면(4장).pdf


4장bootstrap3.0으로 디자인 수정하기.zip


2013.3.17일 현재 부트스트랩 3.0 버전

bootstrap-3.0.0-wip.zip



2013.9.27일 현재 부트스트랩 3.0 버전


bootstrap-master0927.zip



압축을 풀고 _gp_pages 폴더에 들어가서 index.html 파일을 선택하면 브라우저에 바로 열립니다.





참고 사이트


서적 웹사이트http://twitter-bootstrap.kr/


2.0 버전으로 디자인하기 : http://twitter-bootstrap.kr/bootstrap-demo/


3.0 버전으로 디자인하기 : http://twitter-bootstrap.kr/bootstrap-demo2/

위 3.0 버전 데모 사이트는 3월 17일 현재 버전으로 디자인 한 것입니다. 부트스트랩 관련 플러그인이 업데이트되는 대로 최신 버전으로 재디자인해서 업로드하겠습니다.

부트스트랩 3.0 버전  : http://twbs.github.io/bootstrap/



책에서 사용된 링크의 변경


책에서 사용된 링크는 부트스트랩 프로젝트가 변경되면서 수시로 변경될 수 있습니다. 예를들어 트위터 부트스트랩 2.0 버전의 홈페이지로 가는 링크는 http://twitter.github.com/bootstrap/ 로 돼있지만 부트스트랩이 3.0 버전으로 바뀌면서 2.0의 버전 홈페이지도 URL이 http://getbootstrap.com/2.3.2/로 변경됐습니다. 이처럼 수시로 변경되니 링크가 안되면 언제든 질문 주세요.


부트스트랩 2.3.2 버전 내려받는 사이트https://github.com/twbs/bootstrap/tree/v2.3.2


bootstrap-2.3.2.zip



플러그인 업데이트시 구버전 내려받는 방법


책에서 사용된 부트스트랩 플러그인들은 항상 업데이트 됩니다. 그러니 책대로 안될 경우 플러그인 홈페이지에서 파일 내용을 점검해야 합니다. 부트스트랩 관련 플러그인이 업데이트 되면 책에서 사용한 것과 다르므로 제대로 표현되지 않을 수도 있습니다. 대부분의 프로젝트는 깃허브에서 운용되므로 해당 프로젝트의 페이지에서 구버전을 내려받아 사용할 수 있습니다.


책에서 사용된 이미지 갤러리 플러그인은 아래의 링크로 가면 있습니다.


https://github.com/blueimp/Bootstrap-Image-Gallery




branch master 버튼을 클릭하고 Tag 탭을 선택한 다음 2.10.1버전을 선택하면 화면 내용이 바뀝니다. 우측의 사이드바에서 Download Zip 버튼을 클릭해서 파일을 내려 받습니다. 


책에서는 경로를 직접 사용했는데 경로도 바뀌었으므로 파일을 직접 링크합니다.


260페이지에서 아래의 링크를 수정합니다.


<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>


위 링크를 아래의 링크로 수정


<script src="js/load-image.js"></script>


내려받은 파일에서 압축을 풀고 load-image.js 파일을 js 폴더에 붙여넣으면 완료입니다.



jh

잘 받아가겠습니다!

BlogIcon 베누시안

코드 사용시 문제점이 있으시면 알려주세요.

BlogIcon demun

부트스트랩 책이 나왔군요. 축하합니다.
개인적으로 부트스트랩을 너무 좋와하는데.....이런 책이 나와서 많이들 도움이 되겠어요...

그런 기술이 우리나라에서도 나와야되는데....

축하합니다.

BlogIcon 베누시안

감사합니다. 잘됐는지 모르겠네요.

비밀댓글입니다

BlogIcon 베누시안

안녕하세요. 부트스트랩 3.0은 모바일에 적합한 디자인입니다. 2.0 버전이 모바일과 데스크탑을 유연성 있게 디자인할 수 있다면 3.0은 가능한한 모바일에 적합하도록 파일의 용량도 줄이고 있으며 그만큼 기능도 축소되면서 모바일용 기능이 추가되고 있습니다. 3.0 버전이 나온다고 해서 2.0이 사라지는 것이 아니라 둘다 병용해서 사용될 것입니다. 해외의 경우 비표준인 IE8이하의 웹브라우저 사용도가 낮지만 국내의 경우는 상당히 높은 편이죠. 그래서 2.0 버전이 앞으로도 몇년 동안은 계속 사용될 것입니다.
킴스큐에 적용될 부트스트랩도 아마도 2.0 버전이 될 것입니다. 3.0은 아직도 사용자가 많은 IE7을 지원하지 않기 때문이죠.
그리고 CMS는 워드프레스를 권해드립니다. 상당히 많은 플러그인으로 인해 원하는 웹사이트를 쉽게 만들 수 있습니다. 무료 테마도 아주 많고 유료라 하더라도 40불 정도면 아주 훌륭한 테마를 구매해서 멋진 사이트를 만들 수 있습니다. 그에 비해 XE나 킴스큐는 테마가 적습니다.
워드프레스 관련 서적도 아주 많이 나와있어서 취향에 맞는 책을 구해 보시면 많은 도움이 될겁니다.

크롬

관리자의 승인을 기다리고 있는 댓글입니다

BlogIcon 베누시안

위 압축파일 중 1장첨부파일.zip 파일을 해제하면 bootstrap 폴더와 1장코드.txt 파일이 있습니다. bootstrap 폴더는 시작 파일과 완료파일로 나눠져 있습니다. 1장 코드.txt 파일은 모든 코드가 포함돼 있고 책에 있는 외부 링크 까지 포함돼있으니 다시 한번 확인해보세요. 제가 다시 내려받아 확인해봤습니다.

BlogIcon 캠퍼스친구

책 잘보고 있습니다.

BlogIcon 베누시안

감사합니다.

정명숙

3.0부터는 전체적으로 모달 기능이 실행이 안됩니다.
1장의 135page의 간단한 modal도 안되고
3장 162page의 모달갤러리도 실행이 안됩니다.

데모버전의 2.0은 작동하는데, 3.0 데모버전에서도 동일하게 모달이 작동을 하고 있지 않습니다.
어떻게 하면 3.0에서도 모달이 작동되게 할 수 있나요?

BlogIcon 베누시안

3.0 데모의 회원가입 버튼을 클릭해보세요. 작동이 잘됩니다. 그곳이 모달로 만들어진 것입니다. 아마도 갤러리 페이지를 보신 것 같은데 이미지 갤러리 플러그인이 3.0과 호환되지 않아서 그런 것입니다. 이부분이 업데이트 되면 데모 페이지도 업데이트 할 것입니다.

dh

<트위터부트스트랩> 책을 공부하고 있습니다. 중간에 막히는 부분이 있어서 질문 올리는데,
책 페이지 53쪽에 나오는 hero.html 파일을 어디에서 찾아야하는지 모르겠습니다.
bootstrap-master 폴더 파일에도 없고 그리고 책 그림1-30 에 나온것에서 시간이 지나고 새로 업데이트 되었는지 그림1-30에 나온 파일경로대로 순서대로 들어가도 그림처럼 나오지 않고 더 추가된 폴더도 많고 무엇보다 hero.html 파일은 찾을 수 없습니다. 이 사이트에 올려져있는 1장예제파일에서 비슷한 이름의 파일을 열면 그건 한글로 되어있던데 어떻게 적용을 해야하나요. 답변 부탁드립니다^^

일베충

https://github.com/twbs/bootstrap/tree/v2.3.0
여기 가시면 다운받으실 수 있습니다.
책에 소개가 부실해서 저도 몇시간 고생하다가 겨우 발견했네요.
저자님 이런 부분좀 신경써 주세요. 여러사람 시간낭비하고 있습니다.

BlogIcon 베누시안

책에서 나오는 링크는 수시로 변합니다. 변하는 내용에 대해서는 위 글에 첨부돼있습니다.

부트스트랩

제가 모르고 위에다 글을 적었네요.. 죄송합니다. 여기에다 다시 글을 남깁니다..
Bootstrap3이라고 해서. 최근에 나온 grid system에 대해 설명이 있는줄 알았는데..기존에 사용했던 span으로 구분한 것만 설명이 되어 있네요.. 2에서 3으로 넘어오는 과정에서 그리스 시스템이. 조금 난해한 부분이 있네요.. col-lg-xx, col-sm-xx, col-xs-xx, col-md-xx등 공식사이트에 나와 있는 내용을 보면 어느정도는 알 것 같은데.. 샘플을 나오는 것을 보면.. col-sm-xx만 쓰는 것도 있고.. col-lg-xx col-sm-xx col-xs-xx 이렇게 쓰이는 것도 있고.. col-lg-xx만.. 이것이 모바일우선주의라고 해서.. 단계적으로 모바일부터 사이트를 제작하는 것으로 이해를 하고 있긴한데요.. 유동성 있게 제작할려고 하는 것은 알겠지만.. 쓰임 용도를 잘 모르겠고요.. 이렇게 구분을 한 이유가 무엇인지.. 궁금합니다

BlogIcon 베누시안

그리드 시스템으로 검색하면 나옵니다.

부트스트랩

네. 감사합니다. ^^:

BlogIcon Misun Kim

hero.html 파일을 프로젝트 폴더에 붙여넣기하면 같은 파일인데도 왜 웹 상에서 화면이 다르게 나오는지 모르겠어요. 프로젝트 폴더에 옮기기 전에 파일을 열어보면 책에 나오는데로 잘 나오는데, 붙여넣은 파일을 열어보면 다르게 나와서 그 후에 단계를 진행을 못하고 있어요.

BlogIcon 베누시안

안녕하세요. 오랫만이시네요. 아마도 파일을 링크하는 경로가 잘못돼을 것 같습니다. 모든 파일들이 있는 bootstrap 폴더를 압축해서 이메일로 보내주시면 알려드리겠습니다. martian36@naver.com

BlogIcon Misun Kim

일단은 그 부분은 뒤로 하고 차근차근 하나씩 공부해보려구요. 다음에 또 한번 문제가 생기면 메일로 보내드리도록 할게요. 감사합니다. ^^

BlogIcon TasteGod

1장 53page 보고있는데요. 이 게시물에 첨부된 모든 파일을 열어봐도 hero.html 이 없는거 같습니다.
1장 첨부파일내에 hero1-begin.html 같은것들은 있는데... 이것들을 참고해야 하나요? 이 파일들은... 책의 내용과 소스가 다른거 같은데... 아무튼 이 파일들을 참고해야 하나요?

BlogIcon 베누시안

https://github.com/twbs/bootstrap/tree/v2.3.2

위 링크에서 다운로드 하거나 글에 첨부 했으니 내려받아도 됩니다.

BlogIcon 웹개발자

와... 정말 댓글을 안남길수가 없네요.

부트스트랩을 부분적으로 필요한 부분만 갖다 쓰는 정도였는데

책 읽으면서 하나씩 이해가 되니까 재밌네요. ㅋㅋ

웹개발자인데 회사에서 기획도 시켜서 좀 빡빡한데 이젠 퍼블리싱도 한다고 해야겠어요 >_<

webdev

chapter 1에서 bootstrap/css/style.css

Line 11
#Login.modal, #myModal2.modal, #myModal3.modal, #myModal4.modal {
width:300px;
margin-left:-150px;
}
...
이 부분이 들어 가 있어서 PC까지는 잘되는데 모바일 사이즈에서 모달이 왼쪽으로 반쯤 숨어 버리네요. 이 부분 개선이 필요 합니다.

없애면 사이즈가 마음 대로 변하고 그러네요.

hooneybee

관리자의 승인을 기다리고 있는 댓글입니다

티스토리 툴바