본문 바로가기

Data-attribute to Modal in Bootstrap4 (모달에 데이터 전달하기) Data-attribute to Modal in Bootstrap4 부트스트랩4에서 모달을 보여지게 하는 방법은 몇 가지가 있죠. 그중에서 Button을 누르면 모달이 띄워지는 방법이 있죠. 아래와 같은 코드로 가능합니다. 검색 ... 코드를 잠깐 살펴보면 button을 누르면 data-toggle="modal" data-target="#test_modal"을 통해서 modal이 보여지게 되죠. data-target은 modal div의 id와 일치해야 하고요. 이번 포스팅에서 정리하려는 것은 button에 있는 data-test='aaa' 를 modal로 전달하자 라는 것입니다. 아래와 같은 코드로 가능한데요. show.bs.modal은 https://getbootstrap.com/docs/4.3/co.. 더보기
부트스트랩 커스텀 버전 빌드 및 다운로드 부트스트랩 커스텀 버전을 빌드하고 다운로드 할 수 있습니다. 아래 URL에서 말이죠 !! http://getbootstrap.com/customize/ 커스텀 버전이 필요한 이유는 아래 그림에서 확인할 수 있습니다. 먼저 커스텀 없이 다운로드 한 파일의 크기를 확인해보시죠. min.css가 121KB입니다. 아래는 커스텀해서 조금 빼고 빌드한 버전의 파일 크기입니다.거의 절반으로 줄었습니다. 물론 이것은 어떤 것을 빼고 넣느냐에 따라서 달라지긴 하겠죠!! 파일 크기가 줄면 그만큼 더 웹 사이트 로딩 속도가 빨라지겠죠 :)그래서 저는 필요하다고 생각합니다 !!! 부트스트랩이 꽤 로딩 속도를 잡아먹는다고 생각하거든요. 위 URL에 들어가보면 체크박스로 빼고 싶거나 추가하고 싶은 것들을 선택할 수 있습니다.아.. 더보기
Bootstrap - Vertical button group Bootstrap Button Group은 기본적으로 수평으로 구성됩니다. 하나의 클래스를 추가함으로써 간단하게 수직으로 구성할 수 있습니다. 하나의 클래스는 btn-group-vertical 입니다 :) 아래 그림은 수직으로 구성된 버튼 그룹 예시입니다. 아래는 btn-group-vertical을 추가한 div 예시 소스 예시는 아래에 있습니다. 225 230 235 240 245 더보기
Bootstrap: 그리드 컬럼 가운데 정렬 적당한 제목이 생각나지 않아서. 부트스트랩에선 그리드 시스템이라고 12개의 컬럼으로 구성된 레이아웃을 제공하고 있어요. 그리드 시스템에 대해서는 http://bootstrapk.com/css/#grid (한글) http://getbootstrap.com/css/#grid (영어) 를 참고하면 됩니다. :) 화면이 12개의 컬럼으로 분할되었다고 생각하면 쉽다. 가운데에 먼가를 나타내본다고 가정하면 왼쪽(5개 컬럼) | 내용(2개 컬럼) | 오른쪽(5개 컬럼) 일케하면 되는데. 내용 컬럼이 짝수가 아니라 홀수인 경우에는 가운데 정렬을 어떻게 해야할까??요게 이번 포스팅의 내용이다. 결론부터 style을 추가함으로써 쉽게 가운데에 정렬하는 것이 가능하다. margin: 0 auto; 에서 auto가 왼쪽 오른.. 더보기
Bootstrap Modal 띄우기(생성/열기/보여주기) Bootstrap Modal을 띄우는 방법은 Javascript를 사용하는 것과 HTML element의 data attribute를 사용하는 것이 있습니다. 일단 modal은 아래와 같은 코드로 구성되어 있다고 가정하죠. {% block start-footer %}{% endblock %} {% block modal-header %} {% endblock %} {% block modal-body %} modal test {% endblock %} {% block modal-footer %}닫기{% endblock %} {% block end-footer %}{% endblock %} 1. 먼저 Javascript를 활용하는 예는 아래와 같아요. $("#testModal").modal(); 위 그림에서 .. 더보기
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.. 더보기
Bootstrap Table 정리 1 여러 웹 페이지 개발에 사용되고 있는 Bootstrap !!!인기가 높은 만큼 여러 extension도 개발되어 있습니다. Bootstrap 사용에 대해서는 많은 블로그나 웹 페이지에서 자세히 정리되어 있어요.여기서는 간단한 정리정도 ! 이번 포스팅에서는 Bootstrap Table 정리 1 Bootstrap에서 기본적으로 제공되는 Table에 여러 기능을 붙여 쉽게 동적인 테이블을 만들 수 있습니다. 깃허브 사이트는 https://github.com/wenzhixin/bootstrap-table상세 설명이 되어 있는 사이트는 http://bootstrap-table.wenzhixin.net.cn/예제 사이트는 http://issues.wenzhixin.net.cn/bootstrap-table/ 위 사이.. 더보기