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 のドキュメントを元にログインページを作ってみる
わからなくなったらこれを見る

確認方法

$ open index.html

操作

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

akicho8/bootstrap_learning

ErrorLooks like something went wrong!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages