Twitter Bootstrap v2 の使い方を覚えるためのHTML
- ナビバーがスマホ対応のテンプレート
- ナビバーがスマホ対応だけど主にPC向けのレイアウト
- ナビバーがスマホ対応だけど主にPC向けのサイドバー付きレイアウト
- サイドバーなしタイプ
- 可変幅のレアイウト
- グリッドレイアウトの組み方
- グリッドレイアウトのさまざまな例
- 9と3に分けることで一時的に右サイドバーを作る例
- 3、6、3で分けて左右にサイドバーを作る
- グリッドレイアウトをネストする
- ネストしたグリッドレイアウトにテキストを流してみる
- H1とsmallタグ
- 固定トップバーを使うときは下に来る要素をずらすこと
- ツールバーにナビゲーションを並べるには？
- ナビゲーションを右側に並べるには？
- ツールバーに検索窓を左右に入れるには？
- ドロップダウン
- ツールバー全部入り
- スクロールに合わせてトップバーのactiveを切り替える
- フッター
- テキストの装飾 code b em
- インラインラベル
- blockquoteは本文をpで出典をsmallに入れる
- リスト
- テーブルまとめ
- テーブル - 色づけ
- 画像や動画を並べる
- 画像や動画を綺麗にたくさん並べる
- フォームのフィールドの上にラベルを表示するには？
- フォームの基本
- フォームの入力要素の disabled と readonly
- フォームの入力要素の横幅をグリッドに合わせるには？
- フォームの入力要素の横幅をキーワードで指定するには？
- 入力要素でもないタグで入力できないフィールドを装うには？
- 入力フィールドの前にフィールドの一部っぽいテキストをくっつけるには？
- 入力要素の右や下にヒントを表示するには？
- 入力要素のグループを縦に並べるには？
- フォームで入力要素を目立たせるには？
- 入力要素のグループを横に並べるには？
- ボタン
- ボタンで実行→実行中を表す
- ボタン - toggleメッセージで対象のボタンが窪む
- ボタン - 任意のラベルに切り替える美しい仕組み
- アイコン使用例
- 使いやすいそうなナビゲーションリスト
- くぼみパターン - ちょっとしたグループ化と注目
- navシリーズ
- タブは上下左右に配置できる
- タブ - 横幅が足りないのでドロップダウンにする例
- タブが変更されたときの検知方法
- タブの切り替えトリガーに反応してAjax
- パンくず
- ページネーション
- ページャー
- 1行用 + 閉じるボタン付き(x4色)
- プログレスバー
- ツールチップに画像を出すには？
- ポップオーバー
- ポップオーバーで画像埋め込み
- ポップオーバーのカスタマイズ
- ポップアップダイアログのスタイル確認用
- ポップアップダイアログのコントロール例
- ポップアップの中でiframeを表示する例
- ポップアップの中でニコニコ動画を表示する例
- ポップアップの中で他のサイトを表示する例
- ポップアップのフック確認
- ドロップダウン
- アコーディオン
- 画像スライド
- オートコンプリート
- ツールチップ→ポップオーバー→ダイアログの順でアップグレードする例
- 「メッセージが届いています」をだんだん強調していく
- クリックするだけで全選択するには？
- コードに色付け - 明い色
- コードに色付け - 暗い色
- Twitter bootstrap.css のデモで使われているヘッダーのデザイン
- Twitter bootstrap JavaScript サイドのデモで使われているヘッダーのデザイン
- LESSの動的コンパイル
- ヨーヨートリック集
- Bootstrap のドキュメントを元にログインページを作ってみる
- わからなくなったらこれを見る
shift + n: next
shift + p: prev
shift + i: index