感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

Bootstrap便利そうなので、使ってみながら順番に画像を載せていく。

スポンサーリンク

Bootstrapがけっこう便利そうなので、とりあえず、何もしてないHTMLにBootstrapで味付けしていってみます。

アプリのダウンロードサイトを作っていくイメージです。

まずは、Bootstrapの機能を使っていないHTMLを書いてみます。

<!DOCTYPE html>
<html>
<head>
<title>BootStrap Example</title>
<meta name="viewport" content="width-device-width, initial-scale=1.0" >
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" >
</head>
<body>
<div>
<header>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Profile</a></li>
</ul>
<h3>Twitter</h3>
</header>

<div>
<h1>Tweet Messageing Tool</h1>
<p>Twitter Bootstrap is excellent front page programming tool!</p>
<p><a href="#"></a></p>

</div>
<p>&copy;2014 Tetsuji Kuwano</p>
</body>
</html>

これをブラウザで見ると、こんな風に表示されます。

f:id:sho322:20140519223717j:plain

まだ、なんにも装飾されてないね。


次からが、Bootstrapっぽくしていきます。
まず、

<div class="container">

という、divタグで、メインのコンテンツを囲みます。

以下のようにします。

<div class="container">
<header>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Profile</a></li>
</ul>
<h3>Twitter</h3>
</header>

~省略~
</div>

次に、headerタグにclass="page-header"という属性を追加します。

<header class="page-header">

この時点で、HTMLは以下のようになります。

<!DOCTYPE html>
<html>
<head>
<title>BootStrap Example</title>
<meta name="viewport" content="width-device-width, initial-scale=1.0" >
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" >
</head>
<body>
<div class="container">
<header class="page-header">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Profile</a></li>
</ul>
<h3>Twitter</h3>
</header>

<div>
<h1>Tweet Messageing Tool</h1>
<p>Twitter Bootstrap is excellent front page programming tool!</p>
<p><a href="#"></a></p>
</div>

<div>
<p>&copy;2014 Tetsuji Kuwano</p>
</div>

</div>
</body>
</html>

ブラウザには以下のように表示されます。

f:id:sho322:20140519224002j:plain
まだあんまり違いがわからないね。


次に、ナビゲーションメニューを作っていきましょう。

<ul class="nav">

のように、ulタグにclass="nav"を追加します。

Bootstrapでは、このnavの他にclass="nav nav-tabs"みたいに追記することで、色んなタイプのナビゲーションを作っていくことができるのですが、
今回はナビゲーションを横に並べて見せるようにしてみましょう。

こんな感じに書きます。

<header class="page-header">
<ul class="nav nav-tabs">
<li><a href="#">Home</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Profile</a></li>
</ul>
<h3>Twitter</h3>
</header>

そうすると、以下のように表示されます。

f:id:sho322:20140519224048j:plain

ちなみに、nav-tabsの代わりにnav-pillsにしても似たように横並びに表示ができます。
http://getbootstrap.com/components/

上の画像だとナビゲーションの位置が中途半端なので、右側に移動させます。

<ul class="nav nav-pills pull-right">

そして、ボタンを押すタイプのリンクを作ります。

<p><a class="btn btn-success btn-lg" href="#">私達のアプリをダウンロードする</a></p>

btn-successというのはボタンの色です。
btn-lgはボタンのサイズですね。

ボタンのデザインについては、以下のURL先を見れば色々と載っています。
http://getbootstrap.com/2.3.2/base-css.html

<!DOCTYPE html>
<html>
<head>
<title>BootStrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0" >
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" >
</head>
<body>
<div class="container">
<header class="page-header">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Profile</a></li>
</ul>
<h3>Twitter</h3>
</header>

<div class="jumbotron">
<h1>これは私の最強のアプリです。</h1>
<p>Twitter Bootstrap is excellent front page programming tool!</p>
<p>
<a class="btn btn-success btn-lg" href="#">私達のアプリをダウンロードする</a>
<a class="btn btn-primary btn-lg" href="#">もっと別のアプリがほしい</a>
</p>

</div>

<div>
<p>&copy;2014 Yamashita Ryosaku</p>
</div>

</div>
</body>
</html>

これを表示すると、以下のようになります。たったこれだけで、ちょっとしたサイトっぽくなってきました。

f:id:sho322:20140519224107j:plain


次の記事ではグリッドシステムを見てみます。

<参考>

Getting Started with Bootstrap 3

Getting Started with Bootstrap 3