본문 바로가기

부트스트랩140

[bootstrap] 부트스트랩 – 버튼 상태 제어하기 – 체크박스 버튼 부트스트랩으로 체크박스를 버튼처럼 만들 수 있습니다. 체크박스를 그룹으로 만들고 .btn-group 선택자가 있는 div에 data-toggle=”buttons” 속성을 추가합니다. 처음부터 눌린 상태로 만들려면 label에 .active 선택자를 추가하고 input에 checked 속성을 추가합니다. 2016. 2. 8.
[bootstrap] 부트스트랩 – 버튼 상태 제어하기 – 싱글 토글 버튼 버튼의 누름 상태와 해제 상태, 두 가지의 상태를 만들 수 있습니다. 자바스크립트로 작동하므로 data-toggle=”button” 속성을 포함시킵니다. 처음부터 미리 눌러진 상태를 만들려면 .active 선택자를 추가하고 aria-pressed=”true”로 변경합니다. 2016. 2. 8.
[bootstrap] 부트스트랩 – 버튼 상태 제어하기 버튼을 클릭하면 “Loading…”이라는 메시지가 버튼에 나타납니다. 데이터 속성으로 data-loading-text=”Loading…”을 추가하고 크로스 브라우저 호환성을 위해 autocomplete=”off” 속성을 추가합니다. Loading state 자바스크립트는 다음과 같은 형태로 사용합니다. 주석 부분에 실제 작업이 이뤄지는 코드가 들어가고 종료되면 리셋됩니다.$(‘#myButton’).on(‘click’, function () { var $btn = $(this).button(‘loading‘); // business logic… $btn.button(‘reset‘); }); 여기서는 테스트를 위해 다음의 코드를 사용합니다. 클릭하면 로딩 텍스트가 나타나고 3초가 지나면 원래의 버튼 텍스트가.. 2016. 2. 8.
[bootstrap] 부트스트랩 – 알림메시지(Alert message) data-dismiss=”alert” 속성을 사용하면 자바스크립트를 추가할 필요는 없으며 메서드는 .alert(“close”); 하나만 있습니다. 그리고, 이벤트는 두 가지가 있습니다.$(“.alert”).on(“close.bs.alert”, function() { alert(“이벤트 실행됨”); }); close.bs.alert : 알림 메시지 박스가 닫히기 전에 이벤트가 실행됩니다.close.bs.alert : 알림 메시지 박스가 닫힌 후에 이벤트가 실행됩니다. 2016. 2. 8.
[bootstrap] 부트스트랩 – 팝오버(Popover) 팝오버는 툴팁과 비슷한 기능을 하지만 좀더 큰 규모로 팝업창에 가깝습니다. 따라서 툴팁의 사용법과 같고 주로 버튼이나 메뉴의 상세한 추가 설명에 사용됩니다. 콘텐츠가 전혀 없으면 아무것도 나타나지 않습니다. 팝오버는 제목 부분과 콘텐츠 부분으로 나뉘며 제목은 title, 콘텐츠는 data-content 속성에 입력한 내용이 출력됩니다. 둘 중 어느 하나만 입력해도 해당 내용만 나타납니다. 자바스크립트로 작동되므로 data-toggle=”popover”가 반드시 필요합니다. 위치는 data-placement 속성에 입력되는 등 대부분이 툴팁과 같지만 팝오버는 마우스를 오버했을 때 나타나는 것이 기본입니다. Popover on left 자바스크립트로 다음과 같이 활성화합니다.$(“[data-toggle=’p.. 2016. 2. 8.
[bootstrap] 부트스트랩 – 툴팁(Tooltips), 말풍선 툴팁은 링크에 마우스를 올리면 메시지가 나오는 말풍선을 말합니다. 기본적으로 모든 웹브라우저에서 태그에 title 속성을 적용하면 마우스 오른쪽 아래에 말풍선이 나타나지만 부트스트랩은 보다 세련된 말풍선 효과를 나타낼 수 있습니다. 툴팁은 예외적으로 자바스크립트로 활성화해야 하며 data-toggle=”tooltip” 속성도 포함해야 합니다. 타겟팅을 위해 선택자를 지정해야 하는데 모든 툴팁에는 이 데이터 속성이 있어서 이를 대상으로 선택자를 정합니다. 툴팁으로 나타날 문구는 title 속성이나 data-original-title 속성에 값으로 지정합니다.you probably 자바스크립트는 다음과 같이 설정합니다.$(“[data-toggle=’tooltip’]“).tooltip(); 툴팁의 위치는 da.. 2016. 2. 5.
[bootstrap] 부트스트랩 – 탭(Tabs)에 이벤트 기능 추가 data 속성을 사용할 때 탭 목록의 각 a 태그에 data-toggle=”tab”을 추가했습니다. 자바스크립트를 사용할 때도 모든 a 태그에 대해서 .tab(‘show’) 메서드를 사용합니다. e.preventDefault();는 클릭했을 때 상단으로 이동하는 것을 방지합니다.$(“#myTab a”).click(function(e) { e.preventDefault(); $(this).tab(“show”); }); 특정 탭을 활성화하기 위해 .active 선택자를 사용합니다. 하지만, 이를 무시하고 다른 탭을 활성화하고 콘텐츠를 나타나게 하려면 자바스크립트를 사용합니다. 아래와 같이 여러가지 선택자를 사용할 수 있습니다.$(“#myTab a[href=’#profile’]”).tab(“show“); //.. 2016. 2. 5.
[bootstrap] 부트스트랩 – 스크롤스파이(Scrollspy) 웹페이지에서 스크롤할 때 같은 페이지에 있는 콘텐츠의 내용과 연결된 메뉴를 표시하는 기능입니다. 또한, 해당 메뉴를 클릭하면 콘텐츠로 이동합니다. 메뉴 부분은 냅바(navbar)를 사용해야 하며 우선 메뉴바에 아이디 선택자(예, navbar-example)를 만들고 콘텐츠 영역에서 이 아이디를 데이터 타겟으로 정합니다. 콘텐츠 영역에는 data-spy=”scroll”을 추가하고 각 메뉴의 태그에 링크를 만드는데 이 아이디를 콘텐츠 영역의 아이디와 일치시킵니다. data-offset은 스크롤할 때 상단으로부터의 거리이며 제대로 설정하지 않으면 콘텐츠가 상단에 있더라도 메뉴가 하이라이트 되지 않습니다. 설정하지 않으면 기본은 10픽셀입니다. 메뉴바를 고정(fixed)으로 사용할 때는 오프셋이 작동하지 않습니.. 2016. 2. 5.
[bootstrap] 부트스트랩 – 드롭다운(dropdown) 다른 플러그인처럼 data- 속성과 자바스크립트로 구현할 수 있으며 모바일 기기에서는 드롭다운을 열면 메뉴 이외의 영역을 탭해도 드롭다운이 닫히게 .doropdown-backdrop 클래스가 추가됩니다. 따라서, 하나의 드롭다운이 열린 상태에서 다른 드롭다운을 열려면 우선 빈 곳을 탭 한 후에 해야 하며 data-toggle=”dropdown” 속성은 반드시 포함해야 합니다. Dropdown … button 태그가 아닌 a 태그를 사용할 때는 링크를 표시하기 위해 href=”#”를 사용하지 않고 data-target=”#”과 사이트 도메인을 href에 추가합니다. Dropdown trigger … 자바스크립트를 이용해 드롭다운을 활성화 하려면 다음과 같은 형태로 사용합니다.$(“.dropdown-togg.. 2016. 2. 5.
[bootstrap] 부트스트랩 – 사용자(커스텀) 모달 커스텀 data- 속성을 이용해 입력란에 데이터를 미리 입력할 수 있습니다. Open modal for @kmdo Open modal for @kfat Open modal for @ktwbootstrap 맨 아래에 다음 자바스크립트 소스를 추가하여 모달창이 열릴 때 값을 변경해 줄 수 있습니다.$(document).ready(function() { $(‘#exampleModal‘).on(‘show.bs.modal’, function (event) { var button = $(event.relatedTarget); // Button that triggered the modal var recipient = button.data(‘whatever‘); // Extract info from data-* att.. 2016. 2. 5.
[bootstrap] 부트스트랩 – 모달(팝업창이 위에서 내려오는 구조) 모달이란 버튼을 클릭하면 팝업창이 위에서 내려오는 구조입니다. 용도는 다양한데 로그인, 회원가입, 알림 메시지 등 여러 용도로 사용할 수 있습니다. data-toggle=“modal” : 자바스크립트에 의해 작동하므로 이 속성을 추가해야 합니다. (이 속성은 토글 역할을 합니다. 즉, 클릭하면 팝업창이 나타나고 다시 이 버튼을 클릭하면 사라집니다.) data-target=“#myModal” : 버튼을 클릭했을 때 열리는 대상 모달창의 id값을 넣어줍니다. class=“modal fade” : .modal은 포지션을 정하기 위한 것이므로 나타나는 위치를 수정하려면 이 선택자에 대해 스타일을 재설정하면 됩니다. .fade는 창이 나타날 때 페이드 효과를 주기 위한 것입니다. class=”modal-dialo.. 2016. 2. 5.
[bootstrap] 부트스트랩 – 단순 박스 단순한 박스 형태의 레이아웃을 만들 때 사용합니다. Look, I’m in a well! Look, I’m in a large well! Look, I’m in a small well! 크기를 바꾸려면 well-lg, well-sm을 넣어주시면 됩니다. 2016. 2. 5.
[bootstrap] 부트스트랩 – 비디오 – 반응형 임베드 (Responsive embed) 유튜브와 같은 비디오를 반응형으로 만들 수 있습니다. .embed-responsive 는 기본 선택자이고 .embed-responsive-16by9 또는 .embed-responsive-4by3 을 사용한 내부에 iframe, object, embed, video 태그를 사용한 비디오를 추가하면 됩니다. 유튜브에서 iframe 코드를 복사해 사용할 경우 그대로 붙여넣어도 되며 width, height, frameborder 등의 속성은 필요 없습니다. 화면 너비만 변경하면 가로 세로 비율이 자동으로 바뀝니다. video 사용법은 아래와 같습니다. 2016. 2. 5.
[bootstrap] 부트스트랩 – 패널과 리스트 그룹 패널에 리스트 그룹을 추가해도 조합이 잘 됩니다. 2016. 2. 5.
[bootstrap] 부트스트랩 – 목록 – 패널(Panels) 색상 기본 색상인 .panel-default 외에 5가지의 색상이 있습니다.… … … … … … 2016. 2. 3.

티스토리툴바