부트스트랩 커스텀 버전 빌드 및 다운로드 부트스트랩 커스텀 버전을 빌드하고 다운로드 할 수 있습니다. 아래 URL에서 말이죠 !! http://getbootstrap.com/customize/ 커스텀 버전이 필요한 이유는 아래 그림에서 확인할 수 있습니다. 먼저 커스텀 없이 다운로드 한 파일의 크기를 확인해보시죠. min.css가 121KB입니다. 아래는 커스텀해서 조금 빼고 빌드한 버전의 파일 크기입니다.거의 절반으로 줄었습니다. 물론 이것은 어떤 것을 빼고 넣느냐에 따라서 달라지긴 하겠죠!! 파일 크기가 줄면 그만큼 더 웹 사이트 로딩 속도가 빨라지겠죠 :)그래서 저는 필요하다고 생각합니다 !!! 부트스트랩이 꽤 로딩 속도를 잡아먹는다고 생각하거든요. 위 URL에 들어가보면 체크박스로 빼고 싶거나 추가하고 싶은 것들을 선택할 수 있습니다.아.. 더보기 Bootstrap: 그리드 컬럼 가운데 정렬 적당한 제목이 생각나지 않아서. 부트스트랩에선 그리드 시스템이라고 12개의 컬럼으로 구성된 레이아웃을 제공하고 있어요. 그리드 시스템에 대해서는 http://bootstrapk.com/css/#grid (한글) http://getbootstrap.com/css/#grid (영어) 를 참고하면 됩니다. :) 화면이 12개의 컬럼으로 분할되었다고 생각하면 쉽다. 가운데에 먼가를 나타내본다고 가정하면 왼쪽(5개 컬럼) | 내용(2개 컬럼) | 오른쪽(5개 컬럼) 일케하면 되는데. 내용 컬럼이 짝수가 아니라 홀수인 경우에는 가운데 정렬을 어떻게 해야할까??요게 이번 포스팅의 내용이다. 결론부터 style을 추가함으로써 쉽게 가운데에 정렬하는 것이 가능하다. margin: 0 auto; 에서 auto가 왼쪽 오른.. 더보기 Bootstrap - glyphicon align center (가운데 정렬) bootstrap에서 제공하는 아이콘을 가운데 정렬하는 방법에 대해서 간단하게 정리해둡니다 :) 1. 정렬하기 전에는 아래 그림과 같습니다. 위 아이콘의 클래스 (class)는 glyphicon으로 되어 있을텐데요. 아래과 같이 css를 적용해줍니다. 2. css에 따라 가운데 정렬된 형태는 아래와 같이 시각화됩니다. 끝 :) 더보기 Bootstrap alert + collapse Bootstrap의 alert + collapse를 활용하면 alert를 보여주거나 숨겨서 사용자에게 적절한 안내를 하는데 도움이 됩니다. 1. 다음 코드는 아래 그림과 같이 alert를 보여줍니다. 좋습니다. 하지만 danger alert div 오른쪽의 x를 누르면 div가 사라지고 show 버튼을 눌러도 다시 div가 나오지는 않습니다. 일반적으로 alert는 반복적으로 활용하는 경우가 더 많은 것 같지 않나요? 예로 이메일 형식을 검사해서 alert를 띄워준다고 하면 반복해서 틀리는 경우가 존재할 것 같아요. 2. 그래서 아래와 같이 alert 코드를 변경합니다. 주석으로 처리한 소스가 기존 소스이고 아래 추가된 소스는 클릭하면 id를 활용해서 해당 div를 숨기는 처리를 합니다. 물론 위에 소스.. 더보기 Bootstrap3 Typeahead 결론부터 말하면 이번 포스팅은 아래 주소에서 제공되고 있는 라이브러리에 대한 이야기 !! url: https://github.com/bassjobsen/Bootstrap-3-Typeahead 저는 2시간 전까지 typeahead 만을 활용해왔는데 이게 기본 설정이 첫 번째 요소를 선택하는 형태는 아닙니다.해결할 수 있는 방법이 꽤 많이 있긴 하던데, 내가 잘못한 것이겠지만 적용이 안되서 문제가 있었어요. 그래서 찾아본 결과 Bootstrap에 적합하게 변경한 듯한 Typeahead를 찾았고 적용했고, 기본적으로 첫 번째 요소를 선택하는 것이 가능해졌습니다. 그래서 간단하게라도 정리!! 1. 일단 생성하는 방법부터 기본 Typeahead와는 차이가 있어요. 아래는 예시입니다. Bootstrap3 Typea.. 더보기 bootstrap navigation color change 부트스트랩에서 제공되는 네비게이션의 색을 변경하기 위해서 아래 사이트를 활용하고 있습니다. url : http://work.smarchal.com/twbscolor/ 상단에서 원하는 색을 선택합니다. 위에서 선택된 색은 페이지 제일 하단에 SCSS / SASS / LESS / CSS로 나타납니다. 이것을 복사해서 자신의 프로젝트에 적용하면 되는거죠 :) 저는 노란색 계열로 변경해봤습니다. :) 아래 처럼요. 적용해본 결과는 아래와 같아요 :) 더보기 Bootstrap Table 정리 2 이번 포스팅에서는 Bootstrap Table 정리 2Bootstrap에서 기본적으로 제공되는 Table에 여러 기능을 붙여 쉽게 동적인 테이블을 만들 수 있습니다. 깃허브 사이트는 https://github.com/wenzhixin/bootstrap-table상세 설명이 되어 있는 사이트는 http://bootstrap-table.wenzhixin.net.cn/예제 사이트는 http://issues.wenzhixin.net.cn/bootstrap-table/ 위 사이트에 모두 정리되어 있어요. 정리 1에 이어서 !! 2에서는 테이블 컬럼을 시각화할 때 단순 값 표현이 아니라 값을 활용해서 커스터마이징 시킬 때 어떤 값을 사용해야 하는가.. 에 대해서 간단하게 정리해둡니다. :) 아래와 같이 테이블의 H.. 더보기 이전 1 다음
