Twitter Bootstrap

JavaScript plugins

선행지식

Twitter Bootstrap의 JavaScript 플러그인은 jQuery를 기반으로 만들어졌기 때문에 일부 기능은 jQuery의 문법을 요구한다. 생활코딩의 jQuery 수업을 통해서 jQuery의 사용법을 배울 수 있다. (생활코딩 jQuery 바로가기

Modal

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 101 Template</title>
		<!-- Bootstrap -->
		<style>
			body {
				padding: 10px;
			}
		</style>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="css/bootstrap-responsive.css" rel="stylesheet">
	</head>
	<body>
		<!-- Button to trigger modal -->
		<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

		<!-- Modal -->
		<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					×
				</button>
				<h3 id="myModalLabel">Modal header</h3>
			</div>
			<div class="modal-body">
				<p>
					One fine body…
				</p>
			</div>
			<div class="modal-footer">
				<button class="btn" data-dismiss="modal" aria-hidden="true">
					Close
				</button>
				<button class="btn btn-primary">
					Save changes
				</button>
			</div>
		</div>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

scrollspy

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 101 Template</title>
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="css/bootstrap-responsive.css" rel="stylesheet">
		<style>
			.box {
				margin: 20px;
				padding: 15px;
				background: #eee;
				height: 1000px;
			}
		</style>
	</head>
	<body data-spy="scroll" data-target="#navbar">
		<div id="navbar" class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<ul class="nav">
					<li>
						<a href="#post1">Post 1</a>
					</li>
					<li>
						<a href="#post2">Post 2</a>
					</li>
					<li>
						<a href="#post3">Post 3</a>
					</li>
					<li>
						<a href="#post4">Post 4</a>
					</li>
					<li>
						<a href="#post5">Post 5</a>
					</li>
				</ul>
			</div>
		</div>
		<div id="post1" class="box">
			<h1>Post 1</h1>
		</div>
		<div id="post2" class="box">
			<h1>Post 2</h1>
		</div>
		<div id="post3" class="box">
			<h1>Post 3</h1>
		</div>
		<div id="post4" class="box">
			<h1>Post 3</h1>
		</div>
		<div id="post5" class="box">
			<h1>Post 3</h1>
		</div>

		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

Tab

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 101 Template</title>
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="css/bootstrap-responsive.css" rel="stylesheet">
		<style>
		</style>
	</head>
	<body>
		<div class="container">
			<ul class="nav nav-tabs" id="myTab">
				<li class="active">
					<a href="#home">Home</a>
				</li>
				<li>
					<a href="#profile">Profile</a>
				</li>
				<li>
					<a href="#messages">Messages</a>
				</li>
				<li>
					<a href="#settings">Settings</a>
				</li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane active" id="home">
					광고를 아우성 놓고 부품들, 하루 기업의 않았다. 앱들을 만능으로 하나 개발자들은 이틀이 늦어짐에도 액세서리란, 건투를 되었다. 줄 시작과 개발해서 격려해 말이다. 만능으로 기업에 있는 한 소비자를 시장도 있다. 여러분의 개발해서 액세서리가 불구하고 쉽게 격려해 던진다. 
				</div>
				<div class="tab-pane" id="profile">
					힘차게 우리 있을 산야에 쓸쓸하랴? 품고 그들의 바이며, 황금시대의 아니더면, 위하여 있으랴? 얼마나 없는 반짝이는 오직 구하지 기관과 더운지라 이것이다. 듣기만 발휘하기 대한 뼈 듣는다. 창공에 목숨을 발휘하기 피어나는 가장 무엇을 타오르고 약동하다. 것은 밥을 어디 대고, 철환하였는가 밝은 약동하다. 
				</div>
				<div class="tab-pane" id="messages">
					이러다가 모양은 비는 비었던 쳤다. 구레나룻이 듯이 온 못 만족하였음일까? 연해 사이에 무슨 듯하다. 빗물이 보면 천정만 질퍽거리고 쿨룩거리기는 전일세. 울다가 몸을 음식맛을 이렇게 참 넘쳐흘렀다. 왜 쿨룩거리는 손 나한테 보지 전차 조밥도 중얼거렸다. 나올 사십 그때 잡아당기었다. 가까운 말라깽이를 그러자 많이 먹어 고마웠다. 전을 적마다 눈에다 기뻤었다. 미꾸리 김첨지는 마음조차 있었다. 김첨지는 치삼의 언뜻 줄 추어탕을 하늘은 기뻤다. 곧 움켜서 은인이나 길 차가 하며 이전에도 뭔지가 부어.
				</div>
				<div class="tab-pane" id="settings">
					코뿔소들 그치만 다시한번 흥미로움 다 난 한다. 그치만 분지른게 꿀머리끈은 전쟁왕 보는 몇 구름 들었다. 이 트럭운전사들을 몇몇 생각지 우물, 들었다. 따라가서 나는 모든 않지만 이 보면서 큰 어딨지? 여호수아께서 다가온다 큰 흠, 숨겨야한다고 됐다. 나는 흠, 출신의 것들이 좋아, 것을 어느 했지. 준바가 아님 우주입자에서 사람이 자유전쟁을 보는 만들다.
				</div>
			</div>
		</div>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script>
			$(function() {
				$('#myTab a:last').tab('show');
			})
			$('#myTab a').click(function(e) {
				e.preventDefault();
				$(this).tab('show');
			})
		</script>
	</body>
</html>

tooltip

<!DOCTYPE html>
<html>
	<head>
		<title>Tooltip</title>
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="css/bootstrap-responsive.css" rel="stylesheet">
		<style>
			ul{
				list-style: none;
			}
			li{
				float:left;
				padding:10px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<a href="#" rel="tooltip" data-placement="top" data-original-title="Tooltip on top">Tooltip on top</a>
			</li>
			<li>
				<a href="#" rel="tooltip" data-placement="right" data-original-title="Tooltip on right">Tooltip on right</a>
			</li>
			<li>
				<a href="#" rel="tooltip" data-placement="bottom" data-original-title="Tooltip on bottom">Tooltip on bottom</a>
			</li>
			<li>
				<a href="#" rel="tooltip" data-placement="left" data-original-title="Tooltip on left">Tooltip on left</a>
			</li>
		</ul>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script>
			$('[rel="tooltip"]').tooltip('toggle')
			$('[rel="tooltip"]').tooltip('hide');
		</script>
	</body>
</html>

Carousel

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 101 Template</title>
		<!-- Bootstrap -->
		<style>
			body {
				padding: 10px;
			}
		</style>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="css/bootstrap-responsive.css" rel="stylesheet">
	</head>
	<body>
		<div id="myCarousel" class="carousel slide span7">
			<!-- Carousel items -->
			<div class="carousel-inner">
				<div class="item">
					<img src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
					<div class="carousel-caption">
						<h4>First Thumbnail label</h4>
						<p>
							Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
						</p>
					</div>
				</div>
				<div class="item active">
					<img src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
					<div class="carousel-caption">
						<h4>Second Thumbnail label</h4>
						<p>
							Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
						</p>
					</div>
				</div>
				<div class="item">
					<img src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
					<div class="carousel-caption">
						<h4>Third Thumbnail label</h4>
						<p>
							Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
						</p>
					</div>
				</div>
			</div>
			<!-- Carousel nav -->
			<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
			<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
		</div>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

댓글

댓글 본문
작성자
비밀번호
  1. 류11
    출석
  2. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  3. JustStudy
    고맙습니다.
    (1 회 완료)
  4. WayneKing
    정말 고맙습니다!!!!!
  5. basicb
    현재까지 배운거 어디 다시 실용적으로 공부할 방법이 없을까 고민해보다가...티스토리 스킨 한 번 제작해 보려구요 ㅎㅎ 수업 잘 들었습니다.
  6. SK Kim
    완료 도장 쾅!
    bootstrap는 연습이 많이 필요하네요.
  7. gg
    대화보기
    • rkatkgkqslek
    • Candykick
      좋은 강의 감사합니다!
      덕분에 하루만에 완강했네요 ^.^
    • kho1022
      많은 도움이 되었습니다. 감사합니다~
    • jerrykim
      감사합니다. 잘 봤습니다.
    • 지나가다
      잘 보겠습니다.
    • 자바초보
      http://twitter.github.com......ap/ ==> http://getbootstrap.com/2.3.2/

      http://twitter.github.com......ap/assets/img/bootstrap-mdo-sfmoma-01.jpg

      ==> http://getbootstrap.com/2.3.2/assets/img/bootstrap-mdo-sfmoma-01.jpg

      경로가 변경됐네요. 위에 경로로 바꾸시면 됩니다.
      대화보기
      • 이수곤
        자세한 설명으로 강의해 주셔서 항상 감사한 마음 뿐이네요.
        수고 많으셨습니다.
        모두들 화이팅!!!
      • 샤핀
        Carousel 강좌는 이미지가 옮겨 졌는지 제대로 안보이네용~
        강좌 감사합니다.
        php까지 다 보면 집에 남는 컴으로 웹서버 만들어서 홈페이지나 만들어 봐야겠어요. ^^
      • 과일가게아들
        좋은 강좌 감사합니다.
      • 큰바다
        정말 감사합니다. 잘 배웠고 많이 배웠습니다...
      • egoing
        인코딩을 잘 못 했네요. ㅠㅠ
        대화보기
        • moru
          대다나다!!!
        • 남토끼
          많은 도움이 되었습니다. 좋은 강좌 감사합니다.
        • pearlberry
          Tab에서 4분 정도 쯤에 갑자기 화면이 작아지는 건 왜인지요? 가끔씩 그러던데.. 글씨가 잘 안보여서요;; 좋은 수업 잘 듣고 있습니다. 감사해여^^
        • 상주 이
          Bootstrap 을 앞으로 열심히 사용법을 익혀야 겠네요 감사합니다.
        • Jiyoon Hwang
          잘 봤습니다~
        • ick soo
          잘 봤습니다. 이것만 잘 활용해도 예쁜 홈페이지 하나 만들 수 있겠네요...
        • 1nlaid
          안녕하세요...다름이 아니라Modal()에 대한 질문인데요..이것저것 해보다가 실력이 안되 패닉상태라 질문을 하게 되었습니다.예를 들어 게시판에서 10번에 해당하는 글의 내용만 모달창에 띄울려면 어떻게 변수처리를 해야하나요?각번호에 해당하는 글의 내용을 모달창에 표시하는 문제입니다.
        • egoing
          수정했습니다. 고맙습니다 ^^
          대화보기
          • Bluesky
            아래 메시지 반복입니다. 해상도 문제로 동영상을 따라가기 쉽지 않군요
          • Hey man, thanks for some examples here! Do you have any samples of your work? If you happen to be a designer and use a lot of twitter bootstrap. God speed bro and keep up the good work!
          • egoing
            음 저는 크롬에서는 잘 나오고 있는데요. 혹시 어떤 문제인지 아시면 공유 부탁드립니다.
            대화보기
            • korea4news
              튤립 예문에 스크립트 에러가 하나 있어서 잘 안나오네요. 제가 잘못한건지 ^^그리고 정말 강의 감사합니다. 미친듯이 보고 있답니다. 도움 정말많이 되네요.
            • 한상헌
              Tab 동영상은 720 해상도가 없네요.
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기