ウェブ学のすすめ

Study of Web Design & Programing

JavaScript for Twitter Bootstrapの使い方

CSS


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">タブ２のコンテンツ</div>
<div id="tab3" class="tab-pane">タブ３のコンテンツ</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="#">メニュー１ <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="#">メニュー２ <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="#">メニュー３ <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">メニュー２</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">メニュー３</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>キャプション１</h4>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
</div>
</div>
<div class="item">
<img src="" alt="" class="img2">
<div class="carousel-caption">
<h4>キャプション２</h4>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
</div>
</div>
<div class="item">
<img src="" alt="" class="img3">
<div class="carousel-caption">
<h4>キャプション３</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();
});