본문 바로가기

분류 전체보기751

[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] 부트스트랩 – 모달(팝업창이 위에서 내려오는 구조) 크기 변경 .modal-dialog 선택자가 있는 곳에 .modal-lg 또는 .modal-sm을 추가하여 모달의 너비를 변경할 수 있습니다. 나머지 속성들은 아래 링크를 클릭하여 참조하세요. [bootstrap] 부트스트랩 – 모달(팝업창이 위에서 내려오는 구조) 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.
[bootstrap] 부트스트랩 – 목록 – 패널(Panels) 패널은 콘텐츠가 있는 박스 형태의 구성요소를 만들 때 사용합니다. Basic panel example .panel-heading을 사용해서 콘텐츠 영역과 분리된 제목 영역을 만들 수 있습니다. Panel heading without title Panel content .panel-footer를 사용해 푸터를 배치할 수도 있습니다. Panel content Panel footer 2016. 2. 3.
[bootstrap] 부트스트랩 – 리스트 그룹(List group) – 콘텐츠 추가 목록에 콘텐츠를 추가한 예제입니다. 2016. 2. 3.
[bootstrap] 부트스트랩 – 리스트 그룹(List group) – 색상 및 링크 목록에 색상 및 링크를 추가한 3가지 예제입니다. 참고하세요~ 2016. 2. 3.
[bootstrap] 부트스트랩 – 리스트 그룹(List group) – 하이라이트 목록에 하이라이트 표시를 하려면 다음과 같이 .active를 넣어주세요. Cras justo odio Dapibus ac facilisis in 2016. 2. 3.
[bootstrap] 부트스트랩 – 리스트 그룹(List group) – 배지 목록에 배지를 추가한 모습입니다. 14 Cras justo odio 2 Dapibus ac facilisis in 1 Morbi leo risus 2016. 2. 3.
[jQuery] outerHTML 간단하게 구현해서 사용하기 javascript에는 outerHTML이라는 게 있어서 해당 객체의 안의 내용 뿐 아니라 자기 자신을 포함한 코드를 가져올 수가 있습니다.공간 학습 회색 공간 이런 소스가 있다고 할 때, 아래처럼 소스를 가져올수가 있습니다. document.getElementById(“p-line”).innerHTML (= $(“.p-line”).html()) 회색 공간 document.getElementById(“p-line”).outerHTML 회색 공간 jQuery에는 의외로 이런 outerHTML 메소드가 없습니다. 그래서, 만들어 주어서 사용해야 하는데, 의외로 간단히 한줄로 해결할수가 있습니다. $(“p-line”).clone().wrapAll(“”).parent().html()소스를 설명을 하자면… 본인 .. 2016. 2. 3.
[bootstrap] 부트스트랩 – 리스트 그룹(List group) 사이드바의 메뉴나 카테고리 목록을 만들 때 유용합니다. Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 사용법은 위와 같이 ul, li 태그에 클래스만 넣어주면 됩니다. 2016. 2. 3.
[bootstrap] 부트스트랩 – 프로그레스 바(Progress Bar) 60% Complete 부트스트랩에서 프로그래스 바를 나타내는 기본 소스는 위와 같습니다. 색상 선택자를 추가하면 여러가지 색상을 나타낼 수 있습니다..progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger 다음은 사선 줄무늬를 나타내는 선택자입니다..progress-bar-striped 줄무늬가 애니매이션 되는 모습을 보려면 .active 선택자를 추가하면 됩니다. 45% Complete 다음과 같이 하면 프로그레스 바 하나에 여러개의 색상을 나타낼수도 있습니다. 35% Complete (success) 20% Complete (warning) 10% Complete (danger) 2016. 2. 3.

티스토리툴바