Bootstrapとは？
状態:-
閲覧数:12,187
投稿日:2012-01-19
更新日:2014-05-12
CSSのフレームワーク・ライブラリ
・HTMLにクラスを追加して利用する
「Twitter Bootstrap」はフルスタック
・従来のやり方だと、色んな所から、色んなプラグインを持ってこなければいけないので、管理・メンテが大変
・下手すりゃ、競合なんてすることがあるかも
・その点、「Twitter Bootstrap」だと皆が必要と思われる機能が、ある程度、詰まっているので、サイト作成・管理が楽になる
・従来、ここら辺りのコーディングにかけてきた時間を、「記事作成」なり「開発そのもの」に振る分けることができるようになる
・HTMLにクラスを追加して利用する
「Twitter Bootstrap」はフルスタック
・従来のやり方だと、色んな所から、色んなプラグインを持ってこなければいけないので、管理・メンテが大変
・下手すりゃ、競合なんてすることがあるかも
・その点、「Twitter Bootstrap」だと皆が必要と思われる機能が、ある程度、詰まっているので、サイト作成・管理が楽になる
・従来、ここら辺りのコーディングにかけてきた時間を、「記事作成」なり「開発そのもの」に振る分けることができるようになる
Twitter Bootstrapの基礎
1.一般的なタグにもすでにきれいなスタイルがあてられている
・smallタグ、preタグ、li、strongなど
2.ミニラベル
・labelタグという独自タグがあるのではない
・ラベルのように、よく使うクラスが予め準備されているか
3.ボタン
・最初にbtnクラスを指定
・次に「色」「大きさ」「有効か無効か」のクラスを指定
※「seccessは緑色」など、予め設定されている
4.テーブル
・1.3.0の書き方
・1.4.0で、テーブルに縦線を出すにはbordered-tableの追加が必要
※<thead><tbody>を忘れないようにする
5.パンくずナビゲーション
・何か凄い技があるかと期待してたけど、レイアウトに関する設定が予め用意されてるだけ
6.ページナビゲーション
レイアウトクラスが用意されているだけ。
見た目は今風
7.トップバー
画面上部に固定で表示させる、トップナビゲーションバーの作り方
8.もっとトップバー
トップバーに検索ボックスを実装する方法
※class="span3"は長さを表すクラス。別にここじゃなくても、色々な場所で使える
※placeholder="検索">で、フォームに初期表示される値を指定できる
9.ドロップダウンメニュー
・smallタグ、preタグ、li、strongなど
2.ミニラベル
・labelタグという独自タグがあるのではない
・ラベルのように、よく使うクラスが予め準備されているか
<span class="label important">重要！</span> |
3.ボタン
・最初にbtnクラスを指定
・次に「色」「大きさ」「有効か無効か」のクラスを指定
※「seccessは緑色」など、予め設定されている
4.テーブル
・1.3.0の書き方
<table class="zebra-striped"> <thead> <tr><th>1990年</th><th>2000年</th><th>2010年</th></tr> </thead> <tbody> <tr><td>11</td><td>32</td><td>22</td></tr> </tbody></table> |
・1.4.0で、テーブルに縦線を出すにはbordered-tableの追加が必要
<table class="bordered-table zebra-striped"> |
※<thead><tbody>を忘れないようにする
5.パンくずナビゲーション
・何か凄い技があるかと期待してたけど、レイアウトに関する設定が予め用意されてるだけ
6.ページナビゲーション
<div class="pagination"><ul><li class="prev">前に</li><li>1</li><li class="active">2</li><li>3</li><li>...</li><li>24</li><li>25</li><li>26</li><li class="next">次に</li></ul> </div> |
レイアウトクラスが用意されているだけ。
見た目は今風
7.トップバー
画面上部に固定で表示させる、トップナビゲーションバーの作り方
<div class="topbar"> <div class="fill"> <div class="container"> MySite <ul class="nav"> <li class="active">ホーム</li> <li>このサイトについて</li> <li>ヘルプ</li> </ul> </div> </div></div> |
8.もっとトップバー
トップバーに検索ボックスを実装する方法
<div class="topbar"> <div class="fill"> <div class="container"> MySite <ul class="nav"> <li class="active">ホーム</li> <li>このサイトについて</li> <li>ヘルプ</li> </ul> <form action="" class="pull-right"> <input type="text" class="span3" placeholder="検索"> <button class="btn" type="submit">検索</button> </form> </div> </div></div> |
※class="span3"は長さを表すクラス。別にここじゃなくても、色々な場所で使える
※placeholder="検索">で、フォームに初期表示される値を指定できる
9.ドロップダウンメニュー
<ul class="nav"> <li class="active">ホーム</li> <li>このサイトについて</li> <li>ヘルプ</li> <li class="dropdown" data-dropdown="dropdown"> 製品紹介 <ul class="dropdown-menu"> <li>製品A</li> <li>製品B</li> <li class="divider"></li> <li>製品C</li> </ul> </li> </ul> |