読者です 読者をやめる 読者になる 読者になる

ウェブ学のすすめ

Study of Web Design & Programing

JavaScript for Twitter Bootstrapの使い方


http://twitter.github.com/bootstrap/javascript.html
Twitter Bootstrapを使って新しいサイトを制作しようと思い、今回は動きの部分のデモを作ってみました。

Twitter Bootstrapを使えばjavascriptを多く書かなくても多彩な動きを表現することができます。

プレビュー


↓別ウィンドウを開いて見る
Twitter Bootstrap jQuery プラグイン - js do it

QRコード

※おすすめQRコード読み取りアプリ

最速QR
カテゴリ: ユーティリティ
サイズ: 1.5 MB
価格: 無料

コード

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="#">Twitter Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">ホーム</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div><!--/.navbar-inner -->
</div><!--/.navbar -->
<div class="container-fluid">
<div class="row">
<div class="span4">
<h2>タブメニュー</h2>
<div class="tabbale">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">タブ1</a></li>
<li><a href="#tab2" data-toggle="tab">タブ2</a></li>
<li><a href="#tab3" data-toggle="tab">タブ3</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">タブ1のコンテンツ</div>
<div id="tab2" class="tab-pane">タブ2のコンテンツ</div>
<div id="tab3" class="tab-pane">タブ3のコンテンツ</div>
</div>
</div>
</div><!--/span-->    
<div class="span4">
<h2>モーダル</h2>
<div id="myModal" class="modal hide">
<div class="modal-header">
<a class="close" data-dismiss="modal" >&times;</a>
<h3>見出し</h3>
</div>
<div class="modal-body">
<p>テキスト</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary">変更を保存する</a>
<a href="#" class="btn" data-dismiss="modal" >閉じる</a>
</div>
</div>
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">デモボタン</a>
</div><!--/span-->    
<div class="span4">
<h2>ドロップダウンメニュー</h2>
<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">メニュー1 <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu">
<li><a href="#">アクション</a></li>
<li><a href="#">次のアクション</a></li>
<li><a href="#">その他のアクション</a></li>
<li class="divider"></li>
<li><a href="#">区切りリンク</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">メニュー2 <b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu">
<li><a href="#">アクション</a></li>
<li><a href="#">次のアクション</a></li>
<li><a href="#">その他のアクション</a></li>
<li class="divider"></li>
<li><a href="#">区切りリンク</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">メニュー3 <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu">
<li><a href="#">アクション</a></li>
<li><a href="#">次のアクション</a></li>
<li><a href="#">その他のアクション</a></li>
<li class="divider"></li>
<li><a href="#">区切りリンク</a></li>
</ul>
</li>
</ul> <!-- /tabs -->
</div><!--/span-->   
</div>    
<div class="row">
<div class="span4">
<h2>スクロールスパイ</h2>
<div id="navbar">
<ul class="nav nav-pills">
<li><a href="#post1">Post 1</a></li>
<li><a href="#post2">Post 2</a></li>
<li><a href="#post3">Post 3</a></li>
</ul>
</div>  
<div data-spy="scroll" data-target="#navbar" data-offset="0" class="scrollspy-example">
<h4 id="post1">Post 1</h4><p class="box"></p>
<h4 id="post2">Post 2</h4><p class="box"></p>
<h4 id="post3">Post 3</h4><p class="box"></p>
</div>&#8203;
</div><!--/span-->

<div class="span4">
<h2>ツールチップ</h2>
<p><a href="#" rel="tooltip" title="ツールチップの説明">ツールチップ</a></p>
</div>
<div class="span4">
<h2>ポップオーバー</h2>
<p><a href="#" class="btn btn-primary"rel="popover" data-original-title="ポップオーバー" data-content="サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル">ポップオーバー</a></p>        
</div>
</div><!--/row-->
<div class="row">    
<div class="span4">
<h2>アラート</h2>    
<div class="alert fade in">
<a class="close" data-dismiss="alert" href="#">&times;</a>
<strong>警告!</strong>
</div>
<div class="alert alert-block alert-error fade in">
<a class="close" data-dismiss="alert" href="#">&times;</a>
 <h4 class="alert-heading">エラーメッセージ</h4>
 <p>サンプルサンプルサンプルサンプルサンプル</p>
 <p>
