웹마스터 팁

부트스트랩 다들 아실거라 생각하고 ..


모르시는분들은 : http://bootstrapk.com/


반응형웹에 천재상을 받은 부트스트랩..


여기서 부트스트랩 js 파일이 존재하는데 호출을 하였음에도 불구하고


툴팁 또는 팝오버가 실행되지 않으시는분은 해당 사이트에 메뉴얼을 놓치신겁니다.


<!--부트스트랩-->

<script src="./bootstrap.min.js"></script>

<link rel="stylesheet" href="./bootstrap.min.css" type="text/css" rel="stylesheet">


이와같이 호출을 하고서 그후에 스크립트는 들어있지만 속성값을 선언해줘야 된다는 메뉴얼대로


<script type="text/javascript"> $(document).ready(function(){ $(".popover-top").popover({trigger: 'hover click','placement': 'top'}); }); </script>

위와같이 해당 페이지 또는 상단 스크립트라인에 넣어주시고

(클래스를 보시면 popover-top으로 되어있고 오버 또는 클릭시 이벤트가 들어가있습니다.)

<a href="#" class="btn btn-info" data-toggle="popover-top" data-content="설명글" title="제목">버튼명</a>

코드 사용시 버튼을 예로 들었는데요

data-toggle 이란 부트스트랩에 기초 스크립트 사용방법입니다.

자신이 사용할 스크립트를 적는거죠. 만약 저 부분에 툴팁이나 모달을 넣으시면 작동됩니다.
(단, 메뉴얼대로 스크립트를 지정해줘야하며 모달경우는 따로 페이지에 ID를 지정해줘야됩니다.)

popover-top 클래스는 제가 임의로 넣은거니 사용시와 스크립트코드 지정시에 알맞게 하시면됩니다.

제가 top을 예로 든건데 스크립트 맨 우측에 보면 top으로 지정되어있습니다.

즉. 마우스 클릭시 위로 팝오버가 뜨게 됩니다.

2.gif 페이스북 클릭시 나오는 팝오버




제목 글쓴이 날짜
SEO 모듈 수정을 통한 Google analytics User ID 추적코드 삽입 하얀마법 2014.11.14
전화번호 입력시 자동 focus Lansi 2014.11.13
ipTIME NAS 에 설치한 XE, 다올CMS 첨부파일 버튼 무반응 해결 [1] 사이버짱 2014.11.07
댓글 작성시 '서버에 요청 중입니다.' 메세지만 뜨고 무반응 일 경우 (모두는 아님) file 마키치노 2014.11.11
XE 로만든 앱 + 푸쉬기능 구현하기 (안드로이드) [53] file Xiso 2013.10.16
XE Recruitment 파일 미추가시 에러 뿜어내는 것 처리방법 [7] 송동우님최고 2013.07.12
게시판 글작성 및 댓글작성이 안될때 [2] 똑디 2012.10.18
회원가입 인증메일 Gmail 설정해도 메일 안 올 때 저는 이렇게 했습니다. [12] file 마키치노 2014.11.06
지도 링크 주소 형식 ms.kim 2014.11.05
ie11에서 한글파일이름 다운로드시 깨짐 방지 방법 맥가이버878 2014.11.04
XE 에서 첨부파일 100% 후 사라지는 문제 [3] 야옹이맨 2014.10.28
관리자 회원목록의 회원검색에 생일 항목 추가하는 방법 sejin7940 2014.11.03
xe 1.7.4 이상 object cache 및 template cache 적용 방법 [3] XE러버 2014.07.04
SFTP 적용하기 [6] Seeean 2014.02.24
form에 error_return_url 자동 추가 사용하지 않기 [1] 신평 2014.10.02
게시판 에디터 확장 컴퍼넌트 중 원하는 항목을 밖에다가 버튼화 [3] sejin7940 2010.07.18
게시물 하단에 예쁜 추천,비추천 아이콘 버튼 추가하기~ [12] file xemall 2010.11.28
아이디 첫글자에 숫자 허용 [2] wooildang 2014.07.24
기본 URL 지정 문제 해결 & 멀티도메인 1사이트 사용 간단 설정 팁 [4] SeungXE 2014.10.19
PHP에서의 파일입출력 문법 (간단히) [92] zero 2000.03.06