Twitter Bootstrap v2 の使い方を覚えるためのHTML

一覧

1. ナビバーがスマホ対応のテンプレート
2. ナビバーがスマホ対応だけど主にPC向けのレイアウト
3. ナビバーがスマホ対応だけど主にPC向けのサイドバー付きレイアウト
4. サイドバーなしタイプ
5. 可変幅のレアイウト
6. グリッドレイアウトの組み方
7. グリッドレイアウトのさまざまな例
8. 9と3に分けることで一時的に右サイドバーを作る例
9. 3、6、3で分けて左右にサイドバーを作る
10. グリッドレイアウトをネストする
11. ネストしたグリッドレイアウトにテキストを流してみる
12. H1とsmallタグ
13. 固定トップバーを使うときは下に来る要素をずらすこと
14. ツールバーにナビゲーションを並べるには？
15. ナビゲーションを右側に並べるには？
16. ツールバーに検索窓を左右に入れるには？
17. ドロップダウン
18. ツールバー全部入り
19. スクロールに合わせてトップバーのactiveを切り替える
20. フッター
21. テキストの装飾 code b em
22. インラインラベル
23. blockquoteは本文をpで出典をsmallに入れる
24. リスト
25. テーブルまとめ
26. テーブル - 色づけ
27. 画像や動画を並べる
28. 画像や動画を綺麗にたくさん並べる
29. フォームのフィールドの上にラベルを表示するには？
30. フォームの基本
31. フォームの入力要素の disabled と readonly
32. フォームの入力要素の横幅をグリッドに合わせるには？
33. フォームの入力要素の横幅をキーワードで指定するには？
34. 入力要素でもないタグで入力できないフィールドを装うには？
35. 入力フィールドの前にフィールドの一部っぽいテキストをくっつけるには？
36. 入力要素の右や下にヒントを表示するには？
37. 入力要素のグループを縦に並べるには？
38. フォームで入力要素を目立たせるには？
39. 入力要素のグループを横に並べるには？
40. ボタン
41. ボタンで実行→実行中を表す
42. ボタン - toggleメッセージで対象のボタンが窪む
43. ボタン - 任意のラベルに切り替える美しい仕組み
44. アイコン使用例
45. 使いやすいそうなナビゲーションリスト
46. くぼみパターン - ちょっとしたグループ化と注目
47. navシリーズ
48. タブは上下左右に配置できる
49. タブ - 横幅が足りないのでドロップダウンにする例
50. タブが変更されたときの検知方法
51. タブの切り替えトリガーに反応してAjax
52. パンくず
53. ページネーション
54. ページャー
55. 1行用 + 閉じるボタン付き(x4色)
56. プログレスバー
57. ツールチップに画像を出すには？
58. ポップオーバー
59. ポップオーバーで画像埋め込み
60. ポップオーバーのカスタマイズ
61. ポップアップダイアログのスタイル確認用
62. ポップアップダイアログのコントロール例
63. ポップアップの中でiframeを表示する例
64. ポップアップの中でニコニコ動画を表示する例
65. ポップアップの中で他のサイトを表示する例
66. ポップアップのフック確認
67. ドロップダウン
68. アコーディオン
69. 画像スライド
70. オートコンプリート
71. ツールチップ→ポップオーバー→ダイアログの順でアップグレードする例
72. 「メッセージが届いています」をだんだん強調していく
73. クリックするだけで全選択するには？
74. コードに色付け - 明い色
75. コードに色付け - 暗い色
76. Twitter bootstrap.css のデモで使われているヘッダーのデザイン
77. Twitter bootstrap JavaScript サイドのデモで使われているヘッダーのデザイン
78. LESSの動的コンパイル
79. ヨーヨートリック集
80. Bootstrap のドキュメントを元にログインページを作ってみる
81. わからなくなったらこれを見る

確認方法

$ open index.html

操作

shift + n: next
shift + p: prev
shift + i: index