<a class="btn btn-danger" href="#">実行する</a> <a class="btn" href="#">キャンセル</a>
</p>
</div>
</div>    
<div class="span4">
<h4>ボタン</h4>
<table class="table table-bordered table-striped">
<tr>
<td>ステートフル</td>
<td><button id="fat-btn" data-loading-text="ローディング中..." class="btn btn-primary">ローディングステート</button>
</td>
</tr>
<tr>
<td>シングルトグル</td>
<td>
<button class="btn btn-primary" data-toggle="button">シングルトグル</button>
</td>
</tr>
<tr>
<td>チェックボックス</td>
<td>
<div class="btn-group" data-toggle="buttons-checkbox">
<button class="btn btn-primary"></button>
<button class="btn btn-primary"></button>
<button class="btn btn-primary"></button>
</div>
</td>
</tr>
<tr>
<td>ラジオ</td>
<td>
<div class="btn-group" data-toggle="buttons-radio">
<button class="btn btn-primary"></button>
<button class="btn btn-primary"></button>
<button class="btn btn-primary"></button>
</div>
</td>
</tr>
</table>
</div>
<div class="span4">
<h2>アコーディオン</h2>        
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">メニュー1</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">メニュー2</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">メニュー3</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</div>
</div>
</div>
</div>   
</div>
</div><!--/row-->
<div class="row">
<div class="span4">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="" alt="" class="img1">
<div class="carousel-caption">
<h4>キャプション1</h4>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
</div>
</div>
<div class="item">
<img src="" alt="" class="img2">
<div class="carousel-caption">
<h4>キャプション2</h4>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
</div>
</div>
<div class="item">
<img src="" alt="" class="img3">
<div class="carousel-caption">
<h4>キャプション3</h4>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
</div>
<div class="span4">
<h2>タイプヘッド</h2>  
<input type="text" data-provide="typeahead" data-items="3" data-source='["css","html","javascript","php","actionscript","perl","java","c","ruby","objective-c"]'>
<p>アルファベットを入力してみてください。</p>
</div>
<div class="span4">
<h2>ドロップダウンボタン</h2>  
<div class="btn-group">
<button class="btn btn-warning">Action</button>
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="span4">
<h2>パンくずリスト</h2>  
    <ul class="breadcrumb">
    <li><a href="#">Home</a> <span class="divider">/</span></li>
    <li><a href="#">Library</a> <span class="divider">/</span></li>
    <li class="active">Data</li>
</ul>
</div>

<div class="span4">
<h2>ページネーション</h2>  
<div class="pagination pagination-centered">
    <ul>
        <li class="disabled"><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
</div>
</div>    
<div class="span4">
<h2>プログレスバー</h2>  
<div class="progress">
    <div class="bar" style="width: 60%;"></div>
</div>
<div class="progress progress-striped">
    <div class="bar" style="width: 20%;"></div>
</div>
<div class="progress progress-striped active">
    <div class="bar" style="width: 40%;"></div>
</div>
</div>    
</div><!--/.fluid-container-->
<div class="container-fluid">
<footer>
<p>&copy; Company 2012</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-affix.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/application.js"></script>
</body>
</html>
CSS
@charset "utf-8"
body {
    padding-top: 60px;
    padding-bottom: 40px;
}
.sidebar-nav {
    padding: 9px 0;
}

.box{
    margin: 20px; 
    padding: 15px;
    background: #eee;
    height: 100px;
}

.scrollspy-example {
    height: 180px;
    overflow: auto;
    position: relative;
}

.span4 {
    background-color:#fff;
    padding:10px;
    margin:10px;
    height:320px;
}

body {
    background-color:#eee;
}

.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}

.img1 { 
     width:100%;
    height:300px;
    background-color:#0055CC;
}
.img2 {
     width:100%;
    height:300px;
    background-color:#4A944A;
}
.img3 { 
     width:100%;
    height:300px;
    background-color:#F89406;
}

/* Large desktop */
@media (min-width: 1200px) {
    body {
        padding-top: 60px;
        padding-bottom: 40px;
    } 
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px)  {
    body {
        padding-top: 0;
    	padding-bottom: 0;
    }
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px)  {
    body {
        padding-top: 0;
    	padding-bottom: 0;
    }
    .carousel-caption {
        position: absolute;
    }
}
JavaScript
$(function(){
    $('a[rel=tooltip]').tooltip({placement:'right'});
    $('a[rel=popover]').popover();
});