bootstrapでフォームのスタイリングをする
前回に引き続き、bootstrapについてです。
今回はフォームやボタンなどbootstrapを使ったスタイリングについて書いていきます。
フォームを作る
フォームのパーツはclass=”form-group”で囲むと自動的に最適な間隔で表示されます。
また、input、select、textareaはclass=”form-control”を指定するとBootstrapのスタイルが適用されます。
<div class="container">
<form>
<div class="form-group">
<label>e-mail</label>
<input type="e-mail" class="form-control" placeholder="e-mail">
</div>
<button type="submit" class="btn btn-default">送信</button>
</form>
</div>
フォームの並び
フォームを横並びにするか縦並びにするかは
class=”form-inline”とclass=”form-horizontal”で指定することが出来ます。
横並びにしたいときはclass=”form-inline”
縦並びにしたいときはclass=”form-horizontal”
になります。
<div class="container">
<!--横並びで表示-->
<form class="form-inline">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="name">
</div>
<div class="form-group">
<label>e-mail</label>
<input type="e-mail" class="form-control" placeholder="e-mail">
</div>
<div class="form-group">
<label>tel</label>
<input type="tel" class="form-control" placeholder="tel">
</div>
<button type="submit" class="btn btn-default">送信</button>
</form>
<!--縦並びで表示-->
<form class="form-horizontal">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="name">
</div>
<div class="form-group">
<label>e-mail</label>
<input type="e-mail" class="form-control" placeholder="e-mail">
</div>
<div class="form-group">
<label>tel</label>
<input type="tel" class="form-control" placeholder="tel">
</div>
<button type="submit" class="btn btn-default">送信</button>
</form>
</div>
フォームのパーツの大きさを変える
フォームの大きさは自動で設定してくれるので、便利です。
ただ、もっと大きくして目立たせたいとかもっと小さくしてスタイリッシュにしたいっていうとき用のクラスも用意されています。
大きくしたいときはclass=”input-lg”
小さくしたいときはclass=”input-sm”
でサイズを変えることが出来ます。
ボタンを作る
button要素やa要素にclass=”btn”をつけるだけで簡単にボタンのスタイリングができます。
以下のクラスを指定することでボタンの色をかえることもできます。
<!-- 青色のボタン --> <button type="button" class="btn btn-primary">青色のボタン</button> <!-- 緑色のボタン --> <button type="button" class="btn btn-success">緑色のボタン</button> <!-- 水色色のボタン --> <button type="button" class="btn btn-info">水色色のボタン</button> <!-- オレンジ色のボタン --> <button type="button" class="btn btn-warning">オレンジ色のボタン</button> <!-- 赤色のボタン --> <button type="button" class="btn btn-danger">赤色のボタン</button>
ボタンの大きさを変える
ボタンの大きさも変えることができます。
大きくしたいときはclass=”btn-lg”
小さくしたいときはclass=”btn-sm”
もっと小さくしたいときはclass=”btn-xs”
また、ボタンをカラム幅いっぱいにしたいときはclass=”btn-block”を指定します。
ドロップダウンリストを作る
ナビゲーションメニューを作る時にドロップダウン機能を使いたい時があります。
そのドロップダウンリストもbootstrapのクラスを指定することで簡単に実装が可能になります。
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
ドロップダウンのボタン <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">ドロップダウンのリスト</a></li>
<li><a href="#">ドロップダウンのリスト</a></li>
<li><a href="#">ドロップダウンのリスト</a></li>
<li><a href="#">ドロップダウンのリスト</a></li>
</ul>
</div>
(1)ドロップダウン全体をclass=”btn-group”で囲みます。
(2)ドロップダウンのボタンにclass=”dropdown-toggle” data-toggle=”dropdown”を指定します。
(3)ドロップダウンのリストにclass=”dropdown-menu”を指定します。
この3つのポイントだけ抑えればドロップダウンリストが作れます。
もしボタンに▼をつけたいときはspan要素にclass=”caret”を指定します。
パンくずリストを作る
ul要素にclass=”beadcrumb”を指定することでパンくずリストを作ることができます。
今いるページはli要素にclass=”active”を指定します。
<ul class="beadcrumb"> <li><a href="">home</a></li> <li><a href="">html</a></li> <li class="active">bootstrap</li> </ul>
ページネイションを作る
ul要素にclass=”pagination”を指定することでページネイションを作ることができます。
今いるページはli要素にclass=”active”を指定します。
1ページ目もしくは最後のページにいる場合に矢印ボタンを押せなくするにはclass=”disable”を指定します。
<ul class="pagination"> <li class="disable"><a href="">«</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="">»</a></li> </ul>
ページャを作る
ul要素にclass=”pager”を、li要素にclass=”previous”もしくはclass=”next”を指定することでページャを作ることができます。
<ul class="pager"> <li class="previous"><a href="">前へ</a></li> <li class="next"><a href="">次へ</a></li> </ul>
今回は以上です。
次回もbootstrapについてまとめていきます！
