웹마스터 팁

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


모르시는분들은 : 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 페이스북 클릭시 나오는 팝오버




제목 글쓴이 날짜
폰갭 작업시 폰 내부 html에 변수 전달 방법 (get) Happyphp 2014.12.09
IE에서 스크립트 생성 iframe 요소에 name 속성 지정이 무시될 때 신평 2014.12.08
파일첨부 된 글을 게시글 이동시, 사용자정의 값이 전부 삭제되는 버그 패치 [5] sejin7940 2014.11.20
블루호스트(Bluehost)에서 XE 제로보드 및 텍스타일 블로그 서브도메인에 설치하기 [4] file TELSTER 2011.03.25
jq로 데이터 입력시 enter키 먹게 하기 [3] Happyphp 2014.11.27
Simplestrap css, js cdn에서 로드하기 [5] file Typhoon 2014.08.29
bing 번역 함수 만들어 사용하기 Happyphp 2014.11.26
Animate 사용 돼지코구뇽 2014.11.26
1.7.3.2로 업데이트 이후, 글쓴이 제대로 표현하기 (스킨:스케치북5) [13] 준스타일 2013.05.04
xe 어플 개발시 키캡 4.4.4 미만 업로드 문제 [3] Happyphp 2014.11.25
누리고쇼핑몰-모바일 이니시스 결제에서 필수요청값 누락 에러로 결제 안되는것 해결하는 미봉책 garnecia 2014.11.23
누리고 쇼핑몰 - 모바일 버전에서 상품몰에 취소/환불 부분이 적용안되는부분 해결 하는 팁 garnecia 2014.11.23
회원가입확장 모듈 - 가입절차중 오류 발생시 처음으로 돌아가는 현상 [1] 김개발 2013.08.30
본문을 애드센스 주변에 배치하기 [1] file 하얀마법 2014.11.15
회원포인트 목록에서 검색 후 포인트 업데이트시 검색 상황이 그대로 유지되도록 sejin7940 2014.11.20
본문에서 작성자 글 모아서 보여주기 - 응용버전 [4] 하얀마법 2014.11.15
부트스트랩 툴팁 , 팝오버 TIP file 돼지코구뇽 2014.11.17
프로필 사진 저장시 잘려서 저장되는 경우 [11] YJSoft 2014.05.15
html 붙여넣기 가능한 무료 익명 채팅 프로그램(초간단) [1] file 임채원임 2014.11.17
본문에서 작성자 글 모아서 보여주기 [15] 하얀마법 2014.11.15