Bootstrap 简介
目标
Bootstrapは最も人気のあるフロントエンドフレームワークであり、現在はその3番目のバージョン（v3.0.0）がリリースされています。このチュートリアルでは、Bootstrap 3の学習を始めます。
また、カスタマイズして他とは異なるフレームワークの特徴を活かす方法についても説明します。たとえば、グリッドを使ったレイアウトの作成、navを使ったナビゲーションの作成、carousalを使ったドロップダウンボックスの作成、ソーシャルプラグインやGoogle Mapなどのサードパーティプラグインの追加などです。
Bootstrapとは何か
Bootstrapは、WebアプリケーションやWebサイトを迅速に開発するためのフロントエンドフレームワークです。
現代のWeb開発では、ほぼすべてのWebプロジェクトで必要とされるいくつかのコンポーネントがあります。
Bootstrap は、これらすべての基本的なモジュール - Grid、Typography、Tables、Forms、Buttons、Responsiveness を提供します。
その他にも、Dropdowns、Navigation、Modals、Typehead、Pagination、Carousal、Breadcrumb、Tab、Thumbnails、Headers など、有用なフロントエンドコンポーネントが多数あります。
これがあれば、Webプロジェクトを構築し、それをより速く、より簡単に実行することができます。
さらに、フレームワーク全体がモジュールベースであるため、独自のCSS片や、プロジェクト開始後の大規模な見直しなどを通じてカスタマイズすることができます。
これはいくつかのベストプラクティスに基づいています。HTMLとJavaScript/jQueryの基礎知識を習得すれば、この知識をWeb開発に活用できるため、モダンなWeb開発を学び始める良い機会だと考えています。
Bootstrapで構築されたプロジェクトはすべて同じように見えるとか、HTML+CSSの知識をあまり知らなくてもWebサイトを構築できるといった批判もあります。しかし、理解しておく必要があるのは、Bootstrapは汎用的なフレームワークであり、他のあらゆる汎用的なものと同様に、独自性を持たせるにはカスタマイズが必要だということです。カスタマイズするには深く掘り下げる必要があり、しっかりとしたHTML+CSSの基礎がなければ不可能です。
もちろん、Bootstrap以外にも多くの優れたフロントエンドフレームワークがあります。どのフレームワークを使用するかは開発者の選択ですが、Bootstrapは間違いなく試す価値があります。
なぜプロジェクト内で使用 Bootstrap？
ファイル構造をダウンロードして理解する
こちらからhttps://github.com/twbs/bootstrap/archive/v3.0.0.zip 或 https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist.zipBootstrap Version 3.0.0をダウンロードします。ここでは最初のものを使用しますが、2番目のものを使用しても構いません。
さらに、ダウンロード用に提供しているコードには、最初のリンクからダウンロードしたbootstrapコードフォルダが含まれています。その中には、BootstrapをカスタマイズするためのオリジナルCSSのcustom.cssも含まれています。
解凍すると、ルートフォルダbootstrap-3.0.0の中にいくつかのファイルとフォルダがあることがわかります。
主要なCSSファイル - bootstrap.css およびその簡易版 bootstrap-min.css は、ルートフォルダ bootstrap-3.0.0 の 'dist' フォルダ内の 'css' フォルダにあります。
'dist' 内には 'js' フォルダがあり、主要なJavaScriptファイル bootstrap.js とその簡易版が含まれています。
ルートフォルダ内には、独立した'js'フォルダがあり、さまざまなJavaScriptプラグインが別々のファイルに分かれて格納されています。
ルートフォルダ内の'assets'フォルダには、別の'js'フォルダがあります。ここには、IE8サポートを実現するためのHTML5シムであるhtml5shiv.jsが置かれています。また、IE8でメディアクエリをサポートするためのrespond.min.jsファイルもあります。このフォルダには、BootstrapのJSプラグインが依存するjquery.jsも含まれています。
同じフォルダ内には、'ico'フォルダがあり、ファビコンアイコンやさまざまなモバイルデバイス用アイコンが含まれています。
同じパスにある'css'フォルダには、ドキュメントのCSSファイルが含まれています。
'_includes'フォルダと'_layouts'フォルダには、いくつかのデフォルトのレイアウト構造ファイルが含まれており、これらはクイックプロトタイピングに役立つかもしれません。
ルートフォルダ内の'less'フォルダには、いくつかの.lessファイルが含まれています。LESSベースで開発する場合、これらのファイルが役立ちます。
ルートフォルダ内には、いくつかのファイルがあります。一部は基本的なプロトタイピング用のHTMLファイルで、一部はBowerベースのコンパイル用のbower.json、browserstack.jsonです。その他に、composer.jsonとYAMLファイルの_config.ymlもあります。
指定のリンクからダウンロードする方法に加えて、以下のコマンドを使用してすべてのCSS、JSファイルをコンパイルすることもできます。
$ bower install bootstrap
BootstrapのGitリポジトリをコピーできます
git clone git://github.com/twbs/bootstrap.git
このチュートリアルでは、Zipファイルをダウンロードするだけで、それを使用することはありません。
このチュートリアルを学習したら、bowerを使ってフレームワークをインストールし、それがどのように動作するかを理解することをお勧めします。
NetDNAは、コンパイル済みおよび縮小化されたBootstrap CSS、JS、およびその他のテーマCSSをサポートしています。以下のステートメントでそれらを参照できます
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Bootstrap v3.0.0を使用した開発
基本的なHTML
以下は、私たちのプロジェクトで使用する基本的なHTML構造です。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap V3 template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap-3.0.0/dist/css/bootstrap.min.css.html" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="bootstrap-3.0.0/assets/js/html5shiv.js.html"></script>
<script src="bootstrap-3.0.0/assets/js/respond.min.js.html"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.0.0/dist/js/bootstrap.min.js.html"></script>
</body>
</html>
テンプレートに追加されたhtml5shiv.jsとrespond.min.jsはIE8サポートを取得するために使用されます。Bootstrapバージョン3では、これらのファイルが追加されています。
Webサーバーのルートフォルダ内のtwitter-bootstrapフォルダに、bootstrap-3.0.0フォルダを配置しています。作成するすべてのHTMLファイルはtwitter-bootstrap内に配置します。こう説明するのは、開発プロセスを簡素化するためです。
定制
私たちは他とは違うCSSボックススタイルのカスタマイズ。したがって、元のCSSファイル（bootstrap-3.0.0のdistフォルダ内にあります）を壊さないように、同じフォルダ内に custom.css という独立したCSSファイルを作成します。次に、HTMLファイル内で、元のCSSファイルの直後にこのCSSファイルを参照します。これにより、変更したいデフォルトのスタイルを上書きできます。また、Bootstrapがアップグレードされた場合でも、元のCSSファイルはカスタマイズを壊すことなく更新されます。開発中もこの方法に従うことをお勧めします。
创建导航
ナビゲーションを作成するには、HTMLファイルのbody開始タグの直後に、次のコードを追加してください。
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li><a href="new.html" class="navbar-brand">
<img src="logo.png.html"></a></li>
<li class="active"><a href="../index.html">Home</a></li>
<li><a href="price.html">Price</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="../index.html" class="dropdown-toggle" data-toggle="dropdown">Social<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="socials"><g:plusone annotation="inline" width="150"></g:plusone></li>
<li class="socials"><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div></li>
<li class="socials"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
</ul>
</li>
</ul>
</nav>
ナビゲーションについて、Bootstrapはコンテナレベルで'navbar'クラスを使用します。したがって、ナビゲーション全体を保持するnav要素に割り当てられます。
ナビゲーションバーのデフォルトの色を変更するために 'navbar-inverse' クラスを使用しました。以前のデフォルトの明るい色の代わりに濃い色を使用しています。'navbar-fixed-top' クラスは、HTMLページを下にスクロールしたときにナビゲーションバーが上部に固定されることを保証します。
Bootstrap V3.0.0 では、ナビゲーションを作成する際に role="navigation" を使用することが新しく追加されました。。Bootstrapはこのように使用することを推奨しています。ナビゲーションバーが易于访问。
この時点で、custom.css ファイル内で body に 'padding-top: 80px;' を追加しました。body に上部のパディングとして追加するピクセル数は異なる場合がありますが、そうしない限り、ナビゲーションバーの後に続くコンテンツの上部が隠れてしまいます。
コンテナのnav内には、クラスが'nav'と'navbar-nav'の順序なしリストがあります。この順序なしリスト内の各リスト項目には、ナビゲーション内のリンクが含まれています。
'navbar-brand'クラスはブランド名を表示するために使用されます。ここでは画像を使用しています。画像の高さがナビゲーションバーのベースラインの高さよりも大きいため、ここでいくつかカスタマイズを行います。'.navbar-nav>li>a'の'line-height'プロパティをデフォルトの20pxから50pxに増やし、フォントサイズを16pxに変更します。
一番右のリンクには、ドロップダウンボックスを追加しました。関連する li に追加された 'dropdown' クラスについて、その直後に 'dropdown-toggle' と 'caret' の2つのクラスを持つアンカーを追加します。このアンカーには実際にプロジェクト内のアンカーテキスト social が含まれています。この li には順序なしリストが含まれており、リスト内の各リスト項目にはドロップダウンボックスに表示されるリンクが含まれています。
ドロップダウンボックスにはソーシャルプラグインを追加しました。最初のliにはGoogle Plusのマークアップが含まれ、2番目のliにはFacebookのマークアップが含まれ、3番目のliにはTwitterボタンを表示するマークアップといくつかのJSスクリプトが含まれています。
さらに、Facebookボタンを機能させるには、bodyの開始タグの後に次のマークアップとスクリプトを追加する必要があります。
<div id="fb-root"></div>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Twitterボタンを機能させるために、bodyの終了タグの前に次のスクリプトを追加します。
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
以下のスタイルを使用して、'socials'クラスのソーシャルボタンにいくつかの追加スタイルを適用します。
.socials {
padding: 10px;
}
これでナビゲーションが完成しました。
Carousalを使用したスライドショーの作成
プロジェクトのホームページのナビゲーションバーの下にスライドショーを作成するために、以下のマークアップを使用します。
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="computer.jpg.html" alt="...">
<div class="carousel-caption">
<h1>Large Desktops are everywhere</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
<div class="item">
<img src="mobile.jpg.html" alt="...">
<div class="carousel-caption">
<h1>Mobiles are outnumbering desktops</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
<div class="item">
<img src="cloud1.jpg.html" alt="...">
<div class="carousel-caption">
<h1>Enterprises are adopting Cloud computing fast</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="../index.html" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="../index.html" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
Carousalには4つのセクションがあります。メインコンテナは'carousel slide'クラスを持つdivタグで定義されます。
次に、'carousel-indicators'クラスを持つ順序付きリストがあります。ol内の各リスト項目は1つのスライドを表します。ページが読み込まれると、デフォルトで読み込まれるスライドに'active'クラスが付きます。レンダリング時には、タイトルの下にある小さな丸として表示されます。
次に、各スライド（画像）は'item'クラスを持つdivタグ内に配置されます。各アイテムは'carousel-caption'クラスを持つdiv内にネストされます。carousel-captionには、画像と一緒にキャプションとして表示されるマークアップが含まれます。段落にはh1とボタンが含まれており、独自のマークアップを含めることもできます。
最後の部分は、次のスライド/前のスライドを制御するためのものです。前のスライドは 'left' と 'carousel-control' クラスを使用して定義し、次のスライドは 'right' と 'carousel-control' クラスを使用して定義します。
'icon-prev'クラスと'icon-next'クラスは、次へおよび前へのアイコンに使用されます。
私たちはすでにデフォルトのカルーセルにいくつかカスタマイズを加えました。。ただし、キャプション、インジケーター、次へ/前へアイコンがデフォルト位置より数ピクセル上にレンダリングされるようにしたいと考えています。
これを実現するために、custom.cssファイルに次のスタイルを追加しました。
.carousel-inner .item .carousel-caption {
position:absolute;
top: 200px
}
.carousel-indicators {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom:0;
}
.navbar-nav>li>a {
line-height: 50px;
font-size: 16px
}
また、h1 をカスタマイズして、30ピクセルの下部マージンを追加しました。
h1 {
margin-bottom: 30px
}
响应图像
スライド内の各画像に'img-responsive'クラスを使用していることにお気づきかもしれません。これはBootstrap v3.0.0の新機能です。img タグで 'img-responsive' クラスを使用することにより、Bootstrap は画像をレスポンシブにします。。
创建网格
スライドの下では、グリッドを使用してコンテンツを配置します。'container'クラスを持つdivからグリッドを開始します。ここでは、以前のバージョンのBootstrapとは異なり、レスポンシブなWebサイトを開発する予定であることに注意してください。ここでは、コンテナは単一のクラスを持ち、デフォルトでレスポンシブです。
コンテナのdivには、'row'クラスを持ついくつかのdiv（1行目に3つ、2行目に6つ）がネストされており、Bootstrapグリッドの行を作成します。
各行には、'col-x-y'クラスを持つdivがあり、列を作成します。xの値は、モバイルデバイス用のxs、タブレット用のsm、ノートパソコンおよび小型デスクトップ画面用のmd、大型デスクトップ画面用のlgです。これが最初の方法です。yの値には任意の正の整数を使用できますが、グリッド内の列の合計が12を超えてはなりません。このプロジェクトでは、簡単にするためにlgを使用しましたが、このようにしているので、スマートフォンやタブレットでプロジェクトサイトを表示して比較してもよいでしょう。
後のチュートリアルでは、Bootstrap グリッドシステムの完全なチュートリアルを用意し、その魅力的なレスポンシブ特性を探ります。
この例では、最初の行の3つの列の幅を等しくしたいので、すべての列に 'col-lg-4' を使用します。2番目の行では、6つの列の幅を等しくしたいので、すべての列に 'col-lg-2' を使用します。
以下は、2つの行を含むグリッドのマークアップです。1行目には3列、2行目には6列あります。
<div class="row barone"> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/php.png"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/mysql-logo.jpg"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/javascript-logo.png"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/java.jpg"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/postgresql.png"></p> </div> </div>
hrと、次のマークアップを含むフッターでグリッドを終了します。
<hr> <p>Copyright@2013-14 by ToDo App.</p>
使用表
プロジェクトのprice.htmlページでは、テーブルを使用して価格表を表示しています。マークアップは次のとおりです。
<table class="table table-bordered">
<thead>
<tr>
<th>Features</th>
<th>Individual</th>
<th>Small Team</th>
<th>Medium Team</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td><h3>No. Of users</h3></td>
<td><span class="badge">One</span></td>
<td><span class="badge">Five</span></td>
<td><span class="badge">Fifteen</span></td>
<td><span class="badge">Unlimited</span></td>
</tr>
<tr>
<td><h3>Pro training</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Forum Support</h3></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>In person support</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Weekly webinars</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Price</h3></td>
<td><button type="button" class="btn btn-warning btn-lg">$9/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$19/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$49/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$99/Month</button></td>
</tr>
<tr>
<td></td>
<td><button type="button" class="btn btn-success btn-lg">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
</tr>
</tbody>
</table>
Bootstrapの元のCSSファイルにある'table'および'table-bordered'の2つのクラスを使用します。ただし、customize.cssファイルに以下のCSSを追加しています。テーブルを別の外観にするために、いくつかカスタマイズを行います。
th {
background-color: #428BCA;
color: #EC8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}
使用徽章
'badge'クラスを使用して、テーブル内にいくつかのテキストを表示します。次のCSSを適用したカスタムのbadgeクラスを用意しています。
.badge {
background-color: #428BCA;
color: #fff;
font-size: 22px;
}
このページとcontact.htmlページのために、customize.cssに別のCSSルールを追加しました。
.container > h1 {
text-align: center;
}
これにより、h1が中央揃えになります。
使用表单
contact.html ファイルでは、3つの列を作成し、最初の列にはフォームを埋め込みます。フォームはデフォルトのスタイルを使用します。
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="country" class="col-lg-2 control-label">Country</label>
<div class="col-lg-10">
<select>
<option>USA</option>
<option>India</option>
<option>UK</option>
<option>Autralia</option>
</select>
</div>
</div>
<div class="form-group">
<label for="desc" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea rows="5" cols="50"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
'form-horizontal'クラスにより、フォームが水平方向に整列します。アクセシビリティのために、role="form" を追加してください。これはバージョン 3.0.0 の新機能です。
各フォームコントロールを配置するために、Bootstrap 3.0.0 では新しい 'form-group' クラスを使用しています。
このページでは、グリッドの2番目の列に、単にいくつかのテキストを配置しました。
Googleマップを追加する
contact.html ページでは、グリッドの3番目の列に Google マップを追加しました。これを実現するために、以下のマークアップを使用しました。
<div id="map_canvas"></div> </div>
以下の JS を HTML ファイルのヘッダー内に追加します。
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(23.244066, 87.861276),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
前述の JS の前に、以下のスクリプトタグを追加する必要があります。
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
マップを正しく表示するには、custom.css に以下のスタイルを追加する必要があります。
#map_canvas {
width: 400px;
height: 400px;
}
これが、Bootstrap V3.0.0 に基づくシンプルなプロジェクトを作成する方法です。しかし、これはほんの表面に触れたにすぎず、後の章でより詳しく説明します。
其他扩展