선행지식
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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
